css选择器
四种常用的选择器
1、元素选择器(标签选择器)
作用:选中对应标签的内容
语法:标签名{css样式····}
例子:h1{},h3{},p{}
2、id选择器
作用:选中对应id属性值的内容
语法:#id属性值{}
例子:#p1{},#p2{}····
注意:id属性值不能重复使用
3、class选择器
class选择器的用法跟id选择器是一样,只不过class属性值可以重复使用
作用:选中对应class属性值的内容
语法:.class属性值{}
注意:class属性值可以起多个,中间用空格隔开即开
例子:.s1{},.ss{},.pp{}
4、通配选择器
作用:选中所有的标签,进行设置
语法:*{}
复合选择器两种 (交集选择器,并集选择器)
1、交集选择器
作用:选中同时符合多个条件的内容
语法:选择器1选择器2选择器3····{}
注意:如果选择器当中有元素选择器,元素选择器必须要放在最前面
例子:p#p1.pp{},div.ss{}
2、并集选择器(群组选择器)
作用:同时选中对应的内容
语法:选择器1,选择器2,选择器3····{}
例子:.red,#red1,div,p{}
关系选择器
1、子元素选择器
作用:通过指定的父元素找到指定的子元素
语法:父元素>子元素{}
例子:#red>.green{}, .pp>em{}
2、后代选择器
作用:通过指定的祖先元素找到指定的后代元素
语法:祖先元素 后代元素{}
例子:.class .red{},#red p{}
3、下一个兄弟选择器
作用:通过指定的兄长找到紧挨着我的一个兄弟
语法:兄+弟{}
4、选择下面所有的兄弟(前面的不选)
作用:通过指定的兄长找到下面所有的兄弟
语法:兄~弟{}
例子:#red~.p1{}
属性选择器
通过确定属性以及属性值来选中对应的内容,例如id属性,class属性,src属性,href属性
语法:[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素