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

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

什么是 CSS 选择器？

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

常用的 CSS 选择器

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

• 元素选择器: 定位特定类型的所有元素。例如，要设置所有 <div> 元素的样式： <pre class="brush:php;toolbar:false">&lt;code&gt;div { border: 1px solid black; }&lt;/code&gt;</pre> <ul> <li> <strong>类选择器</strong>: 选择具有特定类的元素。如果我们有一个名为 "text-large" 的类：</li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;.text-large { font-size: 20px; }&lt;/code&gt;</pre> <ul> <li> <strong>ID 选择器</strong>: 定位具有特定 ID 的元素。对于 ID 为 "header" 的元素：</li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;#header { background-color: blue; }&lt;/code&gt;</pre> <ul> <li> <strong>属性选择器</strong>: 用于具有特定属性值的元素。例如，要设置所有外部链接（使用 "rel" 属性）的样式：</li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;a[rel=&quot;external&quot;] { color: red; }&lt;/code&gt;</pre> <h2 id="不常用但有用的-CSS-选择器">不常用但有用的 CSS 选择器</h2> <h3 id="子选择器-gt">子选择器 (>)</h3> <p>它定位元素的直接子元素。对于具有类 "container" 的父元素：</p> <pre class="brush:php;toolbar:false">&lt;code&gt;.container &gt; p { margin-left: 10px; }&lt;/code&gt;</pre> <h3 id="后代选择器">后代选择器 ( )</h3> <p>这将选择元素内的所有后代。如果我们有一个 ID 为 "main" 的 div，并且想要设置其内部所有 <code><span></span> 元素的样式：

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

  相邻兄弟选择器 ( )

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

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

  通用兄弟选择器 (~)

  定位另一个元素的兄弟元素，不一定相邻。如果我们有一个类为 "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())

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

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

  目标伪类 (:target)

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

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

  语言伪类 (:lang())

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

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

  has 伪类 (:has())

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

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

  选择伪类 (::selection)

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

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

  结论

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

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