---

选择器

选择器：可以帮助你精准的选中想要的元素

一、简单选择器

1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器
   *，所有元素全部选中

 *{
    color:red;
} 
1
2
3

5. 属性选择器
   根据属性名和属性值来选中元素

/* 1、选中所有具有href属性的元素 */
[href]
{
    color:red;
}
/* 2、选中特定元素 */
[href="http://www.sina.com"]
{
    color:red;
}
1
2
3
4
5
6
7
8
9
10

6. 伪类选择器[常见]
   选中某些元素的某种状态

1)link:超链接从来为访问过的状态

2)visited:超链接访问过的状态

3)hover：鼠标悬停状态

4)active:激活状态，鼠标按下状态

爱恨法则：love hate，按以上顺序写

/* 选中鼠标悬停时的a元素 */
a:hover{
    color:red;
}

/* 鼠标按下时的a元素 */
a:active{
    color:#008c8c;
}

a:link{
    color:chocolate;
}
a:visited{
    color:rgb(147,165,42);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

7. 伪元素选择器
   生成并选中某个元素
   1)before
   2)after

span::before{
    content:"《";
    color:red;
}
span::after{
    content:"》";
    color:red;
}

1
2
3
4
5
6
7
8
9

<p>严老师和陈老师<span>课程span>真是不错啊p>

1
2

二、选择器的组合

1. 并且
2. 后代元素—— 空格
3. 子元素—— >
4. 相邻兄弟元素—— +
5. 兄弟元素—— ~

/*
p {
    text-indent:2em;
    line-height:2;
}
p.red{
    color:red;
}

.red li{
    color:#008c8c;
}*/
/* 选中div的子元素ul,ul的子元素li */
div>ul>li{
    color:blue;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="red">
Lorem.
<ul>
    <li>Lorem.li>
    <li>Loremmm.li>
    <li>Happy.li>
ul>
div>
1
2
3
4
5
6
7
8

三、选择器的并列

多个选择器，用逗号分隔
语法糖，方便写代码

.special~li,p{
    color:#008c8c;
}
1
2
3