CSS选择器
一、基础选择器
1、通配选择器
- {
border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签2、标签选择器
div {
background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span3、类选择器
.red {
color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配4、id选择器
#div {
text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配二、基础选择器优先级
基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
v_hint：id选择器必须保证单文档的唯一性
三、组合选择器
1、群组选择器
div, span, .red, #div {
color: red;
}一次性控制多个选择器
选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合
2、子代(后代)选择器
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
3、相邻(兄弟)选择器
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}
一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
4、交集选择器
<div class="d" id="dd"></div>
div.d#dd {
color: red;
}
?
<div class="d1 d2 d3"></div>
.d1.d2.d3 {
color: red;
}
四、组合选择器优先级
组合选择器优先级与权值相关，权值为权重和
权重对应关系
| 选择器 | 权重 |
|---|---|
| 通配 | 1 |
| 标签 | 10 |
| 类、属性 | 100 |
| id | 1000 |
| !important | 10000 |
选择器权值比较，只关心权重和，不更新选择器位置
不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合
五、属性选择器
[attr]：匹配拥有attr属性的标签
[attr=val]：匹配拥有attr属性，属性值为val的标签
[attr^=val]：匹配拥有attr属性，属性值以val开头的标签
[attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
[attr*=val]：匹配拥有attr属性，属性值包含val的标签
==============================================================================================================================================================
笔记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
/*基础选择器*/
/*1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)*/
/** {
border: solid;
}*/
/*2.标签选择器(标签名):匹配指定标签名的对应所有标签*/
div {
width: 100px;
height: 100px;
background-color: red;
}
section {
width: 200px;
height: 200px;
background-color: yellow;
}
/*3.类选择器(.):匹配指定类名对应的所有标签*/
.dd {
font-size: 50px;
}
/*4.id选择器(#):匹配指定id名对应的唯一标签*/
/*html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个*/
#ele {
color: blue;
}
/*总结:*/
/*1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)*/
/*
* {
margin: 0;
}
*/
/*2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局*/
/*3.类选择器为布局首选(建议基本全用class选择器进行布局)*/
/*基本选择器优先级:id > class > 标签 > 通配*/
/*目标对象:<div class="d" id="ele">d_2</div>*/
* {
text-align: left;
}
div {
text-align: right;
}
.d {
text-align: center;
}
#ele {
text-align: left;
}
</style>
</head>
<body>
<div class="dd">d_1</div>
<section>s_1</section>
<div class="d" id="ele">d_2</div>
<section class="dd">s_2</section>
<span></span>
</body>
</html>
CSS选择器
原文地址：https://www.cnblogs.com/zhangpang/p/9720397.html