06：选择器

知识梳理

选择器就是找到页面中特定的HTML元素

CSS就两件事 选对人 做对事

选择器分为基础选择器 和 复合选择器

一 基础选择器

1）标签选择器 [ 元素选择器 ]

div {color: red;} //直接写HTML元素名称

2）类选择器 [ 重点 ] 

<div class = "one two three"></div>//可以指定多个类名,中间用空格隔开

3）id选择器

#id {}
<div id="id"></div> //主要和JavaScript配合使用

4）通配符选择器

* {
　　margin: 0;
　　padding: 0;
} //匹配所有标签

二 复合选择器 [ 也称 组合选择器 ]

重点掌握: 后代选择器 并集选择器 链接伪类选择器

1）后代选择器 [ 重点 ] 

也称包含选择器

//1 可以选出 儿子 孙子 重孙子
//2 当标签嵌套时，内层的标签就是外层的后代
//3 p是div的儿子 a是div的孙子

.box a {text-decoration: line-through;}
<div class="box">
    <p>
        <a href="">hello</a>
        <a href="">hello</a>
        <a href="">hello</a>
    </p>
</div>

2）并集选择器 [ 重点 ]

并集选择器 用逗号隔开，逗号可以理解为和的意思,通常用于集体声明，可以使代码更简洁
.one,
#two,
.three { color: red; }

3）链接伪类选择器 [ 重点 ]

加冒号的都是伪类
a:link {} //未访问的链接
a:hover {} //鼠标移动到链接上 [ 常用 ]
a:visited {} //已访问的链接
a:active {} //选定的链接 按下鼠标不松开的时候
书写顺序 l v h a  

4）子元素选择器

.box>a {属性名: 属性值} //1 只能选择到儿子,选择不到孙子元素

5）交集选择器

即是 又是 的概念

p.one {} 类名为.one的段落标签

中间不能包含空格，交集选择器用的很少 做了解

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是**>** .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法