CSS 组合选择符
CSS 选择器规定了 CSS 规则会被应用到哪些元素上。
基本选择器
- 通用选择器（Universal selector）
选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。 语法： ns| | 例子：* 将匹配文档的所有元素。 - 元素选择器（Type selector）
按照给定的节点名称，选择所有匹配的元素。 语法：elementname 例子：input 匹配任何 元素。 - 类选择器（Class selector）
按照给定的 class 属性的值，选择所有匹配的元素。 语法：.classname 例子：.index 匹配任何 class 属性中含有 “index” 类的元素。 - ID 选择器（ID selector）
按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。 语法：#idname 例子：#toc 匹配 ID 为 “toc” 的元素。 - 属性选择器（Attribute selector）
按照给定的属性，选择所有匹配的元素。 语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。
后代选取器
举例说明:
div p
{
background-color:red;
}
子元素选择器
举例说明:
div>p
{
background-color:red;
}
相邻兄弟选择器
举例说明:
div+p
{
background-color:red;
}
后续兄弟选择器
举例说明:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
Original: https://blog.csdn.net/QYgujingjing/article/details/128697886
Author: 三季人 G
Title: CSS 选择器
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/811896/
转载文章受原作者版权保护。转载请注明原作者出处！