CSS 选择器有一个使用策略

terry 2年前 (2023-09-28) 阅读数 260 #数据结构与算法

CSS 选择器允许我们按 HTML 文档中的类型、属性或位置来选择元素。本教程介绍了三个新选项 :is()、:where() 和 :has()。

选择器通常用在样式页面中。以下示例选择

 段落的所有元素，并将字体粗细更改为粗体： 
p {
  font-weight: bold;
}
 您还可以在较新版本的 JavaScript 中使用选择器来定位 DOM 节点： 
selector(query ）。  返回第一个匹配的 HTML 元素 
document.querySelectorAll() 返回所有匹配的 HTML 元素 NodeList
参见。它们基于 HTML 元素的当前状态。最常用的是:hover，当指针在元素上移动时应用样式，因此它用于突出显示可点击的链接和按钮。我们还有以下伪类选择器： 
:visited：查找访问过的链接 
:target：搜索文档 URL 指向的元素 :dfir  ：选择第一个子元素- 目标元素的元素
：第n个子元素：选择特定子元素
：空：合并没有内容的元素或子元素：选中？禁用：匹配禁用的输入字段时 
：强制：定位强制输入字段时 
：有效：匹配有效的输入字段时 
：♸： 时匹配无效的输入字段 
:playing：用于播放音频或视频元素 
 浏览器最近添加了三个伪类选择器。 
 
 的伪类选择器 通常您需要将相同的样式应用于多个元素。例如，

 段落文本默认为黑色，但当它出现在   、   或    当为中等时，它是灰色的： /* default black */
p {
  color: #000;
}

/* gray in <article>, <section>, or <aside> */
article p,
section p,
aside p {
  color: #444;
}
 这是一个简单的示例，但更复杂的页面有更复杂和更长的选择字符串。任何选择器中的语法错误都可能破坏所有元素的样式。 
我们还可以使用Sass等CSS预处理器，实现嵌套使用：
article, section, aside {
  p {
    color: #444;
  }
}
最终也会创建相同的CSS代码，这样可以减少开发工作并防止错误。但是：
需要CSS编译器。就像 Sass 这样的预处理器，但这可能会给一些开发团队带来问题。 
 嵌套可能会导致其他问题。构建深度嵌套的选择器很容易，但这些选择器越来越难以阅读和生成冗长的 CSS。 
:is() 提供了所有现代浏览器（IE 除外）完全支持的原生 CSS 解决方案： 
:is(article, section, aside) p {
  color: #444;
}
单个选择器可以包含任意数量的 ♸: is()❀ 。例如，以下复杂选择器将绿色文本颜色应用于所有元素 
、 和 
.secondary  .partition> 或 .primary.primary❙❀ 子元素。 ： 不含 :is() 的等效代码  需要六个 CSS 选择器：article section.primary:not(:first-child) h1,
article section.primary:not(:first-child) h2,
article section.primary:not(:first-child) p,
article section.secondary:not(:first-child) h1,
article section.secondary:not(:first-child) h2,
article section.secondary:not(:first-child) p {
  color: green;
}
:is() 与 
❀: 不匹配: : 之后伪元素，因此以下示例代码不起作用： div:is(::before, ::after) {
  display: block;
  content: '';
  width: 1em;
  height: 1em;
  color: blue;
}
: where 伪类选择器 
: where()选择器语法与 ❀:  相同，并且受支持所有现代浏览器（IE 除外）。这通常会产生相同的风格。例如：
:where(article, section, aside) p {
  color: #444;
}
差异在于特异性。特异性是一种算法，用于确定哪个 CSS 选择器应覆盖所有其他 CSS 选择器。在下面的示例中，文章 p 比 p 更精确，因此段落  的所有元素都是灰色的：在 
article p { color: #444; }
p { color: #000; }
 的情况下： is() 是其最精确参数 的选择器。在 :where() 的情况下，特异性为零。 查看以下 CSS： 
article p {
  color: black;
}

:is(article, section, aside) p {
  color: red;
}

:where(article, section, aside) p {
  color: blue;
}
 基于此 CSS 应用于以下 HTML 代码： 
<article>
  <p>paragraph text</p>
</article>
最后一段文本显示为红色，如下面的 CodePen 演示所示。 
:is() 选择器与  文章 p 具有相同的属性，但它出现在样式页面中较晚，因此文本变为红色。如果要使用蓝色，则需要删除 article p 和 :is() 选择器，因为  或  选择器并不那么特殊。 
 多个代码库使用 √ 代替 :where()。但是，当特定样式不可用时，:where() 定义中的 null 可用于重置使用基本样式的 CSS。通常，重置适用于默认字体、颜色、填充和边距。 
此 CSS 重置代码  在 
 标题上使用 1em 上边距，除非它们是第一个  的任意  链接添加蓝色。两个像素边框：
a:has(img, section) {
  border: 2px solid blue;
}
 这是几十年来最令人兴奋的 CSS 开发！开发人员终于可以定位父元素了！ 
 硬性“父选择器”长期以来一直是最流行的 CSS 功能之一，但它给浏览器制造商带来了性能问题。简而言之：
当元素在页面上绘制时，浏览器会将 CSS 样式应用于元素。因此，当添加子元素时，必须重新绘制整个父元素。 
 在 JavaScript 中添加、删除或修改元素可能会影响整个页面的样式，直到包含  的页面。 
 假设供应商已经解决了性能问题，:has() 实现了以前在没有 JavaScript 的情况下无法实现的可能性。例如，当所需的内部字段无效时，您可以设置外部表单  和以下提交按钮的样式： 
/* red border when any required inner field is invalid */
fieldset:has(:required:invalid) {
  border: 3px solid red;
}

/* change submit button style when invalid */
fieldset:has(:required:invalid) + button[type='submit'] {
  opacity: 0.2;
  cursor: not-allowed;
}
 此示例添加一个包含子菜单项列表的导航链接子菜单指示器： 
nav li:has(ol, ul) a::after {
  display: inlne-block;
  content: ">";
}
 或者您可以添加调试样式，例如突出显示所有    元素，而不包含内部 img： 
figure:not(:has(img)) {
  border: 3px solid red;
}
 在进入编辑器之前和重新注册 CSS 代码库之前 注意:has() 是新的，并且支持的功能超过 :is() 和 :where()。它可在 Safari 15.4+ 和 Chrome 101+ 中使用，但要到 2023 年才会广泛使用。
最后，
:is()和:where()伪类选择器简化了CSS语法。您不需要嵌套和 CSS 预处理器（尽管这些工具提供了其他好处，例如节、循环和缩小）。 
:has()更具革命性和令人兴奋。父母的选择很快变得流行起来，我们忘记了过去的黑暗时代！