CSS的选择器其实大类的话可以分为三类,即id选择器、class选择器、标签选择器。
用法如下:
#id名 { 属性名:属性值; }
. class名 { 属性名:属性值; }
后代选择器: 父代名 后代名 { 属性名:属性值; }
子代选择器: 父代名>子代名 { 属性名:属性值; }
群组选择器: #name1, .name2, #name div { 属性名:属性值; }
伪类选择器: name:伪类
通用(通配符)选择器: * { 属性名: 属性值; }……
用法如下:
#id名 { 属性名:属性值; }
. class名 { 属性名:属性值; }
标签名 { 属性名:属性值; }
后代选择器: 父代名 后代名 { 属性名:属性值; }
子代选择器: 父代名>子代名 { 属性名:属性值; }
群组选择器: #name1, .name2, #name div { 属性名:属性值; }
伪类选择器: name:伪类
通用(通配符)选择器: * { 属性名: 属性值; }……
1. 后代选择器和子代选择器的区别:
举例说明:
有html布局如下:
对应的html代码的文档树结构如图:
然后我们在<style>标签里增加一个子代选择器
.mainDiv > div{
background-color: green;
}
让子代的背景色都为绿色
修改后保存用浏览器打开如图,可见【儿子】那个div已经变为绿色
然后我们去掉子代选择器,添加一个后代选择器
.mainDiv div{
background-color: red;
}
让后代的背景色都为红色
修改后保存用浏览器打开如图,可见【儿子】和【孙子】的div已经变为红色
现在我们再看看把上面的子代和后代样式都同时应用,效果如图。
经过上面的结果展示,我们能得到结论。
子代选择器:只对应用对象的直接相应子节点有效。如实例代码中的儿子div。
后代选择器:对应用对象内的所有相应子节点都有效。如实例中的儿子div和孙子div。
2. CSS选择器里,“元素.类名” 与“类名.元素”有什么区别?
元素.类名
p.abc{
color:red;
}
表示:类名是abc的标签p的颜色是red
类名.元素
.abc p{
color:red;
}
表示:类名abc的任何标签旗下的p标签颜色是red。