CSS 选择符有哪些？哪些属性可以继承？
参考回答
CSS选择器用于选中HTML元素并应用样式。CSS提供了多种选择器，常见的有以下几类：
1. 基本选择器
- 元素选择器：选中指定类型的元素。
“`css
p { color: red; }
“` - 类选择器：选中具有指定类名的元素。
“`css
.box { color: blue; }
“` - ID选择器：选中具有指定ID的元素。
“`css
#header { color: green; }
“` - 通配符选择器：选中所有元素。
“`css
<ul>
<li>{ color: purple; }“`
2. 组合选择器
- 后代选择器（空格）：选中某元素内部的所有指定元素。
“`css
div p { color: yellow; }
“` - 子元素选择器（
>）：选中某元素的直接子元素。“`css
div > p { color: orange; }
“` - 相邻兄弟选择器（
+）：选中紧接在指定元素之后的元素。“`css
h1 + p { color: brown; }
“` - 通用兄弟选择器（
~）：选中指定元素后面的所有兄弟元素。“`css
h1 ~ p { color: pink; }
“`
3. 属性选择器
- 选中具有特定属性的元素。
“`css
input[type="text"] { color: gray; }
“` - 支持不同的匹配方式，如：
[attribute]：选中具有某属性的元素。[attribute="value"]：选中具有特定属性值的元素。[attribute^="value"]：选中属性值以某个值开头的元素。[attribute$="value"]：选中属性值以某个值结尾的元素。[attribute*="value"]：选中属性值包含某个值的元素。
4. 伪类选择器
- 选中元素的特定状态。
“`css
a:hover { color: red; }
“` - 常见的伪类包括：
:hover（鼠标悬停）、:focus（获得焦点）、:first-child（第一个子元素）、:last-child（最后一个子元素）等。
5. 伪元素选择器
- 选中元素的特定部分，如第一个字母、第一行等。
“`css
p::first-letter { font-size: 2em; }
“` - 常见的伪元素包括：
::before（元素前）、::after（元素后）、::first-letter（第一个字母）、::first-line（第一行）。
6. 群组选择器
- 用于同时选择多个元素。
“`css
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属性的继承是指子元素自动获得父元素设置的样式。并非所有CSS属性都可以继承，通常文本相关的属性才会继承。以下是常见的可以继承的属性：
1. 文本相关的属性：
font-familyfont-sizefont-weightline-heightcolortext-aligntext-indenttext-transformletter-spacingword-spacingvisibility
2. 其他可继承属性：
cursorlist-stylequotes
总结
CSS提供了多种选择器，可以根据元素类型、类名、ID、属性等多种方式选择元素。理解选择器的用法和继承的属性是设计和布局网页时的重要基础。掌握这些选择器和继承属性，可以帮助你更加高效地编写CSS样式，控制页面的外观和布局。