一、选择器分类
css中选择器有:简单选择器和复杂选择器
1、简单选择器
- 通配符选择器(*):匹配任何元素
- 标签选择器(标签):指用HTML标签名称作为选择器
- 类选择器(class):使用"."(英文点号)进行标识,后面紧跟类名。
- id选择器:使用#进行标识,后面紧跟id名
2、复杂选择器
- 1.属性选择器
- 2.组合选择器
选择器 | 含义 |
---|---|
并集选择器A,B | 两个选择器之间,逗号隔开的,逗号可以理解为和的意思 |
后代选择器A B | 把外层标签写在前面,内层标签写在后面,中间用「空格」分隔,先写父亲,再写儿子孙子。 |
子元素选择器A>B | 只能选择作为某元素子元素(亲儿子)的元素, 把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接 |
A + B | 选中匹配 B 且为匹配 A 的元素的下一相邻元素 |
A ~ B | 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素 |
交集选择器AB | 两个选择器之间不能有空格 |
交集选择器与后代选择器的区别?
从格式上来看
后代选择器:两个选择器之间要有空格
交集选择器:两个选择器之间没有空格
从内容上来看
后代选择器:后面一个标签/类选择器一定是前一个的后代,也就是说嵌套
交集选择器:后面一个标签只是对前面的标签选择器进行横向的再次筛选
交集选择器
<style>
div.b {
background-color: aqua;
}
</style>
<body>
<div class="b">
<p>我是一个屁</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
</body>
- 3.伪类选择器
选择器 | 含义 |
---|---|
a:link | 匹配所有未被点击的链接 |
a:visited | 匹配所有已被点击的链接 |
a:hover | 匹配鼠标悬停其上的a元素 |
a:active | 匹配鼠标已经其上按下、还没有释放的a元素 |
E:first-child | 匹配父元素的第一个子元素E |
E:last-child | 匹配父元素的最后一个子元素E |
E:nth-child(n) | 匹配父元素的第n个子元素E(odd奇数,even偶数) |
nth-child与nth-of-type区别:
1. nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配,若不匹配则不使用
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E . 然后再根据E找第n个孩子
五、伪元素选择器
选择器 | 含义 |
---|---|
E::before | 在E元素内创建一个子元素,插入生成的内容作为伪元素,放在最前面 |
E::after | 在E元素内创建一个子元素,插入生成的内容作为伪元素,放在最后面 |
二、CSS三大特性
「1. CSS 层叠性」
「2. CSS 继承性」
「3. CSS 优先级(CSS特殊性)」
权重计算公式:
标签选择器 | 计算权重公式 |
继承或者 * | 0,0,0,0 |
标签选择器 | 0,0,0,1 |
每个类,伪类 | 0,0,1,0 |
每个ID | 0,1,0,0 |
每个行内样式 style="" | 1,0,0,0 |
每个!important 最重要的 div { color: pink !important; } | ∞ 无穷大 |
权重叠加:
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
三、less 中的 & 解释
参考:
less 的 & 详解_hsany330的博客-CSDN博客_less中的&什么意思
& 作用介绍
内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面,如果没有 & 符号,则它被解析为父选择器的后代;如果有 & 符号,它就被解析为父元素自身或父元素的伪类。同时用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上
1.当前选择器的伪类或者伪元素。如 :hover :focus :after :before等
.demo {
&:after {
content: '.';
display: block;
background-color: aquamarine;
}
}
/*被解释为*/
.demo:after {
content: '.';
display: block;
background-color: aquamarine;
}
2. 作为内层选择器表示对父选择器的引用。交集选择器
.demo {
&-title {
text-align: center;
}
}
/*被解释为*/
.demo-title {
text-align: center;
}
3、后代选择器
.demo {
.demo-title {
text-align: center;
}
}
被解释为
.demo .demo-title {
text-align: center;
}
4、反转嵌套的顺序并且可以应用到多个类名上
.demo-title {
.demo & {
font-size: 20px;
}
}
被解释为
.demo .demo-title {
font-size: 20px;
}