css学习记录二:CSS选择器(二):复合选择器
一、什么是复合选择器
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对
基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素(标签) 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
二、复合选择器分类
一 、后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在
后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
(重点)写法是标签(ID或类) +空格+标签(ID或类) 标签之间必须要有包含关系,且可省略中间的父代,直接写爷孙代的标签(ID或类) ,后代选择器是常用的一种选择器,sass和less,嵌套的元素几乎都是这么选择的。
ul li { 样式声明 }/* 选择 ul 里面所有的 li标签元素 */
- 元素1 和 元素2 中间用空格隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2
- 元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
- 元素1 和 元素2 可以是任意基础选择器
二、子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
子代选择器是用选儿子元素,且选不到儿子后面的元素,它与后代选择器的写法区别是中间的空格用“>”替代。
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
- 元素1 和 元素2 中间用 大于号 隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2 元素2 必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
三、并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明. 并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */
- 元素1 和 元素2 中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
四、交集选择器
<style>
div#box2{
backgroun:red
}
/*表示选中id为box2的元素*/
</style>
<body>
<div id="box">
<div id="box2">
</div>
</div>
</body>
交集选择器,相当于一个筛选条件,先找前面的标签,再找后面的id或者类,这样可以只选择你需要设置的元素。而不会影响不同的元素有同个类名或同种元素有不同类名的元素。交集选择器就是两个基础选择器合起来,但是第一个选择器必须是标签名,后面没有空格,直接连写id或者类,表示找的这个元素,既要满足这个标签名又要满足这个类名或id。
五、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
因为伪类选择器很多,比如有链接伪类、结构伪类等。
1.链接伪类选择器
链接伪类选择器注意事项
- 为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
- 记忆法:love hate 或者 lv 包包 hao 。
- 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
2.:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color:yellow;
}
六、属性选择器(CSS3新特性)
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
<style>
input[type='text']{
width:300px;
}
</style>
<body>
<input type="text"/>
</body>
属性选择器就是选中带有这个属性的标签。[]里可以单写属性,表示有这个属性的所有元素。
选择器 | 描述 |
---|---|
E[att] | 选择具有 att属性的 E元素 |
E[att=“val”] | 选择具有 att属性且属性值等于val的E元素 |
E[att^=“val”] | 匹配具有 att属性且值以val开头的E元素 |
E[att$=“val”] | 匹配具有 att属性且值以val 结尾的E元素 |
E[att*=“val”] | 匹配具有 att属性且值中含有 val的E元素 |
注意:类选择器、属性选择器、伪类选择器,权重为 10。
七、结构伪类选择器(CSS3新特性)
结构伪类选择器主要根据文档结构来选择器元素, 常用于根据父级选择器里面的子元素
选择器 | 描述 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)
- n 可以是数字,关键字和公式
- n 如果是数字,就是选择第 n 个子元素, 里面数字从1开始… - n 可以是关键字:even 偶数,odd 奇数
- n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 )
公式 | 描述 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 … |
n+5 | 从第五个开始(包含第五个)到最后 |
-n+5 | 前5个(包含第五个)… |
区别:
- nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子
八、 伪元素选择器(CSS3新特性)
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
选择符 | 描述 |
---|---|
::before | 在元素内部的前面插入内容 |
:;after | 在元素内部的后面插入内容 |
注意:
- before 和 after 创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法: element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为 1
1.伪元素常见案例
伪元素字体图标
做遮罩层
伪元素清除浮动