css选择器四大类：基本、组合、属性、伪类

CSS选择器四大类：基本、组合、属性、伪类攻略

基本选择器

基本选择器是最简单的选择器，包括四种类型：

1. 元素选择器

元素选择器是指根据元素的标签名称来选择网页中的元素，例如以下代码将选中 HTML 文档中所有的段落元素：

p {
  color: red;
}

2. 类选择器

类选择器是通过元素的 class 属性来进行选择（class 选择器以句点 . 开头），例如：

.red {
  color: red;
}

<div class="red">Red Text</div>

3. ID 选择器

ID 选择器是通过元素的 id 属性来进行选择（id 选择器以 # 开头），例如：

#myElement {
  color: blue;
}

<div id="myElement">Blue Text</div>

4. 通配符选择器

通配符选择器可以匹配 HTML 文档中的所有元素：

* {
  box-sizing: border-box;
}

组合选择器

组合选择器可以将不同类型的选择器组合在一起，以选择更特定的元素。包括以下四种类型：

1. 后代选择器

后代选择器可以选择位于某个元素内部的其他元素：

.parent .child {
  color: green;
}

<div class="parent">
  <div class="child">Green Text</div>
</div>

2. 子选择器

子选择器可以选择某个元素的所有子元素：

.parent > .child {
  color: green;
}

<div class="parent">
  <div class="child">Green Text</div>
</div>

3. 相邻兄弟选择器

相邻兄弟选择器可以选择位于同一父元素下的相邻兄弟元素：

.first + .second {
  color: green;
}

<div class="parent">
  <div class="first">First Text</div>
  <div class="second">Second Text</div>
</div>

4. 通用兄弟选择器

通用兄弟选择器可以选择位于同一父元素下的所有兄弟元素：

.first ~ .second {
  color: green;
}

<div class="parent">
  <div class="first">First Text</div>
  <div class="middle">Middle Text</div>
  <div class="second">Second Text</div>
</div>

属性选择器

属性选择器可以根据元素的属性值来选择元素。包括以下四种类型：

1. 存在属性选择器

存在属性选择器用于选择具有某个属性的元素：

[title] {
  font-weight: bold;
}

<div title="Tooltip Text">Element Text</div>

2. 等值属性选择器

等值属性选择器用于选择具有某个属性值的元素：

[type="text"] {
  color: blue;
}

<input type="text" />

3. 包含属性选择器

包含属性选择器用于选择属性值包含指定字符串的元素：

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

<a href="https://www.google.com">Link to Google</a>

4. 开始于和结束于属性选择器

开始于和结束于属性选择器分别用于选择属性值以指定字符串开始或结束的元素：

[src^="https://"] {
  border: 1px solid blue;
}

<img src="https://example.com/image.jpg" />

[src$=".jpg"] {
  border: 1px solid blue;
}

<img src="image.jpg" />

伪类选择器

伪类选择器可以根据元素的状态或位置来选择元素。包括以下三种类型：

1. 链接伪类选择器

链接伪类选择器用于根据链接状态选择元素：

a:link {
  color: blue;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}

a:visited {
  color: purple;
}

2. 动态伪类选择器

动态伪类选择器用于根据元素状态选择元素，例如：

:checked {
  border: 1px solid red;
}

<input type="checkbox" checked />

3. 结构化伪类选择器

结构化伪类选择器用于根据元素在文档树中位置选择元素：

:first-child {
  font-weight: bold;
}

<ul>
  <li>First Item</li>
  <li>Second Item</li>
</ul>

以上就是 CSS 选择器四大类的详细攻略。