CSS选择器和其优先级的简单介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cao2219600/article/details/82779783

CSS的简单语法:

​ 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

CSS选择器: 帮助我们找到我们要修饰的标签或者元素。

1.三种常用选择器:

元素选择:

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

ID选择器:

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

类选择器:

以 . 开头 
.类的名称{
   属性名称:属性的值;
    属性名称:属性的值;
}

2.CSS的优先级

按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式.

也可以理解为由四个级别和各级别的出现次数决定的。
四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法:
每个规则对应一个初始"四位数":0、0、0、0
若是 行内选择符,则加1、0、0、0
若是 ID选择符,则加0、1、0、0
若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0
若是 元素选择符/伪元素选择符,则分别加0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。  

猜你喜欢

转载自blog.csdn.net/cao2219600/article/details/82779783
今日推荐