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


什么是选择器

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


简单选择器

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

比较源次序

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


应用

重置样式表

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

Last modification:March 14th, 2020 at 02:26 pm
If you think my article is useful to you, please feel free to appreciate