单个的选择器
元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{ } h1{ } div{ }
粒度太粗,会同时选择文档中的多个标签
id选择器
作用:根据元素的id属性值选择一个元素
语法:#id属性值{ }
例子:#box{ } #red{ }
注意:id名具有唯一值,不能重复使用
id选择器一般配合javascript一起使用
类选择器
作用:根据元素的class属性值选择一组元素
语法:.class属性值{ }
例子:.box{ } .red{ }
一般class属性用的多,id用的少
可以同时为一个元素指定多个class
<h1 class="blue abc"> 多个class之间使用空格隔开
通配选择器
作用:选中页面中的所有元素
语法:*{ }
复合选择器
1,交集选择器
1.将class为red的div字体大小设置为30px
同时要满足两个条件
div.red{
}
注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头
2,并集选择器
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{ }
例:#b1,.p1,h1,span,div,.red{ }
关系选择器
父元素,子元素,祖先元素,后代元素,兄弟元素
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素
例:div>span
后代元素选择器
作用:选中指定元素内的指定后代元素
语法:祖先 后代
例: div span{ }
选择下一个兄弟元素
语法:前一个+下一个
例:p+span{ }
选择下边所有的兄弟
语法:兄~弟
属性选择器
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性值$=属性值]选择属性值以指定值结尾的元素
[属性值*=属性值]选择属性值中含有某值的元素的元素
例:p[title]{ }
p[title=abc]{ }
p[title^=abc]{ }
p[title$=abc]{ }
p[title*=abc]{ }
<body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="defabc">儿童相见不相识</p>
<p title="defabchij">笑问客从何处来</p>