概述
选择器可分为基础选择器和复合选择器两大类。
基础选择器由单个选择器组成
基础选择器包括:标签选择器、类选择器、id选择器、通配符选择器
标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定同一的CSS样式。
语法:
标签名 {
属性1: 属性值1;
…
}
效果:
<div>div1</div><div>div2</div><p>p1</p><p>p2</p><span>span1</span><span>span2</span><ul><li>li1</li><li>li2</li></ul>
CSS:
/* 标签选择器 */div {height: 50px;width: 200px;background-color: wheat;}span {background-color: pink;}p {color: powderblue;}ul li {width: 100px;border: 1px solid plum;}
类选择器
如果想差异化选择不同的标签,单独选一个或者几个标签,可以使用类选择器
类选择器在HTML中以class属性表示,在CSS中以 “.” 号显示。
语法:
.类名 {
属性1: 属性值1;
…
}
效果:
<div class="top">div1</div><div class="bottom red">div2</div><span class="top">span1<span><span class="bottom">span1<span><ul><li class="red">li1</li><li>li2</li></ul>
CSS:
/* 类选择器 */.top {background-color: pink;}.bottom {background-color: powderblue;}.red {color: red;}
ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id元素,在CSS中以 “#” 号显示。
语法:
#id名 {
属性1: 属性值1;
…
}
效果:
<div id="top">div1</div><div id="bottom">div2</div><ul><li id="red">li1</li><li>li2</li></ul>
CSS:
/* ID选择器 */#top {background-color: pink;}#bottom {background-color: powderblue;}#red {color: red;}
id选择器和类选择器的区别:
类选择器(class)可以被一个或者几个标签使用id选择器不能被重复使用id选择器和类选择器最大的区别在于使用次数上类选择器在修改样式中使用最多,id选择器一般用于页面唯一性的元素,通常和JavaScript搭配使用
通配符选择器
在CSS中,通配符选择器使用 “*” 号定义,它表示选取页面中的所有元素(标签)
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用,通常用于清除所有元素的内外边距
* {padding: 0;margin: 0;}
语法:
* {
属性1: 属性值1;
…
}
效果:
<div>div1</div><span>span1</span><ul><li>li1</li><li>li2</li></ul>
CSS:
/* 通配符选择器 */* {color: red;}