CSS 选择器 - 易学教程，面试笔记经验！

CSS 选择器是用于选择网页上的 HTML 元素并为其设置样式的模式。它们允许您针对特定元素或元素组来应用颜色、字体、边距等样式。 CSS 选择器是级联样式表 (CSS) 的基本组成部分，CSS 是一种用于控制 Web 文档的呈现和布局的语言。

选择器列表

如果多个选择器使用相同的CSS，那么这些选择器可以组合在一起形成一个选择器列表。因此，CSS 规则应用于所有单独的选择器。

例如，如果将相同的 CSS color: crimson 应用于 p 元素和 .sample 类，则写为:

p {
   color: crimson;
}

.sample {
   color: crimson;
}

但是，我们可以将这两个规则组合成一个选择器列表，通过添加逗号将它们分开，如下所示:

p, .sample {
   color: crimson;
}

以下语法将被视为无效，因为其中一个选择器无效（ ..sample - 是定义类的错误方法)。

p {
   color: crimson;
}

..sample {
   color: crimson;
}

p, ..sample {
   color: crimson;
}

选择器列表声明中逗号之前或之后的空格是可接受的。
如果选择器列表中的任何选择器无效，则整个规则将被忽略并被视为无效。
建议在新行中定义每个选择器，因为这样更易读。

CSS 选择器: 类型选择器

类型选择器的目标是HTML 元素，例如 <h1>、<p> 等。

p {
   color: green;
}

h1 {
   text-decoration-line: underline;
}

以下示例演示类型选择器的使用:

<html>
<head>
<style>
   div {
      border: 5px inset gold;
      width: 300px;
      text-align: center;
   }

   p {
      color: green;
   } 

   h1 {
      text-decoration-line: underline;
   }
</style>
</head>
<body>
   <div>
     <h1>类型选择器</h1>
     <p>带边框且文本居中对齐的 div</p>
     <p>绿色段落</p>
     <p>h1 带下划线</p>
   </div>
</body>
</html>

CSS 选择器: 类选择器

类选择器针对其类属性具有特定值的元素。

.style-h1 {
   text-decoration-line: underline;
}

.style-p {
   color: green;
   font-size: 25px;
}

以下示例演示了类选择器的使用，其中 .style-p、.style-h1 和 .style-div 是类选择器:

<html>
<head>
<style>
   .style-div {
      border: 5px inset gold;
      width: 300px;
      text-align: center;
   }

   .style-p {
      color: green;
      font-size: 25px;
   } 

   .style-h1 {
      text-decoration-line: underline;
   }
</style>
</head>
<body>
   <div class="style-div">
      <h1 class="style-h1">类选择器</h1>
      <p class="style-p">应用 类.style-p </p>
      <p>没有在此 p 元素上应用类</p>
   </div>
</body>
</html>

CSS 选择器: ID 选择器

ID 选择器针对具有特定 id 属性值的元素。

#style-p {
   color: green;
   font-size: 25px;
} 

#style-h1 {
   text-decoration-line: underline;
   color: red;
}

以下示例演示了如何使用id 选择器，其中 #style-p、#style-h1 和 #style-div 是应用于元素的 id 选择器:

<html>
<head>
<style>
   #style-div {
      border: 5px inset purple;
      width: 300px;
      text-align: center;
      background-color: lightgoldenrodyellow;
   }

   #style-p {
      color: green;
      font-size: 25px;
   } 

   #style-h1 {
      text-decoration-line: underline;
      color: red;
   }
</style>
</head>
<body>
   <div id="style-div">
      <h1 id="style-h1">ID 选择器</h1>
      <p id="style-p">应用 #style-p </p>
      <p>没有ID 选择器应用此元素</p>
   </div>
</body>
</html>

CSS 选择器: 属性选择器

属性选择器根据元素上的特定属性或属性值来定位元素。

a[target] {
   background-color: peachpuff;
}

您还可以使用具有特定值的属性来指定元素。

a[href="https://www.yxjc123.com"] {
   background-color: peachpuff;
}

以下示例演示了属性选择器的使用:

<html>
<head>
<style>
   a[target] {
      background-color: peachpuff;
      color: blueviolet;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>属性选择器</h2>
  <p>应用于具有目标属性的锚元素的样式：</p>
   <a href="#">Yxjc123.com</a>
   <a href="#" target="_blank">baidu</a>
   <a href="#" target="_self">zhihu</a>
</body>
</html>

CSS 选择器: 伪类选择器

伪类选择器用于设置元素特定状态的样式，例如使用:hover悬停时设置元素样式。

a :hover {
   background-color: peachpuff; 
   color: green;
   font-size: 2em;
}

以下示例演示了伪类选择器的使用:

<html>
<head>
<style>
   a:hover {
      background-color: peachpuff;
      color: green;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>伪类选择器</h2>
  <p>使用伪类将样式应用于锚元素：</p>

   <a href="#">Yxjc123.com</a>
</body>
</html>

CSS 选择器: 伪元素选择器

伪元素选择器用于设置样式元素的特定部分而不是元素本身。

a::before {
   content: url();
}

以下示例演示了伪元素选择器 (::before) 的使用:

<html>
<head>
<style>
   a::before {
      content: url('/css/images/smiley.png');
   }

   a::after {
      content: "   Pseudo-element ::after applied";
      color: red;
      background-color: chartreuse;
   }
</style>
</head>
<body>
      <h2>伪元素选择器</h2>
    <p>使用伪元素将样式应用于锚元素：</p>
   <a href="#">Yxjc123.com</a>
</body>
</html>

CSS 选择器: 组合器

组合器显示了之间的关系选择器。可以使用组合器组合两个或多个简单选择器，以形成选择器。您可以在此处阅读有关组合器的更多信息。

以下示例演示了后代选择器（空格）和子组合器的使用:

<html>
<head>
<style>
   /* 样式仅应用于 div */
   div {
      border: 2px solid black;
      width: 300px;
   }
   /* 样式应用于直接位于 ul 下的所有 li 元素 */
   ul li {
      background-color: lightpink;
      color: purple;
      font-size: 1.5em;
      padding: 5px;
      margin-right: 15px;
   }

   /* 样式应用于作为 ol 元素子元素的所有 li 元素 */
   ol > li {
      background-color: bisque;
      color: black;
      font-size: 0.75em;
      padding: 5px;
   }
</style>
</head>
<body>
   <div>
   <ul>
      <li>Item One</li>
      <li>Item Two
         <ol>
            <li>Nested 1</li>
            <li>Nested 2</li>
         </ol></li>
      <li>Item Three</li>
      <li>Item Four</li>
      <li>Item Five
         <ol>
            <li>Nested 3</li>
            <li>Nested 4</li>
         </ol>
      </li>
   </ul>
   </div>
</body>
</html>

CSS 选择器: 通用选择器

通用选择器，用星号 (*) 表示，是一种特殊的选择器，可以匹配 HTML 文档中的任何和所有元素。

/* 选择页面上的所有元素并设置样式 */
* {
   margin: 0;
   padding: 0;
}

根据上述语法，通用选择器用于将 0 的边距和填充应用于所有 HTML 元素。

以下示例演示了通用选择器 (*) 的使用:

<html>
<head>
<style>
   * {
      background-color: peachpuff;
      color: darkgreen;
      font-size: 25px;
   }
</style>
</head>
<body>
   <h1>通用选择器 (*)</h1>

   <div>父元素
   <p>子段落 1</p>
    <p>子段落 2</p>
   </div>

   <p>第 3 段</p>

</body>
</html>

CSS 选择器: 嵌套选择器

CSS 嵌套允许将一个样式规则嵌套在另一个规则中，子规则的选择器相对于父规则的选择器。

嵌套选择器显示了父子规则之间的关系。

当浏览器解析嵌套选择器时，它会自动添加一个选择器之间的空格，从而创建新的 CSS 选择器规则。
在需要将嵌套规则附加到父规则（没有任何空格）的情况下，例如使用伪类或复合选择器，必须立即添加 & 嵌套选择器才能获得所需的结果。
为了反转规则的上下文，& 嵌套选择器可以
& 嵌套选择器可以有多个实例。

以下示例演示了 & 的使用嵌套选择器 (&):

<html>
<head>
<style>
   #sample {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 1.5rem;
      & a {
         color: crimson;
         &:hover,
         &:focus {
            color: green;
            background-color: yellow;
         }
      }
   }
</style>
</head>
<body>
   <h1>CSS 嵌套选择器</h1>
   <p id="sample">
      将鼠标放在<a href="#">这里</a>看下效果。
   </p>
</body>
</html>