CSS3选择器
2017-04-27 本文已影响14人
Rella7
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::before
E::after
first-letter
-
语法：
- 获取的是内容的第一个文字
- 根据语言不通，会有细微差别
E:first-letter等价于E::first-letter
first-line
-
语法：
- 获取的是内容的第一行的内容
- 可以配合p标签使用
E:first-line等价于E::first-line
