CSS 选择器的用法和优先级介绍

以下是 CSS 选择器的用法和优先级介绍：

一、基本选择器

1. 元素选择器：

• 用法：通过 HTML 元素名称来选择元素。例如， p  选择所有  

    段落元素。

• 示例：
  css
  复制
  p {
  color: blue;
  }
   
  2. 类选择器：

• 用法：以  .  开头，根据元素的 class 属性值选择元素。可应用于多个不同元素。

• 示例：
  css
  复制

.my-class {
font-size: 16px;
}

plaintext
复制

3. ID 选择器：

• 用法：以  #  开头，根据元素的 id 属性值选择唯一的元素。在一个页面中，id 值应是唯一的。
• 示例：
  css
  复制
  #my-id {
  background-color: yellow;
  }

二、组合选择器

1. 后代选择器：

• 用法：用空格分隔两个或多个选择器，表示选择作为后代的元素。

• 示例：
  css
  复制
  div p {
  text-decoration: underline;
  }
   
  2. 子选择器：

• 用法：用  >  分隔两个选择器，表示选择直接子元素。

• 示例：
  css
  复制
  ul > li {
  list-style-type: none;
  }
   
  3. 相邻兄弟选择器：

• 用法：用  +  分隔两个选择器，表示选择紧接在另一个元素后的元素。

• 示例：
  css
  复制
  h1 + p {
  margin-top: 0;
  }
   
  4. 通用兄弟选择器：

• 用法：用  ~  分隔两个选择器，表示选择在另一个元素之后的所有同级元素。

• 示例：
  css
  复制
  h2 ~ p {
  font-style: italic;
  }

三、属性选择器

1.  [attribute] ：

• 用法：选择具有指定属性的元素。

• 示例：
  css
  复制
  [href] {
  color: green;
  }
   
  2.  [attribute=value] ：

• 用法：选择具有指定属性和值的元素。

• 示例：
  css
  复制
  [href=“https://www.example.com”] {
  font-weight: bold;
  }
   
  3.  [attribute^=value] ：

• 用法：选择属性值以指定值开头的元素。

• 示例：
  css
  复制
  [href^=“https”] {
  border: 1px solid black;
  }
   
  4.  [attribute$=value] ：

• 用法：选择属性值以指定值结尾的元素。

• 示例：
  css
  复制
  [href$=“.com”] {
  padding: 5px;
  }
   
  5.  [attribute*=value] ：

• 用法：选择属性值中包含指定值的元素。

• 示例：
  css
  复制
  [href*=“example”] {
  background-color: gray;
  }

四、伪类选择器

1. 链接伪类：

• :link ：选择未被访问的链接。

• :visited ：选择已被访问的链接。

• 示例：
  css
  复制
  a:link {
  color: blue;
  }
  a:visited {
  color: purple;
  }
   
  2. 用户行为伪类：

• :hover ：鼠标悬停在元素上时选择该元素。

• :active ：元素被激活（如被点击）时选择该元素。

• :focus ：元素获得焦点时选择该元素。

• 示例：
  css
  复制
  button:hover {
  background-color: lightblue;
  }
  button:active {
  background-color: darkblue;
  }
  input:focus {
  border: 2px solid orange;
  }
   
  3. 结构伪类：

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

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

• :nth-child(n) ：选择父元素的第 n 个子元素。

• :nth-last-child(n) ：选择父元素的倒数第 n 个子元素。

• :first-of-type ：选择同类型元素中的第一个。

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

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

• :nth-last-of-type(n) ：选择同类型元素中的倒数第 n 个。

• :empty ：选择没有子元素的元素。

• 示例：
  css
  复制
  ul li:first-child {
  font-weight: bold;
  }
  ul li:last-child {
  text-decoration: underline;
  }
  ul li:nth-child(2n) {
  background-color: lightgray;
  }
  p:first-of-type {
  margin-top: 0;
  }
  p:last-of-type {
  margin-bottom: 0;
  }
  p:nth-of-type(3) {
  color: red;
  }
  div:empty {
  display: none;
  }

五、伪元素选择器

1.  ::first-letter ：选择元素的第一个字母。
2.  ::first-line ：选择元素的第一行。
3.  ::before ：在元素内容之前插入内容。
4.  ::after ：在元素内容之后插入内容。

• 示例：
  css
  复制
  p::first-letter {
  font-size: 20px;
  }
  p::first-line {
  background-color: lightyellow;
  }
  h3::before {
  content: "Before “;
  }
  h3::after {
  content: " After”;
  }

六、优先级

CSS 优先级遵循以下规则：

1. 内联样式（在 HTML 元素的 style 属性中定义）具有最高优先级。
2. ID 选择器优先级高于类选择器、属性选择器和伪类选择器。
3. 类选择器、属性选择器和伪类选择器优先级高于元素选择器。
4. 当多个选择器具有相同的优先级时，后面定义的样式会覆盖前面的样式。

例如：

html
复制

.my-class {
color: green;
}

#my-id {
  color: red;
}

This is a paragraph.

 

在这个例子中，段落元素的文本颜色最终为红色，因为 ID 选择器具有最高优先级。