深入 CSS （1）- 选择器 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第3天「前言」本文主要对

这是我参与「第四届青训营」笔记创作活动的的第3天

「前言」

本文主要对 CSS / CSS3 的选择器总结，以及示例

「简单选择器」

1. 通配符选择器

* {
    margin: 0;
    padding: 0;
}

2. 标签选择器

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

3. ID 选择器

#box {
    background-color: red;
}

4. 类选择器

.box {
    background-color: red;
}

5. 属性选择器

1）[attr] 选择含有 attr 属性

  <style>
    [class] {
      color: red;
    }
  </style>
</head>

<body>
  <ul>
    <li class="color title">1</li>
    <li class="color">2</li>
    <li class="title">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</body>

效果：

2）[attr="value"] 选择含有 attr 全等 value 的元素

   <style>
   [class="color"] {
     color: red;
   }
 </style>
</head>

<body>
 <ul>
   <li class="color title">1</li>
   <li class="color">2</li>
   <li class="title">3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
 </ul>
</body>

效果：

3）[attr~="value"] 选择选择 attr 中含有value 的元素

 <style>
   [class~="color"] {
     color: red;
   }
 </style>
</head>

<body>
 <ul>
   <li class="color title">1</li>
   <li class="color">2</li>
   <li class="_color_">3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
 </ul>
</body>

效果：

4）[attr|="value"] 选择选择 attr 中以 value 或者 value- 开头的元素

注意：只能是以 value 或者 value- 开头的元素，而 value 和 value （此处有一个空格）不行

<style>
   [class|="color"] {
     color: red;
   }
 </style>
</head>

<body>
 <ul>
   <li class="color-title">0</li>
   <li class="color title">1</li>
   <li class="color">2</li>
   <li class="title">3</li>
   <li class="title color">4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
 </ul>
</body>

效果：

5）[attr^="value"] [attr$="value"] [attr*="value"]

这三个选择器都是符合正则匹配规则的

[attr^="value"]：选择以 value 开头的元素
[attr$="value"]：选择以 value 结尾的元素
[attr*="value"]：选择以含有 value 的元素

「组合选择器」

1）elementA elementB

后代选择器：选择 elementA 后代中的所有 elementB

2）elementA>elementB

子代选择器：选择 elementA 子代中的所有 elementB

3）elementA,elementB

并集选择器：选择所有的 elementA 和 elementB

elementA.class

交集选择器：选择所有满足 elementA 和 .class

5）elementA+elementB

兄弟选择器：选择紧跟 elementA 首个出现 elementB

<style>
    .focus+li {
      color: red;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li class="focus">
      3
    </li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</body>

效果：

6）elementA~elementB

兄弟选择器：选择 elementA 之后的所有 elementB

<style>
    .focus~li {
      color: red;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li class="focus">
      3
    </li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</body>

效果：

「伪元素选择器」

::after ::before ::first-line ::first-letter ::selection

<style>
    div::after {
      content: '2';
      display: block;
      color: red;
    }
  </style>
</head>

<body>
  <div>1</div>
  <script>
    const div = document.getElementsByTagName('div')[0];
    window.getComputedStyle(div, 'after').color; // rgb(255, 0, 0)
  </script>
</body>

操作伪元素的方法：

window.getComputedStyle(elem, ['after|before|first-line|first-letter|selection']);

getComputedStyle() 可以获取微元素的计算样式（只读）
一般操作方法：给某个元素添加不同的类名，在类名上绑定伪元素

<style>
    .red::after {
      content: '伪元素';
      display: block;
      color: red;
    }

    .blue::after {
      color: blue;
    }
  </style>
</head>

<body>
  <div class="red">test</div>
  <script>
    const div = document.getElementsByTagName('div')[0];
    div.classList.add('blue')
  </script>
</body>

::placeholder

input 特有的选择器：选择已规定 "placeholder" 属性的 input 元素。

<style>
    input::placeholder {
      color: pink;
    }
  </style>
</head>

<body>
  <input type="text" placeholder="test">
</body>

效果：

「伪类选择器」

状态伪类选择器

link visited hover active focus

:link 选取未访问过的超链接
:visited 选取访问过的连接
:hover 选取鼠标悬浮的元素
:active 选取点中的元素
:focus 选取获取焦点的元素

具有筛选功能的选择器

element:first-child element:last-child

element:first-child：选择属于父元素的第一个子元素的每个 element 元素。
element:last-child：选择属于父元素的最后一个子元素的每个 element 元素。

<style>
    li:first-child {
      color: red;
    }
  </style>
</head>

<body>
  <li>0</li> 
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</body>

效果：

element:nth-child(n) element:nth-last-child(n)

element:nth-child(n)：选择属于其父元素的第 n 个子元素的每个 element 元素。
element:nth-child(n)：同上，从最后一个子元素开始计数。
其中 (n) 也可以写成类似 2n+1 的表达式，n从 0 开始计数
odd （奇数）可以代替 2n+1；even （偶数）可以代替 2n

<style>
    li:nth-child(3) {
      color: red;
    }
  </style>
</head>

<body>
  <li>0</li>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  <li>9</li>
</body>

效果：

element:nth-of-type(n) element:nth-last-of-type(n)

与上面的功能类似，带有一点区别，直接看代码

<style>
    div li:nth-child(2) {
      color: red;
    }

    ul li:nth-of-type(2) {
      color: orange;
    }
  </style>
</head>

<body>
  <div>
    <li>1</li>
    <div>2</div>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </div>
  <ul>
    <li>1</li>
    <div>2</div>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

效果：

原因：nth-child从父元素寻找到第二个子元素但是也要满足是 li元素，而nth-of-type是从父元素寻找到第二个 li 元素

「参考资料」

CSS 选择器参考手册 (w3school.com.cn)