目录
1.1ID选择器
ID选择器使用"#"号加ID名称xxx来表示,用来选择HTML中的id=”xxx“的DOM元素
<div id="app">我是id选择器</div>
当我们想给给个元素应用样式时候,例:
#app{
color:red;
}
1.2类选择器
类选择器我们是用“.”加上class名称来表示,用来选择HTML中的class="xxx"的DOM元素,例:
<li class="list-item">1</li>
<li class="list-item">2</li>
<li class="list-item">3</li>
1.3通配符选择器
通配符选择器使用*来选择页面的所有元素
*{
margin:0;
padding:0;
}
tip:由于通配选择器要把样式覆盖到所有的元素上,因此它的效率不会高,通常用于页面样式初始化的设置
1.4标签选择器
标签选择器就是选择HTML中某一类的标签,直接使用HTML中的标签名作为选择器的名称
div{
color:red
}
1.5属性选择器
属性选择器通过DOM的属性来选择DOM节点,属性选择器用括号“[ ]”包裹,例如下面代码只能选择a标签并且带有href属性的元素:
<style>
a[href]{
color:red
}
</style>
<body>
<a href="#">123</>
</body>
2.1后代选择器
后代选择器是用空格分隔多个选择器组合,它的作用是在A选择器的后代中找到B选择器所指的元素,如:
ul li{
color:red
}
2.2子元素选择器
子元素选择器和后代选择器类似,不过子元素只找子元素,就是父亲只找儿子不会找孙子,不会把所有的后代都找一边遍
ul>li{
color:red
}
2.3相邻兄弟选择器
相邻兄弟选择器是用来选取某个元素紧邻的兄弟元素,它的语法是“选择器A + 选择器B”
例如下面代码,只能选中h1相邻的div这个元素,不选中h1自身。
<style>
h1+div{
color: aqua;
}
</style>
<body>
<h1>1</h1>
<div>2</div>
<span>3</span>
</body>
2.4通用兄弟选择器
通用兄弟选择器和相邻兄弟选择器很相似,它的语法是“选择器A~选择器B”,会匹配选择器A后面所有符合选择器B的元素
例如下列代码只会选中2和4得到div,也不会选中h1本身
<style>
h1~div{
color: aqua;
}
</style>
<body>
<h1>1</h1>
<div>2</div>
<span>3</span>
<div>4</div>
</body>
2.5交集选择器
交集选择器是为了找两个或多个选择器的交集,用法就是把两个选择器放在一起,语法“选择器A选择器B”,简单来说,就是这个元素同时拥有.box01和.box02这类名
<style>
.box01.box02{
olor: red;
}
</style>
<body>
<h1 class="box01 box02">1</h1>
<div class="box01">2</div>
<span>3</span>
<div>4</div>
</body>
tip:在写两种类名时候不能有空格,其他的也和类名一样,否则会变成后代选择器
2.6并集选择器
并集选择器是为了合并类型的样式,可以是选择器不用单样式相同的CSS语法块合并。并集选择器就是多个逗号分隔多个选择器。
简单来说就是选择所有h1,h2,div,span所有标签
h1,h2,div,span{
color:red
}
3.1动态伪类选择器
//链接未访问
a:link{
color:red
}
//链接已访问
a:visited{
color:#333333
}
//链接鼠标滑过---可以用在除a标签之外的其他标签
a:hover{
color:red
}
// 鼠标按下(鼠标按下未抬起的时候)
a:active{
color:red
}
权重
内嵌样式----1000
标签选择器、伪元素----0001
ID选择器---0100
class选择器、属性选择器、伪类选择器---0010
通配符、子选择器、后代、相邻、一般----0000
继承没有权重
包含选择器:所包含结构权重之和