CSS选择器
常用选择器类型：
类型选择器|元素选择器|标签选择器通配符选择器ID 选择器类选择器|类选择器属性选择器伪类选择器伪元素选择器后代选择器后代选择器相邻兄弟选择器通用兄弟选择器注意：选择器可以组合使用！
选择器列表
如果您有多个使用相同样式的CSS 选择器，那么可以将这些单独的选择器混合到一个“选择器列表”中，以便将规则应用于所有单独的选择器，如下所示：
h1, h2 {
颜色：蓝色；
}
1、 类型选择器元素选择器 标签选择器
匹配node节点名称之间的元素。
因此，单独使用时，在查找特定类型的元素时，元素选择器将匹配文档中该类型的所有元素。
例子：
.html
我是标题
.css
h1 {
.
}h1 { } 是类型选择器。直接通过HTML 标签名称匹配。
2、通配选择器
在CSS 中，星号() 是通配符选择器。它可以匹配任何类型的HTML 元素。
当与其他简单选择器一起使用时，省略通配符选择器将具有相同的效果。例如，*.warning 和.warning 具有完全相同的效果。
在CSS3 中，星号(*) 可以与命名空间结合使用：
ns|*- 将匹配ns 命名空间下的所有元素*|*- 将匹配所有命名空间下的所有元素|*- 将匹配所有没有命名空间的元素不建议使用通配符选择器，因为它的性能最低CSS 选择器。
3、ID选择器
在HTML 文档中，CSS ID 选择器将根据元素ID 属性中的内容来匹配元素。元素ID 属性名称必须与选择器中的ID 属性名称完全匹配，此样式声明才能生效。
例子：
.html我是一段
.css
#p1 {
.
}#p1 { } 偶数ID 选择器。在HTML标签元素中，需要添加属性id="."，该属性需要用于匹配。
4、Class选择器 类选择器
在HTML 文档中，CSS 类选择器根据元素的class 属性中的内容来匹配元素。
类属性被定义为以空格分隔的项目列表。在这组类名中，必须与类选择器中的类名完全匹配，此样式声明才能生效。
例子：
.html我是一段
.css
.p1 {
.
}.p1{ } 是类选择器。在HTML标签元素中，需要添加属性class="."，并且需要使用.匹配。
5、标签属性选择器 属性选择器
CSS 属性选择器通过现有属性名称或属性值来匹配元素。
语法：
[attr]：表示具有名为attr 的属性的元素。
[attr=value]：表示属性名为attr且属性值为value的元素。
[attr~=value]：表示具有名为attr的属性的元素，该属性是一个以空格分隔的值列表，其中至少有一个是value。
[attr|=value]：表示具有名为attr的属性的元素。属性值为“value”或以“value-”为前缀。一个典型的应用场景是匹配语言缩写代码。 （例如，zh-CN、zh-TW 可以使用zh 作为值）。 （“-”是连字符，Unicode 编码为U+002D）。
[attr^=value]：表示属性名为attr的元素，属性值以"value"开头。
[attr$=value]：表示属性名为attr的元素，属性值以"value"结尾。
[attr*=value]：表示具有名为attr的属性的元素，并且该属性值至少包含一个"value"值。
[attr 运算符值i]：在属性选择器的右方括号前添加一个空格分隔的字母i（或I），以在匹配属性值时忽略大小写（支持ASCII 字符范围内的字母）。
[attr操作符值s]：在属性选择器的右方括号前添加一个空格分隔的字母s（或S），使属性值区分大小写（支持ASCII字符范围内的字母）。
例子：
.html 百度搜索百度搜索元素a[title] { 具有title属性
颜色：紫色；
}href属性存在且属性值与元素a匹配[href="https://www.baidu.com"] {
颜色：绿色；
}Element a[href*="XXX"] { 其中href 属性存在且属性值包含"XXX"
字体大小： 2em；
}元素a[href$=".com"] { 其中href 属性存在且属性值以".com" 结尾
字体样式： 斜体；
} 存在class 属性且属性值包含"logo" 的元素，以空格分隔a[class~="logo"] {
内边距： 2px；
}
多语言属性
示例：
将所有包含lang属性的元素的文本重置为bolddiv[lang] {
字体粗细：粗体；
}将所有语言为美式英语的元素的文本颜色设置为蓝色div[lang~="en-us"] {
颜色：蓝色；
}将所有语言为葡萄牙语的元素的文本颜色设置为绿色div[lang="pt"] {
颜色：绿色；
}将所有语言为中文的元素的文本颜色设置为红色，无论是简体中文(zh-CN) 还是繁体中文(zh-TW) div[lang|="zh"] {
颜色：红色；
}将所有data-lang属性值为"zh-TW"的元素的文本颜色设置为紫色div[data-lang="zh-TW"] {
颜色：紫色；
}注意：与JS 不同，CSS 可以直接使用连字符的属性名称，而无需使用双引号。
6、伪类选择器
CSS 伪类是添加到选择器的关键字，用于指定要选择的元素的特殊状态。如导航历史记录(:visited)、内容状态(:checked)、鼠标位置(:hover)。
例子：
.html百度.css
a:悬停{
.
}a:hover{ } 是伪类选择器。 a:hover{ } 表示鼠标指针悬停在标签上时需要显示的样式。
标准伪类索引
:active: 匹配用户激活的元素。它允许页面在浏览器检测到激活时给出反馈。与鼠标交互时，它表示用户按下按键和释放按键之间的时间。
一般用在and 元素中。该伪类的一些其他合适的对象包括包含激活元素的元素，以及可以通过其关联标签激活的表元素。
此样式可能会被稍后声明的其他与链接相关的伪类覆盖，包括：link、hover 和：visited。为了保证样式生效，active样式需要放在所有链接相关样式之后。
该链路伪类序列称为LVHA序列：link—:visited—:hover—:active。
例子：
a:link { color: 蓝色； } /* 未访问的链接*/
a:visited { color: 紫色； } /* 访问过的链接*/
a:hover { background: 黄色； } /* 用户鼠标悬停*/
a:active { color: 红色； } /* 激活链接*/
p:active {background: #eee; } /* 激活段落*/
表格：active {
颜色：红色；
}:hover：当用户使用定点设备虚拟地指向某个元素（而不激活它）时适用。可用于任何伪元素，遵循LVHA 顺序。
例子：
可以使用：hover 伪类创建复杂的级联机制。例如，常见用途是创建纯CSS 下拉按钮（不使用JavaScript）。
.css
div.菜单栏ul ul {
显示：无；
}
div.menu-bar li:hover ul {
显示：块；
}
.htmlMenuLinkSubmenuSubmenuLinkLinkLinkLink链接代码分析：
在阅读此示例之前，您应该首先熟悉后代选择器、后代选择器和CSSblock 属性。
注：hover触摸屏有问题，基本无法使用。hover 伪类在不同浏览器上的行为有所不同。
:focus伪类选择器往往伴随着：hover伪类选择器，它们的顺序需要根据你想要达到的效果来确定。
:link：用于选择元素之间的链接。它将选择所有链接尚未访问，包括那些已被赋予其他伪类选择器的链接（例如：hover，等）
遵循LVHA 测序。
例子：
a:链接{
颜色： 石灰色；
}:visited：表示用户访问过的链接。出于隐私原因，使用此选择器可以修改的样式非常有限。
遵循LVHA 测序。
例子：
a:访问过{
颜色：绿色；
限制：出于隐私原因，浏览器严格限制您可以应用此伪类的样式以及如何使用它们：https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
:focus：表示获得焦点的元素（例如表单输入）。当用户单击或触摸元素或通过键盘的“tab”键选择它时触发。
例子：
输入：焦点{
颜色：红色；
}:focus-visible：可以根据用户的输入方式（鼠标vs 键盘）有效地显示不同形式的焦点。当元素与：focus 伪类匹配并且客户端(UA) 启发式引擎决定焦点应该可见时（在这种情况下，许多浏览器默认显示“焦点框”），:focus-visible伪类生效。
.css
输入，按钮{
边距： 10px；
}
.focus-only:focus {
轮廓： 2px 纯黑色；
}
.focus-visible-only:focus-visible {
轮廓： 4px 虚线暗橙色；
}
.html
默认样式
: 仅限焦点
:focus-visible only 键盘选择： 鼠标选择： Firefox 通过旧的前缀伪类：-moz-focusring 支持类似的功能。
:焦点内：any-link：blank：checked：default：define：dir（.）：disabled：drop：放弃：empty：enabled：first：first-child：3 3360第一个类型：全屏：有（.）： host： host（.）： host-context： indetemination：in-range：invalid：3:is（.） .):nth-child(.):nth-col(.):nth-last-child:nth-last-col(.):nth-last-of-type( .):第n个类型：唯一子项：唯一类型：可选：超出范围：过去：显示占位符：只读：读写：必需：右：根：范围：目标：target-within:target-invalid:user-invalid:valid:where: 太多了，稍后更新。有兴趣的话可以去看看https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
7、伪元素选择器
伪元素是附加到选择器末尾的关键字，允许您修改所选元素特定部分的样式。
示例：first-line 伪元素可以更改段落中第一行文本的样式。
.csss
p:一线{
颜色：蓝色；
文本变换：大写；
}注意：选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基选择器之后。
根据规范，应使用双冒号（:）而不是单冒号（:）来区分伪类和伪元素。
不过，由于旧版本的W3C规范并没有做出特殊的区分，目前大多数浏览器都支持使用这两种方法来表示伪元素。
规范定义的伪元素
:之后（:之后）：背景：之前（:之前）：提示：提示区域：第一个字母（:第一个字母）：33 360:第一行（:第一行）：文件选择器按钮：语法错误：标记：部分（.）：占位符：选择：slotted（）：拼写错误：
:target-text：太多了。我稍后会更新它们。如果你有兴趣的话，你可以自己去看看。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/伪元素
8、后代选择器 （所有后代）
官方：后代组合器通常用单个空格（" "）字符表示，组合了两个选择器。
如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父元素、父元素的父元素、父元素的父元素的父元素等）元素，则将选择这些元素。使用后代组合器的选择器称为后代选择器。
即由空格分隔的两个选择器形成背景选择器。使用条件如下：
1、第二个选择器匹配的元素必须是第一个选择器匹配的元素的子元素 子子...元素，这样样式才会生效。 2、后代选择器匹配的元素样式显示在所有的第二个选择器匹配的元素上，无论在DOM中‘跳转’了多少次。例子：
.css
分区p{
颜色：绿色；
填充： 0px；
边距： 0px；
}
.html111111222222
333333444444
555555666666777777
影响：
9、子代选择器 (直接后代、 一级子元素)
当使用选择器分隔两个元素时，它只会匹配第一个元素的直接后代 (子元素）的第二个元素。
例子：
.css
跨度{背景颜色：白色； }
div 跨度{
背景颜色： DodgerBlue；
}
.htmlSpan 1. 在div.Span 中2. 在div.Span 中的span 中3. 根本不在div 中效果：
10、相邻兄弟选择器
选择器由两个选择器之间的+ 组合而成。
当第二个元素位于第一个元素之后的紧跟在且两个元素都是同一父元素的子元素时，将选择第二个元素。
例子：
.css
p + p {
颜色：红色；
填充： 0px；
边距： 0px；
}
.htmlfirst
第二
第三个孩子
第三个孩子
标题
四
五
六
效果：如果中间插入其他元素，会断掉的，但后续匹配的元素将继续按照规则设置样式。
11、通用兄弟选择器
兄弟选择器~，位置不需要紧邻，只需同级即可，A~B选择A元素之后所有同级的B元素。
例子：
.css
p ~ p {
颜色：红色；
填充： 0px；
边距： 0px；
}
.htmlfirst
第二
第三个孩子
第三个孩子
标题
四
五
六
如果你还想了解更多这方面的信息，记得收藏关注本站。
【全面解析与实战：CSS样式表设计技巧与应用】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
css 可以做很多事情啊！网页设计离不开它。
有16位网友表示赞同！
想让网站看起来更加美观，就必须学习 CSS。
有13位网友表示赞同！
css 真是一 门神奇的语言！
有5位网友表示赞同！
我一直觉得 css 很难学，但其实有很多学习资源可以帮助我们入门。
有8位网友表示赞同！
我一直在用 css 设计网页，感觉越来越上手了！
有13位网友表示赞同！
刚开始接触 css 的时候，总是会迷茫不知从何开始。
有10位网友表示赞同！
css 太棒了！可以让我的网页看起来更加专业。
有9位网友表示赞同！
学习 css 是网页设计必修课。
有8位网友表示赞同！
我想制作一个漂亮网站，需要先好好学习 CSS。
有19位网友表示赞同！
学习 css 可以让你更好地理解网页结构。
有8位网友表示赞同！
很多人都喜欢用 html 和 css 一起工作，他们互相配合才能造就美妙的网页。
有20位网友表示赞同！
我最近才开始接触网页设计，希望能更快地掌握 css 的技巧。
有15位网友表示赞同！
css 给了我们无限可能，可以创造出各式各样风格的网页。
有19位网友表示赞同！
学习 css 是一个循序渐进的过程，需要耐心地练习才能达到精通的地步。
有17位网友表示赞同！
我想试试用 css 自己设计一个网站的样子！
有9位网友表示赞同！
css 的语法看起来有点复杂，但我相信只要多练习就能掌握。
有11位网友表示赞同！
学习 css 不仅可以提升网页设计水平，还可以开拓未来的职业道路。
有14位网友表示赞同！
我发现有很多在线资源可以免费学习 css，很方便！
有7位网友表示赞同！
css 是一个非常有用的技能，无论你想从事什么工作都很有帮助
有9位网友表示赞同！