css 伪类 伪元素 选择器

伪类： 表示某种状态

a标签
a:link{
	表示普通链接（没有访问过 通过历史记录判断）
}
a:visited{
	表示访问过的链接 由于涉及隐私问题 所以使用visited只能设置字体颜色
}

hover 及 active 可对其他标签使用
a:hover{
	鼠标停留
}
a:active{
	鼠标点击
}

input:focus{
	获取焦点
}

第一个子元素
ul > li:first-child{

}

最后一个子元素
ul > li:last-child{

}

选中第n个子元素
	特殊值：
		n: 第n个 n的范围 0到正无穷
		2n 或 even: 表示选中偶数位的元素
		2n+1 或 odd: 表示选中奇数位的元素
ul > li:nth-child(3){

}

这几个伪类都是根据所有子元素进行排序的

:first-of-type
:last-of-type
:nth-of-type()
功能跟上述的类似 不同点时他们是在同类元素中进行排序

 ul > li:first-of-type{

}

:not() 否定伪类
将符合条件的元素从选择器中去除


ul > li:not(:nth-child(3))}{
	表示除了第三个
}

伪元素 表示某些位置

p::first-letter{
	第一个字符
}

p::first-line{
	第一行
}

before,after 一般都需要结合content一起使用
表示元素最前面/最后面的部分 无法选中
p::before{
	content:"before",
}

p::selection{
	为p标签中选中的内容使用样式
	火狐中如果不支持 写成 p::-moz-selection
}

选择器

1.元素选择器
语法 标签名{}
p{

}
2.id选择器 通过元素的id属性选中唯一的一个元素
语法 #id{}
#p1{

}
3.类选择器 通过元素的class属性选中一组元素
语法 .class{}
.p2{

}

4.通配选择器
可以选中页面中的所有元素
语法 *{}

选择器分组
通过选择器分组可以选中多个选择器对应的元素 并集
语法：选择器1,选择器2,选择器n{}
#p1,.p2,h1{}

复合选择器（交集选择器）
可以选中同时满足多个选择器的元素 交集
语法 选择器1选择器2选择器n{}
h1#p1.p2{}

关系选择器：

1.子元素选择器
选中指定父元素的指定子元素
语法：父元素 > 子元素
div > span{}
div.box > span{}

2.后代元素选择器
选中指定元素内的指定后代元素
语法 ：祖先 后代
div span{}

3.选择下一个兄弟
紧挨着的一个
语法： 前一个 + 下一个
p + span{
	表示选择 p 后面的一个 span
}

4.选择下边所有的兄弟
语法： 前一个 ~ 下一个
p ~ span{
	表示选择 p 后面的所有 span
}

属性选择器
比如 <p title="abc">abcdefg</p>

p[title]{
	表示有title属性的p标签
}

p[title=abc]{
	表示 title属性为abc 的p标签
}

p[title ^= abc]{
	表示以abc开头的
}

p[title $= abc]{
	表示以abc结尾的
}

p[title *= abc]{
	表示title属性含有 abc的
}

选择器的权重
当我们通过不同的选择器， 选中相同的元素， 并且为相同的样式设置不同的值时，就会发生样式冲突。

此时应用那个央视由选择器的权重（优先级）决定

选择器的权重
--内联样式 即style属性 1000
--id选择器             100
--类和伪类选择器        10
--元素选择器            1
--通配选择器            0
--继承的样式            没有优先级

比较优先级时， 需要将所有的选择器的优先级进行相加计算， 最后优先级越高， 则越优先显示（分组选择器时单独计算的 比如：div,p.span{}）
比如 div#box1{}

选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器

如果优先级计算后相同 此时使用写在后面的样式

可以在某一个样式的后面添加 !important,则此时改样式会获取到最高的优先级，超过内联样式。在开发中 慎用