首页 前端CSS正文

CSS - 选择器

原创
admin 4个月前 (08-07) 阅读数 29 #CSS

CSS - 选择器

CSS选择器用于选择网页上您想要设置样式的HTML元素。它们允许您定位特定的元素或元素组，以应用颜色、字体、边距等样式。

被选择器选中的元素或元素组被称为选择器的目标。

CSS通用选择器

CSS通用选择器是一种特殊的选择器，它选择HTML文档中的所有元素。用星号(*)表示。

语法

通用选择器的语法如下：

* {
   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元素选择器选择并设置特定的HTML元素样式。元素选择器通过在样式表中直接使用元素名称来定义。

语法

元素选择器的语法如下：

p {
   color: green;
}

h1 {
   text-decoration-line: underline;
}

示例

以下示例演示了使用类型选择器为标题、段落和div元素设置样式：

<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类选择器

CSS类选择器选择具有特定class属性的元素。类选择器使用点号(.)后跟类名来定义。

语法

类选择器的语法如下：

.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选择器

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 id</p>
      <p>此p元素未应用id</p>
   </div>
</body>
</html>

CSS属性选择器

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

语法

属性选择器的语法如下：

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

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

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

示例

以下示例演示了属性选择器的使用。这里我们更改了具有target属性的元素的样式：

<html>
<head>
<style>
   a[target] {
      background-color: #04af2f;
      color: white;
      font-size: 2em;
   }
</style>
</head>
<body>
   <h2>属性选择器</h2>
   <p>样式应用于具有target属性的锚元素：</p>
   <a href="#">Tutorialspoint</a>
   <a href="#" target="_blank">google</a>
   <a href="#" target="_self">wikipedia</a>
</body>
</html>

CSS分组选择器

CSS分组选择器允许我们一次为多个元素应用相同的样式。元素名称用逗号分隔。分组选择器使CSS简洁并避免冗余。

语法

分组选择器的语法如下：

/* 为h1和h2应用相同的背景颜色 */
h1, h2 {
   background-color: grey;
}

示例

以下示例展示了如何在CSS中使用分组选择器。我们减少了代码量，为标题和其他HTML元素设置了背景颜色。

<html>
<head>
   <style>
      /* 这同时适用于<h1>和<h2>元素 */
      h1, h2 {
            background-color: grey;           
            padding: 4px;
      }

      /* 适用于所有段落，具有类*/
      /*'highlight'的元素，以及ID为'hightlightSpan'的元素*/
      p, .highlight, #hightlightSpan {
            background-color: yellow;
            padding: 10px;
      }
   </style>
</head>

<body>
      <h1>CSS选择器</h1>
      <h2>分组选择器</h2>
      <p>这是一个段落。</p>
      <div class="highlight">
         这是一个div
      </div>
      <br>
      <span id="hightlightSpan">
         这是一个span
      </span>
</body>
</html>

CSS伪类选择器

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="#">Tutorialspoint</a>
</body>
</html>

CSS伪元素选择器

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

语法

伪元素选择器的语法如下：

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

示例

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

<html>
<head>
   <style>
      /* 在段落前添加并设置内容样式 */
      p::before {
            content: "注意：";
            font-weight: bold;
            color: red;
      }

      /* 在段落后添加并设置内容样式 */
      p::after {
            content: " [阅读更多]";
            font-style: italic;
            color: blue;
      }
   </style>
</head>

<body>
   <h2>伪元素选择器</h2>
      <p>这是一个段落。</p>
</body>
</html>

CSS后代选择器

CSS后代选择器设置作为特定指定标签子代的所有标签的样式。要表示后代，在父元素和子元素之间使用单个空格。

语法

后代选择器的语法如下：

div p {
   color: blue;
}

上面的代码将div元素内段落标签的文本颜色设置为蓝色。

示例

以下示例展示了如何在css中使用后代选择器。我们更改了div元素的直接子元素段落的文本颜色：

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 2px solid;
      }
      div p {
         color: blue;
      }
   </style>
</head>

<body>
   <div>
      <p>
         这个段落在一个div内
         将会是蓝色。
      </p>

      <section>
         <p>
            这个段落在一个
            section内，而section在
            div内，也将会是蓝色。
         </p>
      </section>
   </div>
   <p>
      这个段落在div外
      将不会是蓝色。
   </p>
</body>
</html>

CSS子选择器

CSS子选择器选择特定元素的所有直接子元素。这用'>'(大于)符号表示。

语法

子选择器的语法如下：

div > p {
   color: blue;
}

上面的代码将直接位于div元素内的段落标签的文本颜色设置为蓝色。

示例

以下示例展示了如何在css中使用子选择器：

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 2px solid;
      }
      div > p {
         color: blue;
      }
   </style>
</head>
<body>
      <div>
         <p>
            这个段落在一个div内
            将会是蓝色。
         </p>

         <section>
            <p>
               这个段落在一个  
               section内，而section在div内
               将不会是蓝色，因为这
               不是直接子元素
            </p>
         </section>
      </div>
      <p>
         这个段落在div外
         将不会是蓝色。
      </p>
</body>
</html>

CSS相邻兄弟选择器

CSS相邻兄弟选择器选择紧接在指定元素之后的元素。使用加号("+")符号表示相邻兄弟。

语法

相邻兄弟选择器的语法如下：

h1 + p {
   margin-top: 0;
}

上面的代码将h1标签后的段落标签的上边距设置为0。

示例

以下示例展示了如何在css中使用相邻兄弟选择器。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 4px solid;
      }
      div + p {
         color: blue;
      }
   </style>
</head>
<body>
      <p>
         这个段落位于div上方
         将不会是蓝色
      </p>
      <div>
         <p>
            这个段落在一个div内
            将不会是蓝色。
         </p>
      </div>
      <p>
         这个段落1在div后
         将会是蓝色。
      </p>
      <p>这个段落2在
         div后将不会是蓝色。
      </p>
</body>
</html>

CSS一般兄弟选择器

一般兄弟选择器定位所有在指定元素之前的元素。一般兄弟选择器用波浪号符号("~")表示。

语法

一般兄弟选择器的语法如下：

h1 ~ p {
   color: gray;
}

上面的代码将h1标签后所有段落的文本颜色设置为灰色。

示例

以下示例展示了如何在css中使用一般兄弟选择器：

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 4px solid;
      }
      div ~ p {
         color: blue;
      }
   </style>
</head>

<body>
      <p>
         这个段落位于div上方
         将不会是蓝色
      </p>
      <div>
         <p>
            这个段落在一个div内
            将不会是蓝色。
         </p>
      </div>
      <p>
         这个段落1在div后
         将会是蓝色。
      </p>
      <p>这个段落2在
         div后将会是蓝色。
      </p>
</body>
</html>

CSS嵌套选择器

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

特点

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

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

语法

嵌套选择器的语法如下：

nav {
   & ul {
      list-style: none;
      & li {
      display: inline-block;
      & a {
         text-decoration: none;
         color: blue;
         &:hover {
            color: red;
         }
      }
      }
   }
}

示例

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

<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>&嵌套选择器</h1>
   <p id="sample">
      将鼠标悬停在<a href="#">链接上</a>。
   </p>
</body>
</html>
版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。

上一篇： HTML - 类 下一篇： HTML - id
相关文章
admin

admin

作者文章
浏览更多
热门
最新文章
标签列表
    闽ICP备2022017130号-1
    Powered By Z-BlogPHP Theme By 编程老白