选择器(上)
1 通配符(*)、元素 、类class(.)、id(#) 选择器
1.1 通配符选择器
可以选中所有HTML元素
一般用于清除样式
*{
color:blue
}
<div>怎么能让一滴水永不干涸,就是让他流入大海</div>
1.2 元素选择器
为页面中某种元素统一设置样式,元素选择器无法实现差异化设置,如下述所有div元素的样式都相同
div {
color:blue
}
<div>怎么能让一滴水永不干涸,就是让他流入大海</div>
1.3 类选择器
选中所有特定类名(class值)的元素,使用频率很高
注意:class是自定义的,按照标准,不要使用纯数字,不要使用中文,尽量使用英文与数字的组合,若由多个单词组成,使用-做连接,命名要有意义,做到见名知意
.box {
color:blue
}
<div class="box">怎么能让一滴水永不干涸,就是让他流入大海</div>
1.4 id选择器
选中特定id值的那个元素(唯一的)
注意:id属性值,尽量由字母,数字,下划线(_),短杠(-)组成,尽量不要使用中文,不要使用纯数字,最好以字母开头,不要包含空格,区分大小写,
id属性值在整个页面中必须唯一,不能重复,若重复,则后面的id属性值会覆盖前面的id属性值,一个元素只能拥有一个id属性,一个元素可以同时拥有id和class属性
#box {
color:blue
}
<div id="box">怎么能让一滴水永不干涸,就是让他流入大海</div>
以上效果如下图:
2 交集与并集选择器
2.1 交集选择器(且)
选中同时符合多个条件的元素
交集选择器中不可能出现两个元素选择器,因为一个元素,不可能既是p元素,又是span元素
交集选择器,选择器与选择器间没有空格,后代选择器有空格
p.sentence {
color: blue;
}
<p class="sentence">若怨懑浪的冲击,便谛听风的絮语</p>
效果如下图:
2.2 并集选择器 (或)
选中多个选择器对应的元素,又称分组选择器
通常用于集体声明,可以缩小样式表体积
.sentence,
#box,
h3 {
color: blue;
}
<p class="sentence">无需按图索骥,蹊径亦有烟火绚丽</p>
<div id="box"> 藩篱遮不尽艳阳,囹圄关不住向往</div>
<h3>空调吹多了得病,闲事管多了要命</h3>
效果如下图:
3 后代、子代、兄弟、属性 选择器
3.1 后代选择器
选中指定元素中,符合要求的后代元素 先写祖先,再写后代
div span {
background-color:aquamarine;
}
<div>
<p><span>最好的沟通,是你需要,而我懂你</span></p>
</div>
效果如下图:
3.2 子代选择器
div > span {
background-color: aquamarine;
}
<div>
<span>家和房子之间是大于号,不是等于号</span>
<p><span>一砖一瓦是房子,一点一滴才是家</span></p>
</div>
效果如下图:
3.3 兄弟选择器
3.3.1 相邻兄弟选择器
选中p后紧紧相邻的兄弟span元素,紧挨着他的下一个
p + span {
color:cornflowerblue;
}
<div>
<span>绿蚁新醅酒,</span>
<p>红泥小火炉。</p>
<span>晚来天欲雪,</span><br/>
<span>能饮一杯无?</span>
</div>
效果如下图:
3.3.2 通用兄弟选择器
选中p后所有的兄弟span元素
p ~ span {
color:cornflowerblue;
}
<div>
<span>绿蚁新醅酒,</span>
<p>红泥小火炉。</p>
<span>晚来天欲雪,</span><br/>
<span>能饮一杯无?</span>
</div>
效果如下图:
注意:两种兄弟选择器,选择的都是下面的兄弟
3.4 属性选择器
3.4.1 属性名选择器
选中具有title属性名的元素
[title] {
color: blue;
}
<div title="attribute1">每个人生都无法复制的</div>
<div title="attribute2"> 更没有办法替代</div>
效果如下图:
3.4.2 属性值选择器
选中具有title属性,且属性值为attribute1的元素
[title="attribute1"] {
color: blue;
}
<div title="attribute1">每个人生都无法复制的</div>
<div title="attribute2"> 更没有办法替代</div>
效果如下图:
3.4.3 属性值开始选择器
[title^="at"] {
color: blue;
}
<div title="attribute1">每个人生都无法复制的</div>
<div title="attribute2"> 更没有办法替代</div>
效果如下图:
3.4.4 属性值结束选择器
[title$="e2"] {
color: blue;
}
<div title="attribute1">每个人生都无法复制的</div>
<div title="attribute2"> 更没有办法替代</div>
效果如下图:
3.4.5 属性值包含选择器
[title*="u"] {
color: blue;
}
<div title="attribute1">每个人生都无法复制的</div>
<div title="attribute2"> 更没有办法替代</div>
效果如下图: