我为什么会突然想起写这篇文章?
因为在前几天有人问了一些选择器的问题,我听起来也觉得比较懵逼,因为很少用到他说的那些,于是我就回炉重造了一番。
什么是选择器
选择器:帮你精准的选中想要的元素
简单选择器
- ID选择器:
#demo{
background-color:red;
}
- 元素选择器:
p{
background-color:red;
}
- 类选择器:
.demo{
background-color:red;
}
- 通配符选择器:
/*选中所有元素*/
*{
margin:0;
}
- 属性选择器:
/*根据属性名和属性值来选择*/
/*选中所有具有href属性的元素*/
[href]{
color:red;
}
- 伪类选择器:
/*选中某些元素的某个状态*/
a:hover{
color:red;
}
如果需要用到,则需要以下面的顺序来书写
1)link:超链接未访问时的状态
2)visited:超链接访问过后的状态
3)hover:鼠标悬停状态
4)active:激活状态,鼠标按下状态
- 伪元素选择器:
span::before{
content:"《";
color:red;
}
- 更多伪类选择器:
1)first-child(选中第一个子元素,a:first-of-type:选中子元素中第一个指定类型(a)元素)
2)last-child(最后一个,a:last-of-type:选中子元素中最后一个指定类型(a)元素)
3)nth-child(指定哪一个,a:nth-child(5):选中子元素中第五个指定类型(a)元素)
4)nth-of-type(选中指定的子元素中第几个某类型的元素,a:nth-of-type(5))
- 更多伪元素选择器:
1)first-letter(选中元素中的第一个的文字)
2)first-line(选中元素中的第一行的文字)
3)selection(选中元素中用户框选的文字)
选择器的组合
- 并且:
p.demo{
background-color:red;
}
- 后代元素 —— 空格:
.demo .demo1{
background-color:red;
}
- 子元素 —— >:
p>.demo{
background-color:red;
}
- 相邻兄弟元素 —— +:
/*demo的下一个兄弟元素*/
.demo1+li{
background-color:red;
}
- 兄弟元素 —— ~:
/*demo后面出现的所有兄弟元素*/
.demo~li{
background-color:red;
}
选择器的并列
/*多个选择器,用逗号分隔*/
.demo1~li,.demo,#demo{
background-color:red;
}
层叠
声明冲突:同一个元素多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
比较重要性
重要性从高到低:
作者样式表:开发者书写的样式
1)作者样式表中的!import样式
2)作者样式表中的普通样式
3)浏览器默认样式表
比较特殊性
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数(xxxx)(数字大者覆盖数字小者的样式,注意:需要一个一个比较,满十不会进一)
- 千位:如果是内联样式,记1,否则记0(如果千位数胜出则不用进行下一步,以此类推)
- 百位:等于选择器中的所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
比较源次序
如果特殊性一样则比较源次序
源次序:代码书写靠后的胜出
应用
重置样式表
书写一些作者样式,覆盖浏览器默认样式
重置样式表覆盖浏览器默认样式
常见的重置样式表:normalize.css、reset.css、meyer.css
版权属于:Citrons
本文链接:https://www.citrons.cn/note/265.html
转载时须注明出处及本声明