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 实际开发的写法 |