AI专业者开发社区 1 号成员
  •  0 回帖  •  7 浏览  •  4 个月前
   

CSS选择器

前面的话

　　CSS 的一个核心特性是能向文档中的一组元素类型应用某些规则，本文将详细介绍 CSS 选择器

　　[注意] 关于选择器兼容性的详细信息移步至此

 

通配选择器

　　星号 * 代表通配选择器，可以与任何元素匹配

*{color: red;}

 

元素选择器

　　文档的元素是最基本的选择器

html{color: black;}
p{color: gray;}
h2{color: silver;}

 

类选择器

　　类选择器用于选择一类元素

.div{color: red;}

　　1、多类选择器

.div1.div2{color: red;}

　　2、结合元素的类选择器

p.div{color: red;}

 

ID 选择器

　　ID 选择器用于选择一个元素

#test{color: red;}

　　[注意] 在实际中，浏览器并不会检查 ID 的唯一性，设置多个 ID，可以为这些具有相同 ID 的元素应用相同样式，但在编写 DOM 脚本时只能识别该 id 的第一个元素。 

　　1、结合元素的 ID 选择器

div#test{color: red;}

 

属性选择器

　　属性选择器根据元素的属性及属性值来选择元素 (IE6- 不支持)

　　1、简单属性选择器

h1[class]{color: red;}
img[alt]{color: red;}
a[href][title]{color: red;}
#div[class]{color: red;}
.box[id]{color: red;}
[class]{color: red;}

　　2、具体属性选择器

a[href="http://www.baidu.com"][title="baidu"] {color: red;}

　　class 里面的值以及顺序必须完全相同，并且不可多空格或者少空格

[class="test box"]{color: red;}

　　ID 选择器和指定 id 属性的属性选择器并不是一回事，主要在于优先级不同

[id="tox"]{color: red;}

　　3、部分属性选择器

[class ~="b"] 选择 class 属性值在用空格分隔的词列表中包含词语"b"的所有元素

　　例如：class="ab" 不满足[class ~="b"]，而 class="a b" 或 class="b" 满足

[class |="b"] 选择 class 属性值等于 b 或以 b- 开头的所有元素

　　例如：class="ab" 或 class="ab-" 不满足 [class |="a"]，而 class="a" 或 class="a-" 满足

[class ^="b"] 选择 class 属性值以 "b" 开头的所有元素
[class $="b"] 选择 class 属性值以 "b" 结尾的所有元素
[class *="b"] 选择 class 属性值包含 "b" 的所有元素

 　　上面三个属于正则匹配，是 CSS3 新增的属性选择器

 

分组选择器

　　将要分组的选择器放在规则左边，并用逗号隔开

h1,p{color: red;}

 

后代选择器

ul li{color: red;}
div p, ul li{color: red;}

　　1、子元素选择器 (IE6- 不支持)

ul > li{color: red;}

 　　

兄弟元素选择器

　　1、相邻兄弟选择器 (IE6- 不支持)

div + p{color: red;}

　　[注意] 两个元素之间的文本内容不会影响相邻兄弟结合符起作用

　　2、通用兄弟选择器 (IE7- 不支持)

　　选择匹配的 F 元素，且位于匹配的 E 元素后的所有匹配的同级 F 元素

div ~ p {color:red;}

 

伪类选择器

　　伪类顺序：link-visited-focus-hover-active

　　[注意] 关于伪类的更多信息移步至此

　　1、静态伪类 (只应用于超链接)

　　[注意]visited 伪类只能设置字体颜色、边框颜色、outline 颜色的样式

:link       未访问
:visited    已访问
a:link{color: red;}
a:visited{color: green;}

　　2、动态伪类 (可应用于任何元素)

:focus     拥有焦点 (IE7- 不支持)
:hover     鼠标停留 (IE6- 不支持给<a>以外的其他元素设置伪类 )
:active    正被点击 (IE7- 不支持给<a>以外的其他元素设置伪类 )

　　3、目标伪类:target(IE8- 不支持)

　　匹配锚点对应的目标元素

:target{color: red;}
#test :target{color: red;}//id 为 test 的目标元素

　　4、UI 元素伪类 (IE8- 不支持)

:enabled    可用状态
:disabled    不可用状态
:checked    选中状态
input:enabled{color: red}

　　[注意]input 和: 和 enabled 之间都不可以有空格

　　5、结构伪类 (IE8- 不支持)

E:first-child(IE6- 不支持) 父元素的第一个子元素, 且该子元素是 E，与 E:nth-child(1) 等同
E:last-child(IE6- 不支持) 父元素的最后一个子元素，且该子元素是 E，与 E:nth-last-child(1) 等同
:root 选择文档的根元素，即 <html> 元素
E F:nth-child(n) 选择父元素的第 n 个子元素，父元素是 E，子元素是 F
E F:nth-last-child(n) 选择父元素的倒数第 n 个子元素，父元素是 E，子元素是 F
E F:nth-of-type(n) 选择父元素的具有指定类型的第 n 个子元素，父元素是 E，子元素是 F
E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第 n 个子元素，父元素是 E，子元素是 F
E:first-of-type 选择父元素中具有指定类型的第 1 个子元素，与 E:nth-of-type(1) 相同
E:last-of-type 选择父元素中具有指定类型的最后 1 个子元素，与 E:nth-last-of-type(1) 相同
E:only-child 选择父元素中只包含一个子元素，子元素是 E
E:only-of-type 选择父元素中只包含一个同类型的子元素，子元素是 E
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点

　　[注意]n 可以是整数 (从 1 开始)，也可以是公式，也可以是关键字 (even、odd)

p:first-child    代表的并不是<p>的第一个子元素，而是<p>元素是某元素的第一个子元素
p > i:first-child    匹配所有<p>元素中的第一个<i>元素
p:first-child i 匹配所有作为第一个子元素的<p>元素中的所有<i>元素

　　6、:lang 相当于 |= 属性选择器 (IE7- 不支持)

p:lang(en) 匹配语言为 "en" 的<p>

　　7、伪类的结合

a:visited:hover:first-child{color: black;}

　　[注意] 顺序无关

 

伪元素选择器

　　IE8- 浏览器仅支持伪元素选择器的单冒号表示法

　　[注意] 关于伪元素的更多信息移步至此

　　1、:first-letter 设置首字母样式

　　所有前导标点符号应与第一个字母一同应用该样式；只能与块级元素关联；只有当选择器部分和左大括号之间有空格时，IE6- 浏览器才支持。因为 first-letter 中存在连接符的原因

p:first-letter {color: red;}

　　2、:first-line 设置首行样式

　　只能与块级元素关联；只有当选择器部分和左大括号之间有空格时，IE6- 浏览器才支持。因为 first-line 中存在连接符的原因

p:first-line{color: red;}

　　3、:before 在元素内容前面插入内容 (IE7- 不支持)

　　默认这个伪元素是行内元素，继承元素可继承的属性；所有元素都必须放在出现该伪元素的选择器的最后面。若写成 p:before em 就是不合法的

p:before{content:"text"}

　　4、:after 在元素内容后面插入内容 (IE7- 不支持)

　　默认这个伪元素是行内元素，继承元素可继承的属性

p:after{content:"text"}

　　5、::selection 匹配被用户选择的部分

　　目前 selection 只支持 color 和 background 两个属性，且只支持双冒号写法 (IE8- 浏览器不支持)

::-moz-selection 　　 firefox 浏览器需要添加前缀

 

根元素选择器

　　单独把它拿出来讲，是因为其特殊性。根元素选择器:root 用来选择 HTML 元素，但由于其实质是伪类选择器，所以其优先级更高。在 HTML 上设置的样式，如果在:root 上也设置了同样的样式，则会被覆盖

　　下面是一个例子，常说的 rem 单位是以根元素的 font-size 为标准的

html{font-size:20px;}
:root{font-size:30px;}

　　上面的代码中，最终 1rem=30px