css_选择器进阶/如何简单提高选择器的优先级(权重)/类选择器及其衍生

文章目录

• ​​Table of contents​​

• ​​全局选择器​​

• ​​类选择器的衍生选择器​​

• ​​设计仅在指定(特定)元素类型中才生效的类选择器​​
• ​​设计多个类被同时应用才生效的选择器​​

• ​​如何简单提高选择器的优先级​​

• ​​不轻易使用!important​​
• ​​优先考虑的做法​​

• ​​效果​​
• ​​注意​​

Table of contents

• ​​推荐原文Type, class, and ID selectors - Learn web development | MDN (mozilla.org)​​
• CSS selectors

• ​​Type, class, and ID selectors​​
• ​​Attribute selectors​​
• ​​Pseudo-classes and pseudo-elements​​
• ​​Combinators​​

• ​​类型选择器​​
• ​​全局选择器​​
• ​​类选择器​​
• ​​ID选择器​​
• ​​全局选择器​​

全局选择器

• 全局选择器，是由一个星号（​​*​​）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。下面的示例中，我们已经用全局选择器，移去了所有元素上的外边距。这就是说，和浏览器以外边距隔开标题和段的方式默认加上的样式不同的是，每个物件都紧紧地挨在一起，我们不能那么容易就看清楚不同的段。
• ​​使用全局选择器，让选择器更易读​​全局选择器的一种用法是让选择器更易读，更明显地表明它们的作用。例如，如果我想选中任何​​<article>​​元素的第一子元素，不论它是什么元素，都给它加粗，我可以将​​​:first-child​​​选择器（我们将会在​​伪类和伪元素​​课中进一步了解）用作​​<article>​​元素选择器的一个兄弟选择器：

article :first-child {

}

• 但是这会和​​article:first-child​​混淆，而后者选择了作为其他元素的第一子元素的​​<article>​​元素。
• 为了避免这种混淆，我们可以向​​:first-child​​选择器加入全局选择器，这样选择器所做的事情很容易就能看懂。
• 选择器正选中​​<article>​​元素的任何第一子元素：(这里​​*​​表示选中article的所有后代)

article *:first-child {

}

类选择器的衍生选择器

• (比类选择器具有更高的specificity具体性/特异性)
• 这两类复合选择器像是一种串联简单选择和类的选择器

设计仅在指定(特定)元素类型中才生效的类选择器

• ​​Targeting classes on particular elements​​

• 你可以建立一个仅应用于特定类(例如​​<span>​​)的特定元素。
• 在下一个示例里面，我们将会用不同方式高亮一个带有highlight类的和带有 highlight类的标题。
• 通过使用附加了类的 欲选元素的 选择器做到这点，其间没有空格。
• 格式为:​​elementTypeName.className​​(该选择器表示,命中对象是声明了className类的elementTypeName元素)

span.highlight {
    background-color: yellow;
}

h1.highlight {
    background-color: pink;
}

<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

• 这种方式使CSS没那么可复用，因为​​类现在只会应用到特定元素​​​(比如​​span.highlight​​​仅作用于声明了​​class="highlight"​​的span元素
• 在认为规则也该应用到其他元素的时候，你会需要另外加上一个选择器。

设计多个类被同时应用才生效的选择器

• ​​Target an element if it has more than one class applied​​
• 你既可以对一个元素应用多个类，然后分别指向它们(基本做法)
• 或者仅仅在选择器中存在所有这些类的时候选择这一元素。(本节内容)

• 原文:
• You can apply multiple classes to an element and target them individually,
• or only select the element when​​all of the classes in the selector are present​​.
• This can be helpful when building up components that can be combined in different ways on your site.

• 在你的站点上，构建可以以不同方式组合起来的组件的时候，这会有用。
• 在下面的示例中，有一个包含了一条笔记的
• 灰色的边框在盒子带有notebox类的时候应用。
• 如果它还有一个warning或是danger类，我们改变​​border-color​​。
• 为了告诉浏览器我们只想匹配带有所有这些类的元素，我们可以将这些类不加空格地连成一串。
• 语法:​​class1.class2​​​(该选择器可以命中的对象形如​​<element class="class1 class2">​​的元素

• 并且,​​class1​​​和​​class2​​不可以单独使用

.notebox {
  border: 4px solid #666;
  padding: .5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

<div class="notebox">
    This is an informational note.
</div>

<div class="notebox warning">
    This note shows a warning.
</div>

<div class="notebox danger">
    This note shows danger!
</div>

<div class="danger">
    This won't get styled — it also needs to have the notebox class
</div>

如何简单提高选择器的优先级

• ​​优先级 - CSS（层叠样式表） | MDN (mozilla.org)​​

不轻易使用!important

• ​​​!important​​ 例外规则​​

• 当在一个样式声明中使用一个​​!important​​ 规则时，此声明将覆盖任何其他声明。
• 虽然，从技术上讲，​​!important​​​ 与优先级无关，但它与最终的结果直接相关。使用​​!important​​ 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。
• 当两条相互冲突的带有​​!important​​ 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

一些经验法则：

• 一定要优先考虑使用样式规则的优先级来解决问题而不是​​!important​​
• 只有在需要覆盖全站或外部 CSS 的特定页面中使用​​!important​​
• 永远不要在你的插件中使用​​!important​​
• 永远不要在全站范围的 CSS 代码中使用​​!important​​

优先考虑的做法

更好地利用 CSS 级联属性

使用更具体的规则。

• 在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。(如果想要命中的元素处于比较深层,这么做是很自然的)

• 示例代码:

<div id="test">
       <span>Text</span>
     </div>

div#test span { color: green; }
     div span { color: blue; }
     span { color: red; }

• 无论 css 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）

• 如果你的命中目标比较浅层,找到可以的父元素会稍微少一些,譬如可以使用​​html div​​的方式来提高优先级

• 在微信小程序中,元素选择器经常会被默认样式​​user agent stylesheet​​​所覆盖,我们可以使用类似​​page view​​​ 的方法来提高优先级(又譬如​​page button​​)

• 特殊情况下，​​当您无其他要指定的内容时，请复制简单的选择器以增加特异性​​。

• 这是通过串联简单选择器来提升优先级(特异性)

#myId#myId span { color: yellow; }
     .myClass.myClass span { color: orange; }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        http-equiv="X-UA-Compatible"
        content="IE=edge"
    >
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <style>
        div {
            margin: 1rem;
        }

        .s1.s2 {
            border: dashed red;

        }

        .s1.s1 {
            border: solid hotpink;
        }


        .s3.s3 {
            border: dashed yellowgreen;

        }

        .s2 {
            border: dotted yellow;

        }
    </style>
</head>

<body>
    <div class="s1 s2  ">
        @div
        <p>@p</p>
    </div>
    <div class="s3 s2 ">
        @div
        <p>@p</p>
    </div>
    <div class="s1 s1 s3 s3  ">
        @div
        <p>@p</p>
    </div>
    <div class="s1 s3  ">
        @div
        s1 s3
        <p>@p</p>
    </div>
    <div class="s2 s1 s1 ">
        @div
        <p>@p</p>
    </div>
</body>

</html>

效果

注意

串联自身和串联不同的选择器效果不同;

• 例如​​.s1.s1​​​选择器,可以命中仅仅生命了​​class="s1"​​​的元素(而不需要​​class="s1 s1"​​​;
  但是对于​​​.s1.s2​​​仅仅在至少声明了​​class ="s1 s2"的时候能够命令中​​
• 而当​​.s1.s2​​​和​​.s1.s1​​​同时命令中(例如​​class=" s1 s2"​​),那么谁的权重更大?(这是就要看样式表中,谁声明在后(越晚声明的选择器,同权重下的,晚声明的优先级更高)