css3选择器有哪些

redmaomail 2024-10-23 11:04 阅读数 68 #建站与主机

CSS3 选择器是用于选择 HTML 元素并对其应用样式的一种方式。CSS3 选择器相较于之前的版本提供了更加灵活和强大的选择器，能够更精确地选择特定的元素或元素组合。下面将列举并详细介绍常用的 CSS3 选择器。

1. 元素选择器 (Element Selector)：

这是最基本的选择器，通过元素的名称选择对应的元素进行样式设置，比如 `body { background-color: red; }` 会选择文档的 body 元素。

2. 类选择器 (Class Selector)：

类选择器使用 . 符号加上类名选择对应的元素，比如 `.red { color: red; }` 会选择 class 为 red 的元素。

3. id 选择器 (ID Selector)：

id 选择器使用 # 符号加上 id 名称选择对应的元素，比如 `#header { font-size: 24px; }` 会选择 id 为 header 的元素。

4. 属性选择器 (Attribute Selector)：

属性选择器根据元素的属性来选择对应的元素，比如 `[type="text"] { border: 1px solid #ccc; }` 会选择 type 属性为 text 的元素。

5. 后代选择器 (Descendant Selector)：

后代选择器通过元素的层级关系选择对应的元素，比如 `ul li { margin: 5px; }` 会选择 ul 元素的所有后代 li 元素。

6. 子元素选择器 (Child Selector)：

子元素选择器是通过父元素选择其直接子元素，比如 `ul > li { list-style: none; }` 会选择 ul 元素的直接子元素 li。

7. 相邻兄弟选择器 (Adjacent Sibling Selector)：

相邻兄弟选择器选择在同一父元素下的某个元素之后的直接兄弟元素，比如 `h2 + p { font-weight: bold; }` 会选择紧跟在 h2 元素之后的 p 元素。

8. 通用兄弟选择器 (General Sibling Selector)：

通用兄弟选择器选择在同一父元素下的某个元素之后的所有兄弟元素，比如 `h2 ~ p { margin-top: 10px; }` 会选择紧跟在 h2 元素之后的所有 p 元素。

9. :first-child 伪类选择器：

这是一个伪类选择器，选择父元素下的*个子元素，比如 `ul li:first-child { background-color: yellow; }` 会选择 ul 元素下的*个 li 元素。

10. :last-child 伪类选择器：

这是一个伪类选择器，选择父元素下的*一个子元素，比如 `ul li:last-child { background-color: yellow; }` 会选择 ul 元素下的*一个 li 元素。

11. :nth-child(n) 伪类选择器：

这是一个伪类选择器，选择父元素下的第 n 个子元素，比如 `ul li:nth-child(2) { font-style: italic; }` 会选择 ul 元素下的第二个 li 元素。

12. :nth-of-type(n) 伪类选择器：

这是一个伪类选择器，选择父元素下特定类型的第 n 个子元素，比如 `ul li:nth-of-type(odd) { background-color: lightgray; }` 会选择 ul 元素下的奇数位置的 li 元素。

13. :hover 伪类选择器：

这是一个伪类选择器，选择鼠标悬停在元素上时的样式，比如 `a:hover { color: blue; }` 会选择鼠标悬停在 a 元素上时的样式。

14. :focus 伪类选择器：

这是一个伪类选择器，选择当前获得焦点的元素，比如 `input:focus { border: 1px solid blue; }` 会选择当前获得焦点的 input 元素。

15. :checked 伪类选择器：

这是一个伪类选择器，选择被选中的元素，比如 `input[type="checkbox"]:checked { background-color: yellow; }` 会选择被选中的复选框元素。

这些是常见且实用的 CSS3 选择器，通过不同的选择器可以选择不同的元素或元素组合，并对其应用不同的样式。为了更好地掌握和应用这些选择器，建议进一步学习和实践。

上一篇：windows网站下一篇：vuewatchimmediate