简述CSS选择符有哪些?

八股文_CSS面试题 0 41

参考回答

CSS选择器是用于选中HTML元素并应用样式的工具。CSS提供了多种选择器，常见的包括：

基本选择器：
- 元素选择器：选中指定类型的元素。
```
p { color: red; }
```
- 类选择器：选中具有指定类名的元素。
```
.box { color: blue; }
```
- ID选择器：选中具有指定ID的元素。
```
#header { color: green; }
```
- 通配符选择器：选中所有元素。
  “`css
  
  <ul>
  <li>{ color: purple; }
  
  “`
组合选择器：
- 后代选择器（空格）：选中某元素内部的所有指定元素。
```
div p { color: yellow; }
```
- 子元素选择器（>）：选中某元素直接子元素的指定元素。
```
div > p { color: orange; }
```
- 相邻兄弟选择器（+）：选中紧接在指定元素之后的元素。
```
h1 + p { color: brown; }
```
- 通用兄弟选择器（~）：选中指定元素后面的所有兄弟元素。
```
h1 ~ p { color: pink; }
```
属性选择器：
- 选中具有特定属性的元素。
```
input[type="text"] { color: gray; }
```
- 支持不同的匹配方式，如：
  - [attribute]：选中具有某属性的元素。
  - [attribute="value"]：选中具有特定属性值的元素。
  - [attribute^="value"]：选中属性值以某个值开头的元素。
  - [attribute$="value"]：选中属性值以某个值结尾的元素。
  - [attribute*="value"]：选中属性值包含某个值的元素。
伪类选择器：
- 选中元素的特定状态。
```
a:hover { color: red; }
```
- 常见的伪类包括：:hover（鼠标悬停）、:focus（获得焦点）、:first-child（第一个子元素）、:last-child（最后一个子元素）等。
伪元素选择器：
- 选中元素的特定部分，如第一个字母、第一行等。
```
p::first-letter { font-size: 2em; }
```
- 常见的伪元素包括：::before（元素前）、::after（元素后）、::first-letter（第一个字母）、::first-line（第一行）。
群组选择器：
- 用于同时选择多个元素。
```
h1, h2, h3 { font-weight: bold; }
```

详细讲解与拓展

1. 基本选择器

元素选择器：通过元素类型来选择，例如div、p、h1等。
```
p { color: red; }
```
这个选择器会选择所有的<p>元素，并将它们的文字颜色设为红色。
类选择器：通过元素的类名来选择。类选择器以.开头。
```
.box { padding: 20px; }
```
这里，.box会选择所有具有box类的元素。
ID选择器：通过元素的ID来选择。ID选择器以#开头。
```
#header { font-size: 24px; }
```
这个选择器会选中ID为header的元素。
通配符选择器：*选择所有元素。
```
* { margin: 0; }
```
这会将页面中的所有元素的外边距（margin）设置为0。

2. 组合选择器

后代选择器：通过空格来选择某元素内部的所有指定元素。
```
div p { color: blue; }
```
这会选择所有<div>元素内部的<p>元素。
子元素选择器：通过>来选择某元素的直接子元素。
```
div > p { color: blue; }
```
这只会选择<div>元素下的直接<p>子元素。
相邻兄弟选择器：通过+选择紧接在某元素之后的元素。
```
h1 + p { font-size: 18px; }
```
这会选择紧跟在<h1>元素之后的第一个<p>元素。
通用兄弟选择器：通过~选择所有位于某元素之后的兄弟元素。
```
h1 ~ p { font-size: 16px; }
```
这会选择所有在<h1>元素之后的<p>元素。

3. 属性选择器

属性选择器根据元素的属性进行选择，常用于表单元素或者根据自定义属性筛选元素。

input[type="text"] { background-color: lightgray; }

这会选择所有<input>元素，其中type属性值为text的元素。

4. 伪类选择器

伪类选择器用于选择元素的某些状态，如鼠标悬停时的样式。

a:hover { color: red; }

这个规则会在用户将鼠标悬停在<a>标签上时，改变文字颜色。

常见的伪类：
– :hover：鼠标悬停时的样式。
– :focus：元素获取焦点时的样式（例如表单输入框）。
– :first-child：选择父元素的第一个子元素。
– :last-child：选择父元素的最后一个子元素。

5. 伪元素选择器

伪元素选择器用于选择元素的某些部分（如第一个字母或最后一行等）。

p::first-letter { font-size: 2em; }

这个规则会选择每个<p>标签的第一个字母，并将其字体大小加大。

常见的伪元素：
– ::before：在元素内容之前插入内容。
– ::after：在元素内容之后插入内容。
– ::first-letter：选择元素的第一个字母。
– ::first-line：选择元素的第一行。

6. 群组选择器

群组选择器用于一次选择多个元素，减少重复代码。

h1, h2, h3 { font-weight: bold; }

这个规则会让所有的<h1>、<h2>和<h3>元素的文字加粗。

总结

CSS选择器用于选择HTML元素，并对其应用样式。它们有很多种类型，包括基本选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器等。掌握这些选择器，可以让你更加灵活和精确地控制网页的样式。