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 whenall 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"),那么谁的权重更大?(这是就要看样式表中,谁声明在后(越晚声明的选择器,同权重下的,晚声明的优先级更高)