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 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

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

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

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

	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;
	}

	<!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>

	<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" />

	<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>

	<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>

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

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

引言

伪类

:has()

:is()

:host

:host()

:host-textContent()

:in-range & :out-of-range

:root

::first-letter

::placeholder 设置placeholder的样式

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

关于奇舞团

微信扫一扫：分享