一、基础选择器
1、通配选择器
* {
border: solid;
}
/*匹配文档中所有标签：通常指html、body及body中所有显示类的标签*/
2、标签选择器
div { background-color: yellow; } /*匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span*/
3、类选择器
.red {
color: red;
}
/*匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配*/
4、id选择器
#div {
text-align: center;
}
/*匹配文档中所有拥有id属性且属性值为div的标签：如<div >*/
5、基础选择器的优先级
id选择器 > 类选择器 > 标签选择器 > 通配选择器
6、基础选择器总结
1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
* {
margin: 0;
}
2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
3.类选择器为布局首选(建议基本全用class选择器进行布局)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> /*基础选择器*/ /*1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)*/ /** { border: solid; }*/ /*2.标签选择器(标签名):匹配指定标签名的对应所有标签*/ div { width: 100px; height: 100px; background-color: red; } section { width: 200px; height: 200px; background-color: yellow; } /*3.类选择器(.):匹配指定类名对应的所有标签*/ .dd { font-size: 50px; } /*4.id选择器(#):匹配指定id名对应的唯一标签*/ /*html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个*/ #ele { color: blue; } </style> </head> <body> <div class="dd">d_1</div> <section>s_1</section> <div class="d" id="ele">d_2</div> <section class="dd">s_2</section> <span></span> </body> </html>