CSS基础教程：选择器

hudson2022
178 阅读5分钟

CSS基础教程：选择器

Hudson 译 原文

CSS选择器是一些模式，用于选择和设置网页上的HTML元素样式。可以针对特定元素或元素组应用样式，如颜色、字体、边距等。CSS选择器是层叠样式表（CSS）的基本组成部分，用于控制网页文档的呈现和布局。

被选择器选中的元素或元素组称为选择器的对象。

选择器列表

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

例如，如果将相同的CSS规则 color: crimson 应用于p元素和.sample类，则可以将它们合并为一个选择器列表，如下所示：

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">class selector</h1>
      <p class="style-p">class .style-p applied</p>
      <p>No class applied on this p element</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 selector</h1>
      <p id="style-p">id #style-p applied</p>
      <p>No id applied on this p element</p>
   </div>
</body>
</html>

CSS选择器 - 属性选择器

属性选择器用于基于元素上的特定属性或属性值选中元素。

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

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

以下示例演示了如何使用属性选择器：

<html>
<head>
<style>
   a[target] {
      background-color: peachpuff;
      color: blueviolet;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>Attribute selector</h2>
   <p>Styling applied to anchor element with target attribute:</p>
   <a href="#">Tutorialspoint</a>
   <a href="#" target="_blank">google</a>
   <a href="#" target="_self">wikipedia</a>
</body>
</html>

CSS选择器 - 伪类选择器

伪类选择器用于对元素的特定状态设置样式，例如 :hover 用于设置鼠标悬停时应该具有的样式。

以下示例演示了如何使用伪类选择器：

<html>
<head>
<style>
   a:hover {
      background-color: peachpuff;
      color: green;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>Pseudo-class selector</h2>
   <p>Styling applied to anchor element with a pseudo-class:</p>
   <a href="#">Tutorialspoint</a>
</body>
</html>

CSS选择器 - 伪元素选择器

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

有关伪元素选择器的详细列表，请参阅此连接。

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

以下示例演示了如何使用伪元素选择器：

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

   a::after {
      content: "   Pseudo-element ::after applied";
      color: red;
      background-color: chartreuse;
   }
</style>
</head>
<body>
   <h2>Pseudo-element selector</h2>
   <p>Styling applied to anchor element with a pseudo-element:</p>
   <a href="#">Tutorialspoint</a>
</body>
</html>

组合器

组合器显示了选择器之间的关系。两个或多个简单选择器可以使用组合器组合在一起，形成一个选择器。详细信息可以参阅有关组合器的更多信息。

以下示例演示了如何使用后代选择器（空格）和子代选择器进行组合：

<html>
<head>
<style>
   /* style applied to only div */
   div {
      border: 2px solid black;
      width: 300px;
   }
   /* style applied to all li elements directly under ul */
   ul li {
      background-color: lightpink;
      color: purple;
      font-size: 1.5em;
      padding: 5px;
      margin-right: 15px;
   }

   /* style applied to all li elements that are child element to ol element */
   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文档中的任何元素。

/* Selects and styles all elements on the page */
* {
   margin: 0;
   padding: 0;
}

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

以下示例演示了通用选择器（*）的使用：

<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>& nesting selector</h1>
   <p id=”sample“>
      Hover <a href=”#“>over the link</a>.
   </p>
  
</body>
</html>
avatar
文章
阅读
粉丝