CSS中你可能不知道的Selectors特性

最新推荐文章于 2024-08-25 21:41:11 发布

奇舞周刊

最新推荐文章于 2024-08-25 21:41:11 发布

阅读量711

点赞数

文章标签： css html 前端 css3 javascript

本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/128450909

版权

CSS中你可能不知道的Selectors特性

本文作者为奇舞团前端开发工程师

引言

最近看了2022年全球CSS调查报告，发现了一些不常见的伪类和伪元素。

伪类

:has()

html

<div>
  <h1>H1</h1>
  <h2>H2</h2>
  <p>h1{margin: 0 0 0.25rem 0}</p>
</div>

css

h1, h2 {
  margin: 0 0 1.0rem 0;
 }

 h1:has(+ h2) { // h1后面相邻兄弟元素是h2时
  margin: 0 0 0.25rem 0;
 }

:is()

html

<div>
  <h1>H1</h1>
  <h2>H2</h2>
  <h3>H3</h3>
  <h4>H4</h4>
  <p>h1、h2和h3 {margin: 0 0 0.25rem 0}</p>
</div>

css

h1, h2, h3 {
  margin: 0 0 1.0rem 0;
 }

 :is(h1, h2, h3):has(+ :is(h2, h3, h4)) { // h1 or h2 or h3 后面相邻兄弟是 h2 or h3 or h4 时
  margin: 0 0 0.25rem 0;
 }

:host

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>:host</title>
  </head>
  <body>
    <my-component></my-component>
    <script>
      let shadow = document.querySelector("my-component").attachShadow({ mode: "open"})
      let styleEle = document.createElement("style")
      styleEle.textContent = `
        :host{
          display: block;
          margin: 20px;
          width: 500px;
          height: 300px;
          border: 3px solid green;
        }
        :host div {
          font-size: 30px;
          border: 2px solid blue;
        }
      `
      let headerEle = document.createElement("div");
      headerEle.innerText = "选取内部使用该部分 CSS 的 Shadow host 元素，其实也就是自定义标签元素。(注意：:host 选择器只在 Shadow DOM 中使用才有效果。)";
      shadow.appendChild(headerEle);
      shadow.appendChild(styleEle);

    </script>
  </body>
</html>

host

:host()

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>:host()伪类函数</title>
  </head>
  <body>
    <my-component class="my-component"></my-component>
    <my-component></my-component>
    <script>
      class MyComponent extends HTMLElement {
        constructor () {
          super();
          this.shadow = this.attachShadow({mode: "open"});
          let styleEle = document.createElement("style");
          styleEle.textContent = `
            :host(.my-component){
              display: block;
              margin: 20px;
              width: 300px;
              height: 200px;
              border: 3px solid green;
            }
            :host .component-header{
              border: 2px solid yellow;
              padding:10px;
              background-color: grey;
              font-size: 16px;
              font-weight: bold;
            }
          `;
          this.shadow.appendChild(styleEle);


          let headerEle = document.createElement("div");
          headerEle.className = "component-header";
          headerEle.innerText = ":host() 的作用是获取给定选择器的 Shadow Host。(注：:host() 的参数是必传的，否则选择器函数失效)";
          this.shadow.appendChild(headerEle);
        }
      }
  
      window.customElements.define("my-component", MyComponent);
  
    </script>
  </body>
</html>

host

:host-textContent()

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>:host-textContent()伪类函数</title>
  </head>
  <body>
    <div id="container">
      <my-component></my-component>
    </div>
    <my-component></my-component>
    <script>
      class MyComponent extends HTMLElement {
        constructor () {
          super();
          this.shadow = this.attachShadow({mode: "open"});
          let styleEle = document.createElement("style");
          styleEle.textContent = `
            :host-context(#container){
              display: block;
              margin: 20px;
              width: 300px;
              height: 200px;
              border: 3px solid green;
            }
            :host .component-header{
              border: 2px solid yellow;
              padding:10px;
              background-color: #4caf50;
              font-size: 16px;
              font-weight: bold;
            }
          `;
          this.shadow.appendChild(styleEle);

          let headerEle = document.createElement("div");
          headerEle.className = "component-header";
          headerEle.innerText = ":host-context() 用来选择特定祖先内部的自定义元素，祖先元素选择器通过参数传入。(注：:host-context() 的参数是必传的，否则选择器函数失效)";
          this.shadow.appendChild(headerEle);
        }
      }
    
      window.customElements.define("my-component", MyComponent);
    
    </script>
  </body>
</html>

效果：

:in-range & :out-of-range

html

<style>
  input {
    width: 180px;
    height: 32px;
    color: white;
    font-weight: bold;
    font-size: 20px;
  }
  input:in-range {
    background: yellowgreen;
  }
  input:out-of-range {
    background-color: brown;
  }
</style>
<p>:in-range 输入的值在指定区间内时，设置指定样式</p>
<p>:out-of-range 输入的值在指定区间外时，设置指定样式</p>
<input type="number" min="5" max="10" value="7" />
<input type="number" min="5" max="10" value="3" />

效果：

:root

html

<style>
  :root {
    --green: #9acd32;
    --font-size: 14px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont;
  }
  body {
    color: var(--green);
    font-size: var(--font-size);
    font-family: var(--font-family-sans-serif);
  }
</style>

<div>
  :root中声明相当于全局属性，页面可以使用var()来引用
</div>

##伪元素

::first-letter

html

<style>
  p::first-letter {
    font-size: 1.5rem;
    font-weight: bold;
    color: brown;
  }
</style>

<p>Scientists exploring the depths of Monterey Bay unexpectedly encountered a rare and unique species of dragonfish. This species is the rarest of its species.</p>

<p>中文字体时.</p>

结果：

::placeholder 设置placeholder的样式

::selection 鼠标选中文本的样式

##总结

:host 范围最大，匹配所有的自定义元素实例；
:host() 只选择自身包含特定选择器的自定义元素；
:host-context() 选择拥有特定选择器父元素的自定义元素。

##参考资料mdn web docs

2022年全球CSS调查报告

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。