类型选择器(标签选择器) :以文档对象html中的标签作为选择符
标签{属性:属性值;} 例:div{width:200px;}
Class选择器(类选择器):想要区分某个标签的时,比如想要区分2个div。
单类选择器
<div class=“box”></div>
.Class名字{属性:属性值;}
.box{width:300px;}
注:多个class用一个样式,则将选择器用","隔开,且两个选择器之前都要加"."
多类选择器
calss属性可能不止包含一个单词,而是一串单词,各个单词之间用空格隔开。
与属性名出现的顺序没有关系:
例: class = "a b"和class = "b a"
可以写.a {} // 属性值含有a的
.b {} // 属性值含有b的
.a.b{} // 属性值含a又含b的
ID选择器:想要区分某个标签的时,比如想要区分2个div。
<标签 id=“box1”></div>
#ID名字{ 属性:属性值;}
#box1{width:200px;}
注意点:ID有唯一性,属性值只能是1个。
属性选择器
E[attr] :希望选择有某个属性的元素,而不论属性值是什么 例如:a[href]{color:red;}
E[attr="value"] :只选择有特定属性值的元素 例如: a[href="www.com"]{color:red;}
E[attr^="value"]:属性值是以value开头的
E[attr$="value"]:属性值是以value结尾的
E[attr~="value"] : 属性值是可以是单个值也可以是以空格隔开的一个词列表
注:当是一个词列表时,等号前面的“〜”必须写。
E[attr*="value"]:属性值含有value的 属性选择器()
派生选择器
后代选择器:用空格连接2个或多个选择器。空格的含义为:…的后代。多个选择器的情况如下: ul li li { ...}
a:hover img{...}
子元素选择器:子元素选择器和后代选择器不同,它只能选择某元素的直接后代,不能跨代选取,用法如下:ul > li { ...}
a:hover>img{...}
相邻兄弟选择器:选取的是紧跟在后面的兄弟元素。(同级的)
h1 + p { ...}
a:hover+img{...}
注:!important声明的优先级最高