常用选择器
1.元素选择器
p{
color=red;
}
h1{
color=red;
}2.id选择器
根据id属性选中一个元素
<style>
#red{
color:red;
}
</style><body>
<p id="red">
</p>
</body>3.class选择器
class可重复，id不可重复
<style>
.blue{
color:blue;
}
</style><body>
<p class="red">
</p>
</body>复合选择器
1.交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
<style>
.red{
color:red;
}
div.red{
font-size:30px;
}
.a.b.c{
color:blue;
}
</style><body>
<div class="red">
我是div
</div>
<p class="red">
我是p
</p>
<div class="red2 a b c">
我是div2
</div>
</body>下面是这段代码的图片：
选择器分组
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器n{}
<style>
h1,span{
color:green;
}
</style>关系选择器
父元素：直接包含子元素的元素叫做父亲
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素
兄弟元素：拥有相同父亲元素是兄弟元素
下面都是在这个html进行的例子：
<body>
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p元素的span</span>
</p>
<span>我是div中的span元素</span>
</div>
</body>1.子元素选择器
作用：选定父元素的指定子元素
语法：父元素>子元素（可用class选择元素）
例子：为div的子元素span设置一个字体颜色红色（为div直接包含的span设置一个字体红色）
<style>
div>span{
color:red;
}
</style>
2.后代选择器
作用：选中指令元素内的指定后代元素
语法：祖先 后代
<style>
div span{
color:red;
}
</style>
3.兄弟选择器
语法：前一个+子元素(找紧挨着的元素)（选择下一个兄弟）
<style>
p+span{
color:red;
}
</style>
选择下面所有兄弟：
<style>
p~span{
color:red;
}
</style>
属性选择器
语法：[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头元素
[属性名$=属性值]选择属性值以指定值结尾元素
[属性名*=属性值]选择属性值中含有某值的元素
<style>
p[title=abc]{
color:red;
}
</style><body>
<p title="abc">
1111
</p>
</body>伪类选择器
伪类用来描述一个元素的特殊状态
比如：第一个元素、被点击的元素，鼠标移入的元素
伪类一般：开头
1.:first-child
第一个子元素
<style>
ul>li:first-child{
color:red;
}
</style><body>
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</body>
2.:last-child
最后一个子元素
3.nth-child(n)
选中第n个子元素
nth-child(2)选第二个子元素
特殊值：
n 第n个 n的范围：0到正无穷
2n（even） 偶数位元素
2n+1（odd）奇数位元素
4.:first-of-type :last -of-type :nth-of-type
这几个伪类的功能和上述的类似，不通点是他们是在同类型中进行排序
<style>
ul>li:first-of-type{
color:red;
}
</style><body>
<ul>
<span>11</span>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</body>
5.:not()
否定伪类，将符合条件元素从选择器去除
<style>
ul>li:not(:nth-child(3)){
color:red;
}
</style>将第三个子元素去除掉，其他全为红色
超链接伪类
1.:link
用来表示没访问过的链接（正常的链接）
2.:visited
用来表示访问过的链接
3.:hover
表示鼠标移入状态
4.：active
表示鼠标点击
伪元素选择器
伪元素通常使用::开头
1.::first-letter
表示第一个字母
<style>
p::first-letter{
font-size:90px;
}
</style>会使文本第一个字母放大
2.::first-line
表示第一行
3.::selection
表示选中的内容（需要鼠标拖动）
4.::before
元素的开始的位置，必须结合content属性使用
<style>
div::before{
content:'abc';
color:red;
}<body>
<div>
hello
</div>
</body>
5.::after
元素的最后的位置，必须结合content属性使用
