你可能不知道的有用 CSS 选择器

<p>

<p>CSS 选择器在网页开发中起着至关重要的作用，用于网页样式设计。虽然许多人熟悉常用的选择器，但还有一些不那么常见但非常有用的选择器。

什么是 CSS 选择器？

<p>CSS 选择器是用于选择网页上元素以进行样式设计的模式。它们可以根据属性、类、ID 等来定位元素。

常用的 CSS 选择器

<p>以下是一些常用的选择器：

• 元素选择器: 定位特定类型的所有元素。例如，要设置所有 <div> 元素的样式：

<code>div {
  border: 1px solid black;
}</code>

• 类选择器: 选择具有特定类的元素。如果我们有一个名为 "text-large" 的类：

<code>.text-large {
  font-size: 20px;
}</code>

• ID 选择器: 定位具有特定 ID 的元素。对于 ID 为 "header" 的元素：

<code>#header {
  background-color: blue;
}</code>

• 属性选择器: 用于具有特定属性值的元素。例如，要设置所有外部链接（使用 "rel" 属性）的样式：

<code>a[rel="external"] {
  color: red;
}</code>

不常用但有用的 CSS 选择器

子选择器 (>)

<p>它定位元素的直接子元素。对于具有类 "container" 的父元素：

<code>.container > p {
  margin-left: 10px;
}</code>

后代选择器 ( )

<p>这将选择元素内的所有后代。如果我们有一个 ID 为 "main" 的 div，并且想要设置其内部所有 <span> 元素的样式：

<code>#main span {
  color: green;
}</code>

相邻兄弟选择器 ( )

<p>选择紧跟在另一个特定元素之后的元素。例如，在 <h3> 元素之后，如果有一个 <p> 元素：

<code>h3 + p {
  font-weight: bold;
}</code>

通用兄弟选择器 (~)

<p>定位另一个元素的兄弟元素，不一定相邻。如果我们有一个类为 "item" 的 div，并且想要设置所有后续具有类 "detail" 的兄弟元素的样式：

<code>.item ~ .detail {
  padding-top: 5px;
}</code>

属性选择器与部分匹配 (^=, $=, *=)

• 以…开头 (^=): 要设置所有以 "https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a" 开头的图片源的样式：

<code>img[src^="https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"] {
  border-radius: 5px;
}</code>

• 以…结尾 ($=): 对于所有方法以 "post" 结尾的表单：

<code>form[method$="post"] {
  background-color: #f0f0f0;
}</code>

• *包含 (=)**: 要设置所有 href 属性中包含 "product" 的链接的样式：

<code>a[href*="product"] {
  text-decoration: underline;
}</code>

否定伪类 (:not())

<p>它选择不匹配某个选择器的元素。例如，除具有类 "hidden" 的元素之外的所有元素：

<code>:not(.hidden) {
  display: block;
}</code>

目标伪类 (:target)

<p>当 URL 片段与元素的 ID 匹配时。对于 URL 中 ID 为 "contact" 的部分：

<code>div {
  border: 1px solid black;
}</code>

语言伪类 (:lang())

<p>根据语言属性定位元素。对于具有 lang="en-US" 的元素：

<code>.text-large {
  font-size: 20px;
}</code>

has 伪类 (:has())

<p>:has() 伪类用于选择包含特定子元素或后代元素的元素。例如，要设置包含图像的 div 的样式：

<code>#header {
  background-color: blue;
}</code>

选择伪类 (::selection)

<p>此伪类允许您设置用户所选文本部分的样式。例如，当用户选择段落中的某些文本时：

<code>a[rel="external"] {
  color: red;
}</code>

结论

<p>这些不常用的 CSS 选择器提供了额外的方法来精确地定位和设置元素的样式。它们可以增强 CSS 代码的灵活性和功能性，使其在创建视觉上吸引人且结构良好的网页方面更强大、更高效。

<p>更多信息请访问 https://www.php.cn/link/8dacd3d8b9d2cd20eb244b5f745ea88e

以上是你可能不知道的有用 CSS 选择器的详细内容。更多信息请关注PHP中文网其他相关文章！