002 CSS 选择器

标签：子串   nbsp   strong   绿色   区分   空格   class   使用   相同   

　　1. 选择器简介

• • 【MDN】https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors 

　　2. 选择器

• • 简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素，之所以这么称呼它是因为它们基于元素的类型（或其 class或 id）直接匹配文档的一个或多个元素。
    • 类型选择器（又名元素选择器）

      <p>
      　　What color do you like?
      </p>
      <div>
      　　I like blue.
      </div>

      /* All p elements are red */
      p {
          color: red;
      }
      
      /* All div elements are blue */
      div {
          color: blue;
      }

      • 此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式
    • 类选择器

      <ul>
          <li class="first done">Create an HTML document</li>
          <li class="second done">Create a CSS style sheet</li>
          <li class="third">Link them all together</li>
      </ul>

      /* The element with the class "first" is bolded */
      .first {
          font-weight: bold;
      }
      
      /* All the elements with the class "done" are strike through */
      .done {
          text-decoration: line-through;
      }

      • 类选择器由一个点“.”以及类后面的类名组成。类名是在 HTML class 文档元素属性中没有空格的任何值
      • 文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)
    • ID 选择器

      <p id="polite">
          Good morning
      </p>
      <p id="rude">
          Go away
      </p>

      #polite {
          font-family: cursive;
      }
      
      #rude {
          font-family: monospace;
          text-transform: uppercase;
      }

      • ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称
      • 任何元素都可以使用 id 属性设置唯一的ID名称。 这是选择单个元素的最有效的方式
    • 通用选择器

      <div>
          <p>I think the containing box just needed a <strong>border</strong> or <em>something</em>, but this is getting <strong>out of hand</strong>!</p>
      </div>

      * {
          padding: 5px;
          border: 1px solid black;
          background: rgba(255,0,0,0.25)
      }

      • 通用选择（*）是最终的王牌。它允许选择在一个页面中的所有元素。
      • 由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用
  • 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素，属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号 ([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。
    • • 存在和值（Presence and value）属性选择器

        我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
        <ul>
            <li data-quantity="1kg" data-vegetable>Tomatoes</li>
            <li data-quantity="3" data-vegetable>Onions</li>
            <li data-quantity="3" data-vegetable>Garlic</li>
            <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
            <li data-quantity="2kg" data-meat>Chicken</li>
            <li data-quantity="optional 150g" data-meat>Bacon bits</li>
            <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
            <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
        </ul>

        /* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
        [data-vegetable] {
            color: green
        }
        
        /* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
        [data-vegetable="liquid"] {
            background-color: goldenrod;
        }
        
        /* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */
        [data-vegetable~="spicy"] {
            color: red;
        }

        • [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

        • [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

        • [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
      • 子串值（Substring value）属性选择器
        •  
  • 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点
  • 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容
  • 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落
  • 多重选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素

002 CSS 选择器

标签：子串   nbsp   strong   绿色   区分   空格   class   使用   相同   

原文地址：https://www.cnblogs.com/sgolbnc/p/9797738.html