CSS所有选择器的用法及示例（完整版）

文章目录

• 前言
• 一、CSS所有选择器的作用
• • 1. 基础选择器
  • 2. 组合选择器
  • 3. 属性选择器
  • 4. 伪类选择器
  • 5. 伪元素选择器
  • 6. 其他选择器
• 二、CSS所有选择器的具体使用示例
• • 1. 基础选择器
  • 2. 组合选择器
  • 3. 属性选择器
  • 4. 伪类选择器
  • 5. 伪元素选择器
  • 6. 其他选择器
• 总结
• PS：

前言

了解CSS（层叠样式表）所有选择器的用法，并列出基础示例。

一、CSS所有选择器的作用

1. 基础选择器

• 元素选择器（标签选择器）: 选择所有指定元素。

  • 描述：根据HTML元素的名称来选择元素。例如，p选择器会选择所有的<p>元素。
  • 示例：p { color: red; } 会将所有<p>元素的文字颜色设置为红色。

    p {
      color: red;
    }
    

• 类选择器（.开头）: 选择所有具有指定类的元素。

  • 描述：通过类名找到对应的元素。例如，通过HTML元素的class属性来选择元素，类选择器以点号.开头，后跟类名。类名以.开头，如.my-class。
  • 示例：.classselect { background: red; } 会选择所有class="classselect"的元素，并将它们的背景色设置为红色。

    .classselect {
     	background: red; 
     }
     ```	  
    

• ID选择器（#开头）: 选择具有指定ID的元素。

  • 描述：通过ID名找到对应的元素，ID选择器以井号#开头，后跟ID名，且每个ID在页面中应该是唯一的，如#my-id。
  • 示例：#idselect { height: 100px; } 会选择id="idselect"的元素，并将其高度设置为100像素。

    #idselect { 
       height: 100px;
    }
     ```
    

2. 组合选择器

• 后代选择器（空格分隔）: 选择指定元素内部的所有符合条件的后代元素。

  • 描述：通过空格分隔两个选择器，以选择第一个选择器的后代中符合第二个选择器的元素。
  • 示例：div p会选择所有<div>元素内的<p>元素。

    div p {
      color: blue;
    }
    

• 子元素选择器（>分隔）: 选择指定元素的直接子元素。

  • 描述：使用>符号分隔选择器，通过>符号选择直接子元素。
  • 示例： div > p会选择所有直接位于<div>元素内的<p>元素。

    div > p {
      color: red;
    }
    

• 相邻兄弟选择器（+分隔）: 选择与指定元素在同一层级且紧接在它后面的元素。

  • 描述：使用+符号分隔选择器，选择紧接在另一元素后的元素，且二者有相同的父元素。
  • 示例：h2 + p会选择紧跟在<h2>元素之后的<p>元素。

    h2 + p {
      color: green;
    }
    

• 通用兄弟选择器（~分隔）: 选择与指定元素在同一层级的所有后续兄弟元素。

  • 描述：使用~符号分隔选择器，选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。
  • 示例：h2 ~ p会选择所有与h2元素在同一层级的p元素。

    h2 ~ p {
      color: black;
    }
    

• 群组选择器（，分隔）：允许您同时选择多个元素，并将相同的样式应用于它们。

  • 描述：允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗号,分隔不同的选择器。
  • 示例：h1, h2, p { color: blue; } 会将<h1>、<h2>和<p>元素的文字颜色都设置为蓝色。

      h1, h2, p { 
      color: blue; 
      }
    

3. 属性选择器

• 等于属性选择器([attribute="value"]): 选择具有指定属性且属性值完全等于指定值的元素。

  • 描述：根据元素的属性及属性值来选择元素。
  • 示例：这个选择器会选择所有<a>标签，其target属性值完全等于"_blank"。这意味着这些链接会在新标签页或新窗口中打开。

    a[target="_blank"] {
      color: red;
    }
    

• 包含属性选择器([attribute~="value"]): 选择属性值包含指定完整子串的元素。

  • 描述：实际上[attribute~="value"]选择器用于选择属性值中包含一个完整单词value（单词之间由空格分隔）的元素。
  • 示例：这个选择器会选择所有<a>标签，其title属性值中包含单词"example"（注意，"example"必须是一个完整的单词，前后有空格分隔，除非它是属性值中的唯一单词）。

    a[title~="example"] {
      color: green;
    }
    

• 起始属性选择器([attribute^="value"]): 选择属性值以指定子串开头的元素。

  • 描述：选择属性值以指定子串开头的元素。
  • 示例：这个选择器会选择所有<a>标签，其href属性值以"https"开头。这通常用于确保所有安全链接（HTTPS）都有特定的样式。

    a[href^="https"] {
      color: black;
    }
    

• 结尾属性选择器([attribute$="value"]): 选择属性值以指定子串结尾的元素。

  • 描述：选择属性值以指定子串结尾的元素。
  • 示例：这个选择器会选择所有<a>标签，其href属性值以".pdf"结尾。这可以用于给PDF文件链接添加特定的样式。

    a[href$=".pdf"] {
      color: blue;
    }
    

• 子串属性选择器([attribute*="value"]): 选择属性值包含指定子串的元素。

  • 描述：选择属性值中包含指定子串的元素（与[attribute~="value"]不同，这里不需要完整的单词匹配）。
  • 示例：这个选择器会选择所有<a>标签，其href属性值中包含子串"example"。这意味着无论"example"出现在href的哪个位置，只要它作为子串存在，该链接就会被选中。

    a[href*="example"] {
      color: red;
    }
    

4. 伪类选择器

• 动态伪类选择器：用于选择处于特定状态的元素。
  • :hover：当鼠标指针悬停在元素上时触发。
  • :active：当元素被用户激活（例如点击）时触发，选择活动链接（鼠标点击未释放时的状态）。
  • :focus：选择获得焦点的元素，如通过键盘或鼠标点击选中的元素。当元素获得焦点时触发，常见于输入框、按钮等。
  • :visited：选择已访问过的链接。
  • :link：选择未访问过的链接。

• 结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。

  • :first-child：选择父元素的第一个子元素。

  • :last-child：选择父元素的最后一个子元素。

  • :nth-child(n)：选择父元素的第n个子元素，n可以是数字、关键词（如"even"和"odd"）或公式（如2n+1）。

  • :nth-last-child(n)：类似于:nth-child(n)，但它是从最后一个子元素开始计数的。

  • :only-child：选择父元素仅有一个子元素，且该子元素匹配选择器的元素。

  • :first-of-type：选择父元素下相同类型元素的第一个子元素。

  • :last-of-type：选择父元素下相同类型元素的最后一个子元素。

  • :nth-of-type(n)：选择父元素下相同类型元素的第n个子元素。

  • :nth-last-of-type(n)：类似于:nth-of-type(n)，但它是从相同类型元素的最后一个子元素开始计数的。

  • :only-of-type：选择父元素下与其类型相同的唯一子元素。

  • :empty（空伪类）：选择没有任何子元素（包括文本节点）的元素。

• 表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。

  • :checked：选择被选中的表单元素，如单选框、复选框等。
  • :enabled：选择启用的表单元素。
  • :disabled：选择被禁用的表单元素。
  • :read-only：选择只读的表单元素。
  • :read-write：选择可写的表单元素。

• 目标伪类选择器:

  • :target：选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。

• 否定伪类选择器:

  • :not(selector)：选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。

• 示例：

  /* 动态伪类选择器 */
  a:hover {
    color: red;
  }
  
  /* 结构伪类选择器 */
  ul li:first-child {
    font-weight: bold;
  }
  
  /* 表单伪类选择器 */
  input[type="checkbox"]:checked {
    background-color: yellow;
  }
  
  /* 目标伪类选择器 */
  :target {
    border: 2px solid blue;
  }
  
  /* 否定伪类选择器 */
  div:not(.special) {
    color: gray;
  }
  

5. 伪元素选择器

• 伪元素选择器（::开头）: 用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式。
  • 文本相关伪元素
    • ::first-letter：用于选择文本块的第一个字母，并允许为其设置特殊的样式。这常用于实现首字下沉或特殊首字母效果。
    • ::first-line：用于选择文本块的第一行，并允许为其设置与后续文本不同的样式。这常用于强调段落或文本块的开头部分。
  • 内容生成伪元素
    • ::before：在元素的内容之前插入新的内容或装饰。这通常与content属性一起使用，以定义要插入的具体内容。
    • ::after：在元素的内容之后插入新的内容或装饰。同样，这也需要content属性来指定要插入的内容。
• 示例：p::before { content: "注意:"; color: red; } 会在每个<p>元素的内容前添加“注意:”字样，并设置其颜色为红色。

  p::first-line {
    color: blue;
  }
  p::first-letter {
    color: red;
  }
  p::before {
    content: "Before: ";
    color: green;
  }
  p::after {
    content: " After";
    color: black;
  }
  

6. 其他选择器

• 通配符选择器（*）: 选择页面上的所有元素。它在特定情况下（如重置样式）有着特殊的用途。

• 根伪类选择器（:root）:选择文档的根元素（通常是<html>元素），并经常用于设置全局变量（CSS自定义属性）。

• 语言伪类选择器（:lang）：用于选择具有特定语言属性的元素。它基于lang属性来选择元素，这在处理多语言网站时非常有用。

二、CSS所有选择器的具体使用示例

1. 基础选择器

• 元素选择器: 选择HTML文档中所有指定类型的元素。

  p {
    color: red;
  }
  

  <p>这是一个段落。</p>
  

  这个例子会选择所有的<p>元素，并将它们的文字颜色设置为红色。

• 类选择器: 选择具有指定类名的所有元素。

  .highlight {
   background-color: yellow;
  }
  

  <p class="highlight">这是一个段落。</p>
  

  这个例子会选择所有class="highlight"的元素，并将它们的背景颜色设置为黄色。

• ID选择器: 选择具有指定ID的元素。（注意：每个ID在文档中应该是唯一的）

   #idname {
     color: green;
   }
  

  <p id="idname">这是一个段落。</p>
  

  这个例子会选择id="idname"的元素，并将它的文字颜色设置为绿色。

2. 组合选择器

• 后代选择器: 选择某元素后代的所有指定元素。

  div p {
    color: blue;
  }
  

  <div>
    <p>这是一个段落。</p>
  </div>
  

• 子元素选择器: 选择某元素子代的所有指定元素。

  div > p {
    color: red;
  }
  

  <div>
    <p>这是一个段落。</p>
  </div>
  

• 相邻兄弟选择器: 选择紧接在某元素后的所有指定元素。 选择紧接在另一元素后的元素，且二者有相同的父元素。

  h1 + p {
    margin-top: 50px;
  }
  

  <h1>标题</h1>
  <p>这是一个段落。</p>
  

  这个例子会选择紧跟在<h1>元素后的<p>元素，并设置其上外边距为50像素。

• 通用兄弟选择器: 选择某个元素之后的所有兄弟元素（共享相同的父元素），而不限于直接相邻的兄弟。

  h1 ~ p {
    color: orange;
  }
  

  这个例子会选择所有在<h1>元素之后的<p>兄弟元素，并将它们的文字颜色设置为橙色。

• 群组选择器: 允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗号,分隔不同的选择器。

    h1, h2, p { 
    color: blue; 
    }
  

  这个例子会选择将<h1>、<h2>和<p>元素的文字颜色都设置为蓝色。

3. 属性选择器

• 等于属性选择器: 选择具有指定属性值的元素

  a[target="_blank"] {
    color: red;
  }
  

  <a href="https://www.example.com" target="_blank">链接</a>
  

• 包含属性选择器: 选择属性值包含指定子串的元素。选择某个元素内部的后代元素（包括子元素、孙子元素等）。

  div p {
    color: green;
  }
  

  这个例子会选择所有<div>元素内部的<p>元素，并将它们的文字颜色设置为绿色。

• 起始属性选择器: 选择属性值以指定子串开头的元素

  a[href^="https"] {
    color: black;
  }
  

  <a href="https://www.example.com">链接</a>
  

• 结尾属性选择器: 选择属性值以指定子串结尾的元素

  a[href$=".pdf"] {
    color: blue;
  }
  

  <a href="document.pdf">PDF文档</a>
  

• 子串属性选择器: 选择属性值包含指定子串的元素。选择作为某元素直接子元素的所有元素。

  ul > li {
    list-style-type: none;
  }
  

  这个例子会选择所有直接位于<ul>元素下的<li>-元素，并移除它们的列表样式。

4. 伪类选择器

• 动态伪类选择器：用于选择处于特定状态的元素。

• 结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。

• 表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。

• 目标伪类选择器: 选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。

• 否定伪类选择器: 选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。

• 示例：

  /* 动态伪类选择器 */
  a:hover {
    color: red;
  }
  
  /* 结构伪类选择器 */
  ul li:first-child {
    font-weight: bold;
  }
  
  /* 表单伪类选择器 */
  input[type="checkbox"]:checked {
    background-color: yellow;
  }
  
  /* 目标伪类选择器 */
  :target {
    border: 2px solid blue;
  }
  
  /* 否定伪类选择器 */
  div:not(.special) {
    color: gray;
  }
  

5. 伪元素选择器

• 伪元素选择器（::开头）: 用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式。

  p::first-line {
    color: blue;
  }
  p::first-letter {
    color: red;
  }
  p::before {
    content: "Before: ";
    color: green;
  }
  p::after {
    content: " After";
    color: black;
  }
  

  <p>这是一个段落。</p>
  

6. 其他选择器

• 通配符选择器（*）：匹配页面上的所有元素。这种选择器在需要为页面上所有元素设置统一的样式时非常有用，特别是在重置样式或设置一些基本的样式规则时。

  • 示例：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  在这个例子中，通配符选择器被用来为页面上所有元素设置margin和padding为0，并将box-sizing属性设置为border-box，这是一种常见的样式重置方法，有助于减少浏览器之间的样式差异。

• 根伪类选择器（:root）：用于选择文档的根元素，通常是<html>元素。它经常用于设置全局变量（CSS自定义属性），这些变量可以在整个文档中被重复使用，有助于保持样式的一致性并减少重复代码。

  • 示例：

  :root {
    --primary-color: #007bff;
    --font-family: Arial, sans-serif;
  }
  
  body {
    color: var(--primary-color);
    font-family: var(--font-family);
  }
  

  在这个例子中，:root选择器被用来定义两个全局变量--primary-color和--font-family。然后，在body选择器中，这些变量被用作color和font-family属性的值，从而在整个文档中统一了字体颜色和字体族。

• 语言伪类选择器（:lang）：用于选择具有特定lang属性的元素。这个选择器在处理多语言网站时非常有用，因为它允许你根据元素的语言属性来应用不同的样式。

  • 示例：

  <p lang="en">This is a paragraph in English.</p>
  <p lang="fr">Ceci est un paragraphe en français.</p>
  

  :lang(en) {
    font-family: Arial, sans-serif;
  }
  
  :lang(fr) {
    font-family: 'Times New Roman', serif;
  }
  

  在这个例子中，:lang(en)选择器被用来选择所有lang属性为en的元素，并为它们设置Arial字体。类似地，:lang(fr)选择器被用来选择所有lang属性为fr的元素，并为它们设置’Times New Roman’字体。这样，不同语言的文本就可以使用不同的字体样式，从而提高了网站的可读性和用户体验。

总结

CSS所有选择器大致分为6种类型：
1.基础选择器
2.组合选择器
3.属性选择器
4.伪类选择器
5.伪元素选择器
6.其他选择器

PS：

参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

MDN Web Docs（全称Mozilla Developer Network，谋智开发者网络），提供了关于Web技术、开放网络应用和Web标准的详细、权威、可靠的文档，可以深入学习Web技术以及能够驱动Web的软件，包括网络标准（例如CSS、HTML和JavaScript）和开发开放网络应用等。