文章目录
一、常用css选择器
1.元素选择器
选择所有相同标签的元素
选中所有span标签
span{
color:red;
}
2.类选择器"."
类选择器以. +类别名称
.classselect{
background:red;
}
3.ID选择器"#"
ID选择器以#+ID名称
#idselect{
hight:100px;
}
4.通配符选择器"*"
通过*选中所有标签
*{
width:100px;
}
二、群组选择器","
群组选择器同时选择多个class,用逗号隔开
如下代码，将同时选择.divselect ,span,.colorselect对应的HTML元素
.divselect,span,.colorselect{
color:red;
}
三、关系选择器
1.后代选择器（包含选择器）
后代选择器选择所有被#aa包含的.ss，中间用空格隔开
<body>
<div id="aa">
<span class="ss">1</span>
<span id="dd">
<span class="ss">1</span>
</span>
<span class="ss">
3
<span class="ff">4</span>
</span>
<span class="ss">2</span>
</div>
</body>
<style>
#aa .ss {
width: 100px;
height: 200px;
padding-left: 20px;
}
</style>
2.子代选择器
- “>” 选中祖先元素直接包含的后代元素
子代选择器选择所有是#dd的直接子元素.ss
<body>
<div id="aa">
<span class="ss">1</span>
<span id="dd">
<span class="ss">1</span>
</span>
<span class="ss">
3
<span class="ff">4</span>
</span>
<span class="ss">2</span>
</div>
</body>
<style>
#aa>.ss {
width: 100px;
height: 200px;
padding-left: 20px;
}
</style>
3.相邻兄弟选择器
- +选中指定元素后面相邻的单个兄弟元素
<body>
<div id="aa">
<span class="ss">1</span>
<span id="dd">
<span class="ss">1</span>
</span>
<span class="ss">
3
<span class="ff">4</span>
</span>
<span class="ss">2</span>
</div>
</body>
<style>
// 选中id名为dd后面的第一个calse为ss的span
#dd+.ss {
width: 100px;
height: 200px;
padding-left: 20px;
}
</style>
4.兄弟选择器
- ~ 选中指定元素后面所有的兄弟元素
<body>
<div id="aa">
<span class="ss">1</span>
<span id="dd">
<span class="ss">1</span>
</span>
<span class="ss">
3
<span class="ff">4</span>
</span>
<span class="ss">2</span>
</div>
</body>
<style>
// 选中#dd元素后面的全部clase为ss的兄弟元素
#dd~.ss {
width: 100px;
height: 200px;
padding-left: 20px;
}
</style>
四、属性选择器
- elem[target]：选择所有带有target属性元素
- elem[target=value]：选择所有elem标签下使用属性（target）的属性值是value的元素
- elem[target^=value]：选择所有elem标签属性（target）以属性值以value开头的元素
- elem[target$=value]：选择所有elem标签属性（target）的属性值以value结尾的元素
- elem[target*=value]：选择所有elem标签属性（target）的属性值含有value的元素
- elem[target~=value]：选择所有elem标签属性（target）的属性值包含value字符的元素
- elem[target|=value]：选择所有elem标签属性（target）的属性值以等与value或者以 value- 为开头的元素