CSS选择器总结

css选择器总结：

1.常用选择器 .
2.复合选择器
3.关系选择器
4.属性选择器
5.伪元素选择器选择器

1.常用选择器

1.id选择器：例如：<div id="a">我是a</div>（定义一个id为a的div）.a{color: red:}(将“我是a字体”颜色变为红色)
2.类选择器：用class=""来定义，用.类元素{}来使用
3.通配选择器：将所有的标签改变语法*{}

2.复合选择器

1.交集选择器：语法：选择器1选择器2{} 例如：`div.cc{ color=“red”}`的意思是在拥有div和cc的标签变成red
2.并集选择器：语法：选择器1，选择器2，选择器3{}

3.关系选择器

1.父元素 > 子元素{}（选择父元素中的子元素）
2.祖先元素 后代元素 {}（选择后代元素）
3.兄弟元素 + 兄弟元素（选择下一个兄弟元素）
4.兄弟元素 ~ 兄弟元素{}（选择下面的所有兄弟）

4.属性选择器

<div title="sadadd">dasdad</div>
<div title="sadass">dasdad</div>
<div title="sadaaa">dasdad</div>
<div title="sadass">dasdad</div>
<div title="sadass">dasdad</div>
1.[属性名] 选择还有指定属性的元素 例如[title]选择title属性的元素
2.[属性名=属性值] 选择含有指定属性且和属性值的元素 例如[title=dasdad]选择带有tilte且属性值为dasdad的元素
3.[属性^=属性值] 选择属性值以指定值开头的元素
4.[属性$=属性值] 选择属性值以指定值结尾的元素
5.[属性*=属性值] 选择属性值中含有某值的元素

5.伪元素选择器

1.选择当前元素的第一个的子元素：:first-child
2.选择当前元素的最后一个的子元素:last-child
3.选择当前元素的第n个的子元素:nth-child(n)
有趣的应用：
（1）:nth-child(2n)选择偶数位元素也可以将2n替换为even
（2）:nth-child(2n+1)选择奇数位元素也可以将2n+1
（3）:nth-child(n)选择从0到正无穷（选择所有的）
注意以上是对所有的子元素进行排序
4.对同类型的子元素进行排序：
:first-of-type
:last-of-type
:nth-of-type
5.:not()将符合条件的的元素从中去除 例如：:not(nth-child(3)) 将所有子元素的第三个去掉
6.超链接的伪类：
(1):link选择没有访问过的链接
(2):visited选择访问过的链接（一般不进行设置)
(3)hover选择鼠标移入的元素(可对其他元素进行设置)
(4)avtive选择鼠标点击的元素(可对其他元素进行设置)