CSS 选择器

上一页
下一页

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

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

选择器类型


 

CSS 通用选择器

通用选择器用星号(*)表示，是一个特殊的选择器，它匹配 HTML 文档中的所有元素。这些通常用于为文档中的所有元素添加相同长度的边距和填充。

语法

* {
   margin: 0;
   padding: 0;
}

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

示例

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

<html>
<head>
   <style>
      * {
         margin: 0;
         padding: 0;
         background-color: peachpuff;
         color: darkgreen;
         font-size: 25px;
      }
   </style>
</head>
<body>
   <h1>Universal selector (*)</h1>

   <div>
      Parent element
      <p>Child paragraph 1</p>
      <p>Child paragraph 2</p>
   </div>

   <p>Paragraph 3</p>
</body>
</html>

CSS 元素选择器

元素选择器目标是 HTML 元素，例如 <h1>，<p> 等。当我们想要对文档中的所有 <p> 标签或 <h1> 标签应用类似样式时，可以使用此方法。

语法

/* Sets text color of all p tags to green */
p {
   color: green;
}
/* Add underline to all h1 tags in document */
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>Element selector</h1>
      <p>Div with border </p>
      <p>Text aligned to center</p>
      <p>Paragraph with green color</p>
      <p>h1 with an underline</p>
   </div>
</body>
</html>

CSS 类选择器

类选择器目标是其 class 属性具有特定值的元素。CSS 中的类用"."（句点）符号表示。

语法

.sideDiv {
   text-decoration-line: underline;
}

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

示例

以下示例演示了类选择器的用法，其中.style-div，.topDivs和.bottomDivs是类选择器

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

      .topDivs{
         font-weight: bold;
         font-size: 30px;
      }
      .bottomDivs{
         color: green;
         font-size: 20px;
      }
   </style>
</head>

<body>
   <div class="style-div">
         <div class="topDivs">
            Hello World
         </div>
         <div class="topDivs">
            Learn CSS
         </div>
         <div class="bottomDivs">
            From
         </div>
         <div class="bottomDivs">
            TutorialsPoint
         </div>
   </div>
</body>

</html>

CSS ID 选择器

ID 选择器目标是其 id 属性具有特定值的单个元素。CSS 中的 ID 用"#"（井号）符号表示。相同的类可以应用于多个元素，但 ID 对每个元素都是唯一的。

语法

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

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

示例

以下示例演示了 ID 选择器的用法，其中#style-div，#tutorial和#stylePoint是应用于元素的 ID 选择器

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

      #tutorial{
         color: green;
         font-size: 20px;
      }
      #stylePoint{
         color: black;
         font-size: 15px;
         font-weight: bold;
      }
   </style>
</head>

<body>
   <div id="style-div">
         <div id="tutorial">
            Tutorials
            <span id="stylePoint">
               Point
            </span>
         </div>
         <p>
            Here we used ids to 
            style different elements. 
         </p>
   </div>
</body>
</html>

CSS 属性选择器

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

有关属性选择器的详细说明，请参阅此属性选择器文章。

语法

/* Style all anchor tag with target attribute */
a[target] {
   background-color: peachpuff;
}

/* Style all anchor tag that links to tutorialspoint */
a[href="https://tutorialspoint.com"] {
   background-color: peachpuff;
}

示例

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

<html>
<head>
   <style>
      a[href]{
         font-size: 2em;
      }

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

      /* Attribute with value have more priority*/
      /* Hence black background applied to CSS link*/
      a[target="_self"] {
         background-color: black;
      }
   </style>
</head>

<body>
   <h2>Attribute selector</h2>
   <p>
      Styling applied to anchor element:
   </p>

   <a href="https://tutorialspoint.com/">
      Tutorialspoint
   </a>
   <br><br>
   <a href="/html/index.htm" target="_blank">
      HTML Tutorial
   </a>
   <br><br>
   <a href="/css/index.htm" target="_self">
      CSS Tutorial
   </a>
</body>

</html>

CSS 组选择器

CSS 组选择器允许我们一次对多个元素应用相同的样式。元素名称可以用逗号分隔。此方法推荐使用，因为它使 CSS 简洁并避免冗余。

语法

/* Apply same background color for h1 and h2 */
h1, h2 {
   background-color: grey;
}

示例

以下示例显示如何在 CSS 中使用组选择器。

<html>
<head>
   <style>
      /* This applies to both <h1> and <h2> elements */
      h1, h2 {
            background-color: grey;           
            padding: 4px;
      }

      /*Applies to all paragraphs, elements with class*/
      /*'highlight', and element with ID 'hightlightSpan'*/
      p, .highlight, #hightlightSpan {
            background-color: yellow;
            padding: 10px;
      }
   </style>
</head>

<body>
      <h1>CSS Selectors</h1>
      <h2>Group Selectors</h2>
      <p>This is a paragraph.</p>
      <div class="highlight">
         This is div
      </div>
      <br>
      <span id="hightlightSpan">
         This is span
      </span>
</body>
</html>

CSS 伪类选择器

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

有关伪类选择器的详细列表，请参阅此CSS 伪类教程。

语法

/* Change background color on hover */
a :hover {
   background-color: peachpuff; 
}
/* Change background color on clicking button */
button:active {
   background-color: yellow;
}
/* Change border color on focusing input */
input:focus {
   border-color: blue;
}

示例

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

<html>
<head>
   <style>
      a:hover {
         background-color: peachpuff;
         color: green;
         font-size: 2em;
      }
      button:active {
         background-color: yellow;
      }
   </style>
</head>

<body>
   <h2>Pseudo-class selector</h2>
   <p>
      Styling applied to anchor element and 
      button with a pseudo-class:
   </p>
   <a href="https://tutorialspoint.com">
      Tutorialspoint
   </a>
   <br><br>
   <button>Click Me</button>
</body>
</html>

CSS 伪元素选择器

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

有关伪元素选择器的详细列表，请参阅此CSS 伪元素教程。

语法

/* Define contents before paragraph */
a::before {
   content: " ";
}

/* Style first letter of paragraph */
p::first-letter {
   font-size: 2em;
}

示例

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

<html>
<head>
   <style>
      /* Add and style contents before paragraph */
      p::before {
            content: "Note: ";
            font-weight: bold;
            color: red;
      }

      /* Add and style contents after paragraph */
      p::after {
            content: " [Read more]";
            font-style: italic;
            color: blue;
      }
   </style>
</head>

<body>
   <h2>Pseudo-element selector</h2>
      <p>This is a paragraph.</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>
         This paragraph is inside a div 
         and will be blue.
      </p>

      <section>
         <p>
            This paragraph is inside a 
            section which is inside a 
            div and will also be blue.
         </p>
      </section>
   </div>
   <p>
      This paragraph is outside the div 
      and will not be blue.
   </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>
            This paragraph is inside a div and 
            will be blue.
         </p>

         <section>
            <p>
               This paragraph is inside a  
               section which is inside a div
               and will not be blue as this 
               is not direct child
            </p>
         </section>
      </div>
      <p>
         This paragraph is outside the div
         and will not be blue.
      </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>
         This paragraph is above the div 
         and will not be blue
      </p>
      <div>
         <p>
            This paragraph is inside a div 
            and will not be blue.
         </p>
      </div>
      <p>
         This paragraph 1 after the div 
         and will be blue.
      </p>
      <p>This paragraph 2 after the 
         div and will not be blue.
      </p>
</body>
</html>

CSS 通用兄弟选择器

在 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>
         This paragraph is above the div 
         and will not be blue
      </p>
      <div>
         <p>
            This paragraph is inside a div 
            and will not be blue.
         </p>
      </div>
      <p>
         This paragraph 1 after the div 
         and will be blue.
      </p>
      <p>This paragraph 2 after the 
         div and will be blue.
      </p>
</body>
</html>

CSS 中的嵌套选择器

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>& nesting selector</h1>
   <p id="sample">
      Hover <a href="#">over the link</a>.
   </p>
</body>
</html>
打印页面
上一页
下一页
广告