编程教育资源分享平台

网站首页 > 后端开发 正文

css 选择器及其优先级

luoriw 2024-02-01 14:26:43 后端开发 10 ℃ 0 评论

一、基础知识点

1. 选择器类别

2. 基础选择器优先级(权重)

3. 优先级计算规则

两个选择器给同一元素设置相同的属性,分别将两个选择器权重相加,属性生效满足以下规则。
(1)权重大的选择器生效
(2)权重相同,后设置的选择器生效

值得注意的是:所有设置的选择器都会生效,只是优先级高的会覆盖掉优先级低的。

二、重难点

1.邻近兄弟选择器A+B,顾名思义就是选择紧靠A元素后面的B元素

/* css */
.div+.div{
  background-color: teal;
}
<!-- html -->
<div class="div">
  div1
</div>
<div class="div">
  div2
</div>
<div>
  div3
</div>
<div class="div">
  div4
</div>

以上述代码为例,显示效果如下图,可以看到只有紧靠在div1后面的div2添加了背景色

将上述例子中邻近兄弟选择器+换成兄弟选择器~,显示效果如下,div1后面的div2div4都添加了背景色

  1. 直接子代选择器A>B,选择A元素的直接子元素B
/* css */
.div > div {
  color: teal;
}
.indiv {
  color: thistle;
}
<!-- html -->
<div class="div">
  <div>
    div1
    <div class="indiv">div11</div>
  </div>
  <div>
    div2
  </div>
</div>

以上述代码为例,显示效果如下,显然.div > div选择器的权重>.indiv,但是却没有在div11中生效,说明其没有做到到div11上。


将上述例子中直接子代选择器A>B换成后代选择器A B,显示效果如下,div11添加了一样颜色

  1. 关系选择器(邻近兄弟选择器,兄弟选择器,直接子代选择器,后代选择器)的权重为其用到的基础选择器权重之和,与其是哪一种关系选择器无关。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言