CSS选择器
一 概念
# CSS选择器
## 一、基础选择器
#### 1、通配选择器
```css
- {
border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签
```
#### 2、标签选择器
```css
div {
background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span
```
#### 3、类选择器
```css
.red {
color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配
```
#### 4、id选择器
```css
#div {
text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配
```
## 二、基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
###### v_hint：id选择器必须保证单文档的唯一性
## 三、组合选择器
#### 1、群组选择器
```css
div, span, .red, #div {
color: red;
}
```
- 一次性控制多个选择器
- 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合
#### 2、子代(后代)选择器
```css
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
```
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
#### 3、相邻(兄弟)选择器
```css
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}
```
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
#### 4、交集选择器
```css
<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的标签
###### v_hint：属性选择器权重等价于类选择器
###### v_test：掌握所有选择器，并熟知选择器优先级
二 代码示范
<!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选择器补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
/*组合选择器*/
/*特性:每个选择器位可以为任意基本选择器或选择器组合*/
/*群组选择器: ,隔开*/
/*控制多个*/
div, .s, section {
color: red;
}
/*子代选择器: >连接*/
body > div {
color: orange;
}
/*div > a {
text-decoration: none;
}*/
/*后代选择器: 空格连接*/
/*包含子代选择器*/
body a {
text-decoration: none;
}
/*相邻选择器: +连接*/
span + section {
background-color: pink;
}
/*兄弟选择器: ~连接*/
/*包含相邻选择器*/
div ~ section {
background-color: brown;
}
/*交集选择器*/
/*即是选择器1又是选择器2*/
i.s {
color: yellow;
}
/*多类名选择器*/
.d1 {
color: blue;
}
.d1.d2 {
color: tan;
}
.d1.d2.d3 {
color: #780;
}
</style>
</head>
<body>
<!-- div{div}+span{span}+section{section} -->
<div>div</div>
<span class="s">span</span>
<section>section</section>
<div>
<a href="">a标签</a>
</div>
<i class="s">iiii</i>
<div class="d1 d2 d3">呵呵</div>
</body>
</html>
组合选择器优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器优先级</title>
<style type="text/css">
/*同目录结构下*/
/*1.子代与后代优先级相同*/
/*body > div == body div*/
/*2.相邻与兄弟优先级相同*/
/*div + span == div ~ span*/
/*3.最终样式采用逻辑后的样式值*/
/*不同目录结构下*/
/*1.根据选择器权值进行比较*/
/*2.权值为标签权重之和*/
/*3.权重: *:1 div:10 class:100 id:1000 !important:10000 */
/*4.权值比较时,关心的是值大小,不关心位置与具体选择器名*/
/*5.id永远比class大,class永远比标签大*/
/*注:控制的是同一目标,才具有可比性*/
/*div>div>div>div>...>div {} 11 < .div{}*/
/*10*/
div {
color: red;
}
/*20*/
div div {
color: yellow;
}
/*大于一切标签*/
.d2 {
color: blue;
}
/*.d2抵消,剩权重10*/
div .d2 {
color: orange;
}
/*等价于div .d2,权值相同,位置决定*/
.d1 div {
color: pink;
}
/*又多10*/
div .d1 div {
color: tan;
}
/*不具有可比性*/
div .d1 > div{
color: green;
}
/*高于一切class及标签*/
#dd1 div {
color: #000;
}
</style>
</head>
<body>
<!-- div>.d1>#dd1>div>.d2 -->
<div>
<div class="d1">
<div id="dd1">
<div>
<div class="d2">12345</div>
</div>
</div>
<!-- <div id="dd2">
<div>
<div class="d2">12345</div>
</div>
</div> -->
</div>
</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.d2 {
color: red;
}
/*属性选择器权重 == class选择器权重*/
/*有属性class的所有标签*/
[class] {
color: orange;
}
/*有属性class且值为d2的所有标签(值不影响权重)*/
[class="d2"] {
color: pink;
}
/*是div且class='d2',增加了权重*/
div[class='d2'] {
color: blue;
}
/*属性以什么开头: ^= */
/*属性以什么结尾: $= */
/*属性模糊匹配: *= */
[class ^= 'he'] {
color: yellow;
}
[class $= 'ld'] {
color: tan;
}
[class *= 'ow'] {
color: cyan;
}
[class][dd] {
color: brown;
}
</style>
</head>
<body>
<!-- div.d1>.d2 -->
<div class="d1">00000
<div class="d2">12345</div>
<!-- dd与do为自定义属性 -->
<div class="helloworld" dd do="do something">helloworld</div>
</div>
</body>
</html>
