1、属性选择器
-
说明
选取标签带有某些特殊属性的选择器
-
常用
选择符 描述 E[attr] 选择具有attr属性的E元素 E[attr="val"] 选择具有attr属性且属性值等于val的E元素 E[attr^="val"] 选择具有attr属性且属性值以val开头的E元素 E[attr$="val"] 选择具有attr属性且属性值以val结尾的E元素 E[attr*="val"] 选择具有attr属性且属性值含有val的E元素
-
E[attr]选择器选择具有attr属性的E元素
举例：
<style> button{ color: red; } button[disabled]{ color: #cccccc; } </style> <button>Button</button> <button>Button</button> <button disabled='disabled'>Button</button> <button disabled='disabled'>Button</button> -
E[attr="val"]选择器选择具有attr属性且属性值等于val的E元素
举例：
<style> input[type='search']{ color: pink; } </style> <input type="text" value="文本框" /> <input type="text" value="文本框" /> <input type="search" value="搜索框" /> <input type="search" value="搜索框" />
-
E[attr^="val"]选择器选择具有attr属性且属性值以val开头的E元素
举例：
<style> div[cladd^='']{ color: pink; } </style> <div class="font12">属性选择器</div> <div class="font24">属性选择器</div> <div class="font24">属性选择器</div>
-
E[attr$="val"]选择器选择具有attr属性且属性值以val结尾的E元素
举例：
div[cladd$='4']{ color: pink; }
-
E[attr*="val"]选择器选择具有attr属性且属性值含有val的E元素
举例：
div[cladd*='2']{ color: pink; } -
注意
类选择器、属性选择器、伪类选择器权重都为10
2、结构伪类选择器
-
常用
选择符 描述 E:first-child 选择父元素中的第一个子元素E E:last-child 选择父元素中的最后一个子元素E E:nth-child(n) 选择父元素中的第n个子元素E E:first-of-type 选择指定类型E的第一个 E:last-of-type 选择指定类型E的最后一个 E:nth-of-type 指定类型E的第n个
-
:first-child选择器表示选择父元素的第一个子元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
举例：
ol > li:first-child{ color: red; } -
:last-child选择器选择的是元素的最后一个子元素。比如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器。
举例：
ol > li:last-child{ color: red; } -
:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，不仅可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd 奇数、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
举例：
ol li:nth-child(even){ background: orange; } -
注意
选择父元素里面的第n个孩子，不管父元素里面是否是同一种类型。
-
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
举例：
p{ background: orange; min-height: 30px; } p:empty { display: none; } -
:root选择器从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。
:root{ background:pink; } /*等同于*/ html {background:pink;}
-
:nth-last-child(n)选择器从最后一个开始算索引。
举例：
ol > li:nth-last-child(1){ color: blue; }
-
E:first-of-type选择器匹配同级兄弟元素中的第一个E元素，of-type 选择指定类型的元素
举例：
div span:first-of-type{ background-color: yellowgreen; }<div> <p>p标签</p> <span>span1</span> <span>span2</span> <span>span3</span> <span>span4</span> </div>
-
E:last-of-type选择器匹配同级兄弟元素中的最后一个E元素，of-type 选择指定类型的元素
举例：
div span:last-of-type{ background-color:rebeccapurple; }<div> <p>p标签</p> <span>span1</span> <span>span2</span> <span>span3</span> <span>span4</span> </div>
-
E:nth-of-type选择器匹配同级兄弟元素中的最后一个E元素，of-type 选择指定类型的元素
举例：
div span:nth-of-type(2){ background-color: blue; }<div> <p>p标签</p> <span>span1</span> <span>span2</span> <span>span3</span> <span>span4</span> </div> -
注意
-
ul 里面中允许放li，所以nth-child和nth-of -type是一样的
-
伪类选择器权重为10
-
3、伪元素选择器
-
常用
选择符 描述 ::before 在元素内容的前面插入内容 ::after 在元素内容的后面插入内容 ::first-letter 选择文本的第一个单词或字（如中文、日文、韩文等） ::first-line 选择文本第一行 ::selection 选择可选中的文本添加样式
E::before和E::after
-
说明
在E元素内部的开始位置和结束位创建一个元素，该元素为==行内元素==，且必须要结合content属性使用，因为在dom中看不见创建的元素，所以称为伪元素。
-
语法
div::befor { content:"开始"; } div::after { content:"结束"; } -
注意
-
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
-
":" 与 "::" 区别在于区分伪类和伪元素
-
伪元素和标签选择器一样，权重为1
-
E::first-letter
-
说明
文本的第一个单词或字（如中文、日文、韩文等）
-
语法
p::first-letter { font-size: 20px; color: hotpink; }
E::first-line
-
说明
文本第一行
-
语法
/* 首行特殊样式 */ p::first-line { color: skyblue; }
E::selection
-
说明
可改变选中文本的样式
-
语法
p::selection { /* font-size: 50px; */ color: orange; }
网友评论