Css 简明教程

CSS - Selectors

CSS 选择器用于选择要在网页上设置样式的 HTML 元素。它们允许你针对特定元素或组元素来应用诸如颜色、字体和边距之类的样式。

由选择器选择的元素或元素被称为 subject of the selector 。

Types of Selectors

CSS Universal Selector

通配符选择器（以星号 ( )* 表示）是一种特殊选择器，它匹配 HTML 文档中的所有元素。它们通常用于向文档中的所有元素添加相同长度的边距和内边距。

Syntax

* {
   margin: 0;
   padding: 0;
}

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

Example

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

<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 Element Selector

元素选择器针对 HTML 元素，例如 * <h1> 、 <p> * 等。当我们希望对文档中的所有 <p> 标记或 <h1> 标记应用类似样式时，使用它。

Syntax

/* 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;
}

Example

以下示例演示了元素选择器的用法：

<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 Selector

类选择器以其 * class attribute * 的特定值针对元素设置样式。CSS 中的一个类用 "." （句点）符号表示。

Syntax

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

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

Example

以下示例演示了类选择器的用法，其中 .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 Selector

ID 选择器以特定值为 * id attribute * 的单个元素为目标进行设置样式。CSS 中的 id 用“#”（井号）符号表示。同一个类可以应用到多个元素，但一个 id 是元素唯一的。

Syntax

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

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

Example

以下示例演示了 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 Attribute Selector

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

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

Syntax

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

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

Example

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

<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://www.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 Group Selector

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

Syntax

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

Example

以下示例演示了如何在 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 Pseudo Class Selector

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

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

Syntax

/* 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;
}

Example

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

<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://www.tutorialspoint.com">
      Tutorialspoint
   </a>
   <br><br>
   <button>Click Me</button>
</body>
</html>

CSS Pseudo Element Selector

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

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

Syntax

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

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

Example

以下示例演示了伪元素选择器 (::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 Descendant Selector

后代选择器在 css 中用于设置所有作为特定指定标签的子标签的文本样式。母元素和子元素之间的空格用于指定为后代。

Syntax

div p {
   color: blue;
}

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

Example

以下示例演示了如何在 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 Child Selector

css 中的子选择器用于定位特定元素的所有直接子元素。这由“>”（大于）符号表示。

Syntax

div > p {
   color: blue;
}

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

Example

以下示例演示了如何在 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 Adjacent Sibling Selectors

在 CSS 中，邻接兄弟选择器用于定位紧接在指定元素之前的元素。加号 ( "+" ) 用于表示邻接兄弟。

Syntax

h1 + p {
   margin-top: 0;
}

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

Example

以下示例展示了如何在 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 General Sibling Selector

在 CSS 中，通用兄弟选择器用于定位所有紧接在指定元素之前的元素。波浪号 ( "~" ) 用于表示通用兄弟。

Syntax

h1 ~ p {
   color: gray;
}

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

Example

以下示例展示了如何在 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>

Nested Selectors In CSS

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

Characteristics of CSS nesting Selectors

nesting selector 展示了父规则和子规则之间的关系。

  1. 当嵌套选择器被浏览器解析时，它会自动在选择器之间添加一个空格，从而创建一个新的 CSS 选择器规则。

  2. 在嵌套规则需要附加到父规则（没有任何空格）的情况下，比如在使用伪类或复合选择器时，必须立即在前面加上 &amp; nesting selector 以便获得所需结果。

  3. 为了反转规则的上下文，可以追加 &amp; nesting selector 。

  4. 可以有多个 &amp; nesting selector 实例。

Syntax

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

Example

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

<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>