三种基本选择器
- 标签选择器
- 类选择器
- id选择器
标签选择器：使用标签，例如<p>标签，表示选中所有的<p>标签
p{
color:red;
}
**类选择器：**使用该标签会选中所有带有class标记的元素
.tag{
color:red;
}
<p class="tag">
示例1
</p>
<p class="tag">
示例2
</p>
**id选择器：**只能有一个唯一的id，选中指定的id
#tag{
color:red;
}
<p id="tag">
示例1
</p>
<p class="tag">
示例2
</p>
层次选择器
- 后代选择器
- 子代选择器
- 相邻兄弟选择器
- 通用选择器
**后代选择器：**选择后代的所有元素
body p{
color:red;
}
<body>
<p>
<ul>
<li>示例1</li>
<li>示例2</li>
<li>示例3</li>
</ul>
</p>
<p>
<ul>
<li><p>示例4</p></li>
</ul>
</p>
<p>示例5</p>
</body>
示例4和示例5会变成红色，而被<p>标签包裹的无序列表不会变红色
**子代选择器：**只选择后代中的第一代
body>p{
color:red;
}
<body>
<p>
<ul>
<li>示例1</li>
<li>示例2</li>
<li>示例3</li>
</ul>
</p>
<p>
<ul>
<li><p>示例4</p></li>
</ul>
</p>
<p>示例5</p>
<p>示例6</p>
</body>
示例5和示例6都会变红色，因为他们是body的第一代
**相邻兄弟选择器：**只选择同辈相邻的一个兄弟，而且是在选择元素后面的兄弟，不会选择前面的兄弟
.tag + p{
color: red;
}
<body>
<p class="tag">
<ul>
<li>示例1</li>
<li>示例2</li>
<li>示例3</li>
</ul>
</p>
<p>弟弟</p>
<p>
<ul>
<li><p>示例4</p></li>
</ul>
</p>
<p class="tag">示例5</p>
<p>示例6</p>
</body>
示例6会变红色，但是弟弟不会变红色，因为弟弟不在tag标记的相邻位置
**通用选择器：**选择后面所有的兄弟，但是不选择前面的兄弟
.tag ~ p{
color: red;
}
<body>
<p class="tag">
<ul>
<li>示例1</li>
<li>示例2</li>
<li>示例3</li>
</ul>
</p>
<p>二哥</p>
<p>弟弟</p>
<p>
<ul>
<li><p>示例4</p></li>
</ul>
</p>
<p>示例5</p>
<p>示例6</p>
</body>
二哥、弟弟、示例5、示例6都变红，因为他们都是同一辈下的兄弟
结构伪类选择器
ul li:first-child{
background: red;
}
在ul的所有后代li中选择第一个孩子
p:nth-child(1){
background: red;
}
在p的父级中，所有的后代的第一个后代是p的话被选中，但是在所有后代中，其他不是p的也会被算在其中，就是说，在后代中第一个不是p，第二个是p，就不会选中p
p:nth-of-type(1){
background: blue;
}
在p的父级中，所有的p后代中第一个后代被选中，即使后代中有不同的标签，用type就不会算其他的标签，只算p的第一个
属性选择器
标签名+[属性]{样式}
例如：a[id]{ color:red;}，在所有a标签中，带有id属性的，都会选中；
a[id=tag]{color:red;}，在所有a标签中，带有id属性且等于tag的，会被选中；tag不用加双引号。
a[class=“tag”]{color:red}，在所有a标签中，带有class属性且等于tag的，都会被选中；tag要加双引号。
进行判断时：
= 是绝对等于，必须全部都相同；
*= 是包含等于，只要有一部分相同就可以；
^= 是以这个开头的都可以；
$= 是以这个结尾的都可以；