CSS 选择器扩展

背影＃

已于 2023-04-03 09:56:53 修改

阅读量115

点赞数

分类专栏：入门前端文章标签： css 前端 html

于 2023-03-31 18:20:03 首次发布

本文链接：https://blog.csdn.net/AI_dkx/article/details/129885968

版权

入门同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

文章目录

关系选择器：relationship selectors

E+F E~F

<div>
    <span></span>
    <p></p>
    <a></a>
</div>
<p></p>
<p></p>

<!--E+F:下一个相邻的满足条件的兄弟元素节点，div span + a 无法选中，因为a并不是相邻的兄弟节点，如果想选中a，则要用 div span ~ a-->
<style>
div+p{
	background-color: red;
}
/* E~F:E后面满足条件的兄弟元素节点，不止一个,并不要求元素连续 */
div~p{
    background-color: green;
}
</style>

属性选择器：attribute selectors

E[attr ~= “val”] 还可以是后面几个比较符号 [|=、^=、$=、*=]
- ~= 包含独立的val（结合class选择器进行理解）
- |= 以“val”开头或者以“val-”开头
- ^= 以“val”开头
- $= 以“val”结尾
- *= 包含“val”（试试空格行不行 /doge）
伪元素选择器：pseudo-element selectors（）

E::placeholder E::selection
- placeholder ：只能改字体颜色
- selection：只能改 color、background-color、text-shadow
伪类选择器：pseudo-classes selectors（被选中的元素的一种状态）

E:not(s) E:root E:target

E:first-child E:last-child E:only-child E:nth-child(n)

E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type

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

E:empty E:checked E:enabled E:disabled

E:read-only E:read-write
- :root ：在html中等同于 html 标签选择器，本意是选择根标签
- :target
```
<a href="#box1"></a>
<a href="#box1"></a>
<div id="box1"></div>
<div id="box2"></div>
<style>
    /*location.hash === target id值等于hash的元素被选中*/
    div:target{
        border: 1px solid #f00;
    }
</style>
```
- :nth-child(n) ：CSS从1开始查，但n是自然数，从0开始
- :nth-last-child(n)：从后面向前查
  
  带 child 的这几个伪类选择器，会考虑其他元素，of-type的不会考虑其他元素，只考虑被选择的类型的元素。
- :nth-of-type(n)：传入n是数值的话，比如传入2，代表从第2个开始查
- :empty ：里面不包含节点，或只包含注释标签，注意：空格或文字算节点
- :checked ：例如：Input:checked；
```
<input type="checkbox"/>
```

案例代码

案例代码在线体验地址

<!DOCTYPE html>
<html lang="zh">
  <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>选择器练习</title>
    <!-- <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./reset.css" /> -->
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        /* padding: 15px; */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
      }

      a {
        text-decoration: none;
        color: #333;
        border-bottom: 1px solid #000;
      }

      a:hover {
        color: #888;
      }

      ul,
      li {
        list-style: none;
      }

      :root,
      body {
        height: 100%;
      }

      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }

      .menu-list-wrap {
        position: absolute;
        right: 0;
      }

      .menu-list-wrap li {
        float: left;
        margin: 3px 6px;
        height: 40px;
        line-height: 40px;
      }

      .demo-wrapper {
        height: 100%;
      }

      .demo-wrapper div[id] {
        width: 100%;
        height: 100%;
        padding: 40px 0 0 0;
        background-color: #eee;
        padding: 15px;
      }

      .demo-wrapper div[id]:not(:target) {
        display: none;
      }

      a:active {
        border-color: red;
      }

      .demo-wrapper h4 {
        padding: 40px 0 15px 35px;
      }

      /* 关系选择器 */
      .demo p + span {
        background-color: red;
      }

      .demo p ~ div {
        background-color: green;
      }

      /* 属性选择器 */
      .demo div[data] {
        height: 40px;
        line-height: 40px;
        padding: 0 8px;
      }

      .demo div[data~="b"] {
        background-color: blue;
        color: #eee;
      }

      .demo div[data|="a"] {
        background-color: pink;
      }

      .demo div[data^="c"] {
        background-color: orange;
      }

      .demo div[data$="d"] {
        background-color: red;
        color: #fff;
      }

      .demo div[data*=" "] {
        background-color: green;
        color: #fff;
      }

      /* 伪元素选择器 */
      .demo input::placeholder {
        color: green;
      }
      div.selection {
        font-size: 28px;
      }
      div.selection::selection {
        color: #fff;
        background-color: pink;
        text-shadow: 2px 2px 2px #000;
      }

      /* 伪类选择器 */
      #pseudo-classes .demo div:first-of-type {
        background-color: green;
      }

      #pseudo-classes .demo div:last-of-type {
        background-color: orange;
      }

      #pseudo-classes .demo div:last-child {
        background-color: red;
      }

      #pseudo-classes .demo div:first-child {
        background-color: blue;
      }

      #pseudo-classes .demo span:nth-of-type(2n-1) {
        background-color: blue;
        color: #fff;
      }

      #pseudo-classes .demo input:read-only {
        color: red;
      }
      #pseudo-classes .demo input:read-write {
        color: green;
      }
    </style>
  </head>
  <body>
    <ul class="menu-list-wrap clearfix">
      <li><a href="#relation-ship">关系选择器</a></li>
      <li><a href="#attribute">属性选择器</a></li>
      <li><a href="#pseudo-element">伪元素选择器</a></li>
      <li><a href="#pseudo-classes">伪类选择器</a></li>
    </ul>
    <div class="demo-wrapper">
      <div id="relation-ship">
        <h4>关系选择器</h4>
        <pre>
          .demo p + span {
              background-color: red; 
          } 
          .demo p ~ div {
              background-color: green; 
          }
        </pre>
        <div class="demo">
          <p>p</p>
          <span>span1</span>
          <span>span2</span>
          <div>div1</div>
          <div>div2</div>
          <a href="#">a</a>
          <div>div3</div>
        </div>
      </div>
      <div id="attribute">
        <h4>属性选择器</h4>
        <pre>
          .demo div[data~="b"] {
            background-color: blue; 
            color: #eee;
          }
          
          .demo div[data|="a"] {
            background-color: pink;
          }
          
          .demo div[data^="c"] {
            background-color: orange;
          }
          
          .demo div[data$="d"] {
            background-color: red;
            color: #fff;
          }
          
          .demo div[data*=" "] {
            background-color: green;
            color: #fff;
          }
        </pre>
        <div class="demo">
          <div data="b-a">b-a</div>
          <div data="ba">ba</div>
          <div data="a">a</div>
          <div data="b">b</div>
          <div data="a-c">a-c</div>
          <div data=" ">空格</div>
          <div data="abc">abc</div>
          <div data="c-ba">c-ba</div>
          <div data="c">c</div>
          <div data="c-ba-d">c-ba d</div>
          <div data="dc-da">dc-da</div>
          <div data="a-c-c">a-c c</div>
        </div>
      </div>
      <div id="pseudo-element">
        <h4>伪元素选择器</h4>
        <pre>
          .demo input::placeholder {
            color: green;
          }
          div.selection {
            font-size: 28px;
          }
          div.selection::selection {
            color: #fff;
            background-color: pink;
            text-shadow: 2px 2px 2px #000;
          }
        </pre>
        <div class="demo">
          <div>
            <input type="text" placeholder="placeholder" />
          </div>
          <div class="selection">
            selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection
          </div>
        </div>
      </div>
      <div id="pseudo-classes">
        <h4>伪类选择器</h4>
        <pre>
          #pseudo-classes
          .demo 
          div:first-of-type {
            background-color: green;
          }

          #pseudo-classes
          .demo 
          div:last-of-type {
            background-color: orange;
          }

          #pseudo-classes
          .demo 
          div:last-child {
            background-color: red;
          }

          #pseudo-classes
          .demo 
          div:first-child {
            background-color: blue;
          }

          #pseudo-classes
          .demo 
          span:nth-of-type(2n-1) {
            background-color: blue;
            color: #fff;
          }

          #pseudo-classes
          .demo 
          input:read-only {
            color: red;
          }
          #pseudo-classes
          .demo 
          input:read-write {
            color: green;
          }
        </pre>
        <div class="demo">
          <span>span1</span>
          <div>div1</div>
          <div>div2</div>
          <div>div3</div>
          <span>span2</span>
          <span>span3</span>
          <span>span4</span>
          <span>span5</span>
          <p>
            <input type="text" readonly value="readonly" />
          </p>
          <p>
            <input type="text" value="read-write" />
          </p>
        </div>
      </div>
    </div>
  </body>
</html>