HTML5+CSS3学习笔记（二）

常用选择器

元素选择器

作用：根据标签名来选择指定元素
语法：标签名{}
例子：p{} div{}

p{
	color:red
}
div{
	background-color:red
}

id选择器

作用：根据元素id选择一个元素
语法：#id{}

#id{
	color:red
}

类选择器

可以通过class属性为元素分组（可以同时为一个元素设置多个分组，用空格隔开class=“a b c”)
语法： .classname

.class{
	color:red
}

通配选择器

作用：选中所有元素
语法：*{}

*{
	color:red
}

复合选择器

交集选择器

作用：选择同时符合多个条件的元素
语法：选择器1选择器2选择器3{}

/*即是div,class名称又为class1*/
div.class1{
	color:red
}

并集选择器

作用：选择所有符合条件的元素
语法：选择器1，选择器2，选择器3{}

div,.class1{
	color:red
}

关系选择器

关系：父元素，子元素，祖先元素，后代元素，兄弟元素

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素{}

div > .class1{
	color:red
}

后代元素选择器

作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}

div .class1{
	color:red
}

兄弟元素选择器

选择下一个兄弟：前一个 * 后一个{}
选择下面所有兄弟：兄 - 弟{}

/*选择下一个兄弟元素*/
div * p{
	color:red
}
/*选择下面所有兄弟元素*/
div - p{
	color:red
}

属性选择器

语法：
[属性名]选择含有指定属性名的元素
[属性名=属性值]选择含有指定属性名和属性值的元素
[属性名^=属性值]以特定属性值开头的元素
[属性名&=属性值]以特定属性值结尾的元素
[属性名*=属性值]含有特定属性值的元素

伪类选择器

伪类表示一个元素的特殊状态，例如：第一个子元素，被点击的元素，鼠标移入的元素
伪类一般情况下使用 : 开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素 （特殊：2n偶数位子元素，2n+1奇数位子元素）
:not(nth-child(3))除了第三个子元素

超链接的伪类

1.没有访问过的连接 :link
2.访问过的连接 :visited （由于隐私原因只能改颜色）
3.鼠标移入的状态 :hover
4.鼠标点击的状态 :active

伪元素

伪元素表示页面当中一些特殊的不真实存在的元素
::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before
::after

div::before{
	color:red,
	content:'a'
}
div::after{
	color:red,
	content:'a'
}