我为什么会突然想起写这篇文章？
因为在前几天有人问了一些选择器的问题，我听起来也觉得比较懵逼，因为很少用到他说的那些，于是我就回炉重造了一番。

什么是选择器

选择器：帮你精准的选中想要的元素

简单选择器

• ID选择器:

#demo{
   background-color:red;
 }

• 元素选择器:

p{
   background-color:red;
 }

• 类选择器:

.demo{
   background-color:red;
 }

• 通配符选择器:

/*选中所有元素*/
*{
   margin:0;
 }

• 属性选择器:

/*根据属性名和属性值来选择*/
/*选中所有具有href属性的元素*/
[href]{
   color:red;
   }

• 伪类选择器:

/*选中某些元素的某个状态*/
a:hover{
   color:red;
 }

• 伪元素选择器:

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)浏览器默认样式表

比较特殊性

1. 千位:如果是内联样式，记1，否则记0(如果千位数胜出则不用进行下一步，以此类推)
2. 百位:等于选择器中的所有id选择器的数量
3. 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位:等于选择器中所有元素选择器、伪元素选择器的数量

比较源次序

如果特殊性一样则比较源次序
源次序：代码书写靠后的胜出

应用

重置样式表

书写一些作者样式，覆盖浏览器默认样式
重置样式表覆盖浏览器默认样式
常见的重置样式表:normalize.css、reset.css、meyer.css

版权属于：Citrons

本文链接：https://www.citrons.cn/note/265.html

转载时须注明出处及本声明