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'
}