CSS常见选择器

目录

简介

一 标签选择器 (Element Selector)

二 类选择器 (Class Selector)

三 ID选择器 (ID Selector)

四 通配符选择器 (Universal Selector)

五 后代选择器 (Descendant Selector)

六 子选择器 (Child Selector)

七 并集选择器 (Multiple or Group Selector)

八 属性选择器 (Attribute Selector)

九 伪类选择器 (Pseudo-class Selector)

十 伪元素选择器 (Pseudo-element Selector)

十一 总结

---

简介

CSS选择器是用于定位HTML文档中特定元素的模式，通过不同的匹配规则为元素设置样式。从基础标签选择器（如p选取所有段落）到复杂属性选择器（如 [href$=".pdf"] 选中所有链接到PDF文件的a标签），再到伪类选择器（如:hover定义鼠标悬停状态的样式），CSS选择器帮助开发者精细控制网页组件的外观与交互行为。

一 标签选择器 (Element Selector)

• 通过HTML元素的标签名称来选取具有该标签的所有元素。

p { color: red; } /* 选择所有段落并设置文本颜色为红色 */

二 类选择器 (Class Selector)

• 使用.后跟类名来选取具有指定class属性的元素。

.my-class { font-size: 16px; } /* 选择class为'my-class'的所有元素并设置字体大小 */

三 ID选择器 (ID Selector)

• 使用#后跟ID名来选取具有指定id属性的唯一元素。

#unique-id { background-color: yellow; } /* 选择id为'unique-id'的单个元素并设置背景色为黄色 */

四 通配符选择器 (Universal Selector)

• 使用*表示匹配页面中的所有元素。

* { margin: 0; padding: 0; } /* 给所有元素清除内外边距 */

五 后代选择器 (Descendant Selector)

• 使用空格分隔两个选择器，选取第一个选择器下的所有第二个选择器元素。

div p { text-decoration: underline; } /* 选择所有div元素内的所有段落，并给它们添加下划线 */

六 子选择器 (Child Selector)

• 使用>符号直接连接两个选择器，选取的是作为第一个元素直接子元素的第二个元素。

ul > li { list-style-type: none; } /* 选择所有ul元素的直接li子元素，并移除项目符号 */

七 并集选择器 (Multiple or Group Selector)

• 使用逗号 , 分隔多个选择器，可以同时定义一组选择器共有的样式。

h1, h2, h3 { font-family: Arial, sans-serif; } /* 选择所有的h1、h2和h3元素并应用相同的字体系列 */

八 属性选择器 (Attribute Selector)

• 根据元素的属性及属性值来选择元素。

a[target="_blank"] { color: blue; } /* 选择所有target属性值为"_blank"的链接，并设置文本颜色为蓝色 */

九 伪类选择器 (Pseudo-class Selector)

• 用于向某些选择器添加特殊状态或行为的样式，如鼠标悬停、访问过的链接等。

a:hover { text-decoration: underline; } /* 当鼠标悬停在链接上时，添加下划线 */

十 伪元素选择器 (Pseudo-element Selector)

• 用于选择元素的特定部分，例如首行、内容前/后等。

p::first-line { font-weight: bold; } /* 选择段落的第一行并设置粗体 */

十一 总结

这些选择器可以根据需要组合使用，以精确地定位和样式化HTML文档中的元素。