CSS3中给了我们更多的选择器让我们来获取元素，极大程度提高了查找元素的精度以及准确性，值得庆幸的是绝大多数的选择器的语法跟
jQuery中兼容
属性选择器
属性选择器的作用就是，根据标签的属性去筛选对应的元素，属性选择器从
CSS2推出，在CSS3中增加了几个新的
选择器语法：
下列的属性名都为att 这里就不单独写了 E[att]:包含attr属性 E[att="val"]:属性值为val E[att~="val"]:属性值使用空格进行分割,有一个为val E[att^="val"]:属性值以val开头 E[att$="val"]:属性值以val结尾 E[att*="val"]:属性中包含val E[att|="val"]:属性以‘-’分割，其中有val值（如果属性只有val 那么也会被选中哦）
示例代码：
示例代码直接新建页面，运行即可
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li[skill]{ background-color: red;
} li[color = "white"]{ background-color: blue;
} li[color~="red"]{ background-color: orange;
} li[color^="bla"]{ border: 10px solid #0094ff;
} li[color$="ge"]{ font-size: 32px;
} li[color*="orange"]{ color:orange;
} li[color|="black"]{ background-color: black;
} </style></head><body>
<ul>
<li skill="喷火">葫芦娃</li>
<li color = "black">黑猫警长</li>
<li color = "white">海尔兄弟</li>
<li color = "blue red">舒克和贝塔</li>
<li color = "white gray">喜羊羊与灰太狼</li>
<li color = "black-orange">大头儿子小头爸爸</li>
</ul></body></html>兄弟选择器
兄弟选择器的作用是，选择相邻的兄弟节点
语法：
相同
父元素中在选择器1
之后的所有满足选择器2的元素
选择器1~选择器2
示例代码：
在class为
.first之后的所有class为.meat的元素背景颜色会变为红色
需要注意的是,之前的并不会获取到哦
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style type="text/css">
.first~.meat{ background-color: red;
} </style></head><body>
<p class="meat">牛肉</p>
<h1 class="first">我是h1</h1>
<p>西兰花</p>
<p>西葫芦</p>
<p class="meat">牛肉</p>
<h1>我是h1</h1>
<p>小白菜</p>
<p class="meat">牛肉</p>
<p class="meat">牛肉</p></body></html>伪类选择器
伪类选择器，CSS3中推出了一些新的
伪类选择器，将常用的列举如下
语法：
使用注意：
* 标签E,必须是某个元素的子元素(在界面上)
* 如果通过伪类选择器找到的元素不是E则选择无效
结构伪类E:first-child：第一个子元素E:last-child：最后一个子元素E:nth-child(n)： 第n个子元素，计算方法是E元素的全部兄弟元素；E:nth-last-child(n)： 跟E:nth-child(n)类似 ，只是倒着计算； 其中n的取值范围是：0，1,2,3,4...线性累加 可以传入表达式，比如2n,2n+1等等 可以传入特殊字符：even(偶数) odd(奇数)E:empty 指的是E标签，并且内容为空E:not(选择器)：指的是，不满足括号内选择器条件的元素E目标伪类E:target:选中当前锚点
示例代码：
示例代码直接新建页面，运行即可
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>选择器 - 伪类</title>
<style>
body { margin: 0; padding: 0; background-color: #F7F7F7;
} ul { width: 560px; padding: 0; margin: 100px auto; list-style: none; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; overflow: hidden;
} li { width: 79px; height: 80px; text-align: center; line-height: 80px; border-left: 1px solid #CCC; border-top: 1px solid #CCC; background-color: #FFF; font-size: 24px; font-weight: bold; color: #333; float: left;
} /*第一个*/
li:first-child{ color: red;
} li:last-child{ color:red;
} li:nth-child(2){ color:blue;
} li:nth-child(2n){ color: blue;
} li:nth-child(2n+1){ color:red;
} li:nth-last-child(1){ background-color: pink;
} li:nth-last-child(2){ background-color: yellow;
} /*奇数*/
li:nth-child(odd){ background-color: pink;
} /*偶数*/
li:nth-child(even){ background-color: skyblue;
} </style></head><body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul></body></html>
calendar.png
伪元素选择器
before&after
语法：
使用注意：
需要配合
content属性使用（如果没有,输入""空字符串）可以用来制作图标
部分图标框架使用的就是这种机制
默认是行内元素，根据需求可能需要修
E:before：在元素E之前添加E:after：在元素E末尾添加 也可以写为E::beforeE::after
first-letter
语法：
获取的是内容的第一个文字
根据语言不通，会有细微差别
E:first-letter等价于E::first-letter
first-line
语法：
获取的是内容的第一行的内容
可以配合p标签使用
E:first-line等价于E::first-line
作者：Rella7
链接：https://www.jianshu.com/p/b750c9eb6123
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦