css3新增加的选择器

css3新增加的选择器

一、属性选择器:

E[attr] 只要有属性名
E[attr=value] 属性名=属性值
E[attr~=blue] 包含这个blue整个单词就可以
E[attr^=c] 以这个字母c开头的
E[attr$=b] 以这个字母b结尾的
E[attr*=a] 只要包含a这个字母就行
E[attr|=z] 只要以字母z-开头的或者就是字母z的

二、结构性伪类选择器:

E:nth-child(n) 第n个子节点
div:nth-child(odd) 奇数行
div:nth-child(even) 偶数行
div:nth-child(2n) 2的倍数
E:nth-last-child(n) 倒数第n个

三、其他:

E:empty 空元素
E:first-child 第一个子节点、和 E:nth-child(1)等价
E:last-child 倒数第一个、和 E:nth-last-child(1)等价
* 注意不能有其他兄弟节点

E:target 锚点元素的样式
div:target{width:100px;}
<div id=”div1″></div>
只要锚点有#div1那上面的target样式就会生效
E:disabled 表单元素设置disabled
E:enabled 可点击的表单元素
E:checked 表示已经选中的checkbox或者radio

文本新增伪类:
E:first-line 第一行
E:first-letter 第一个字
E::selection 选中文本的时候
E::before E标签前面添加东西,需要配合content来用

E::after E标签后面添加东西
E:before E:after单引号也能用
E:not(s) 不包括s
h1:not(.red) 排除有class为red的h1元素
E~F E后面的F兄弟节点

时间: 2024-12-21 01:32:20

css3新增加的选择器的相关文章

CSS3新增加的伪类选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3新增加的伪类选择器</title>    <style type="text/css">    /*root所有的元素*/        :root{            color: pink;      

css3 新添加的选择器

E~F:选择E元素后面的所有兄弟元素F. E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素. E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素. E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素. E:not():匹配不含有s选择符的元素E. E:root:匹配E元素在文档. E:only-child匹配父元素仅有的一个子元素E.(要使该属性

CSS3新添加的选择器

[cusid*= value] { backgroud-color:#0094ff; } //表示元素自定义属性cusid的值包含value字符的即可使用如下样式. [cusid^= value] { backgroud-color:#0094ff; } //表示元素自定义属性cusid的值以value字符开头的即可使用如下样式. [cusid$= value] { backgroud-color:#0094ff; } //表示元素自定义属性cusid的值以value字符结尾的即可使用如下样式.

CSS3 选择器之基本选择器

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选择器主要是用来确定html的树形结构中的DOM元素节点. CSS3的常用选择器有: 下面举几个例子来说明选择器的实用方法: 1.创建如下的DOM结构: <div class="demo"> <ul class="clearfix"> <li

总结CSS3新特性(颜色篇)

颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数值[经实验,可以为小数]; 饱和度与亮度:均为百分比; 下图截自http://www.w3.org/wiki/CSS/Properties/color/HSL 当亮度为100%时为白色,当亮度为0%为黑色; 饱和度100%以及亮度50%时生成的颜色均为web安全色 rgb(): rgb函数:r(re

css3新的选择器

CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元素*/ ele[att*="val"] /*属性att包含val字符串的元素*/

HTML5和CSS3新特性一览

HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置. <command> 定义命令按钮,比如单选按钮.复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary>

CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边框 4.1.border-radius 圆角 4.2.边框图片border-image 五.变形 transform 5.1.rotate()2D旋转 5.2.设置原点 transform-origin 5.3.平移 translate() 5.4.缩放 scale 5.5.斜切扭曲skew 六.渐变

两点补充——CSS3新属性以及弹性布局

CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩