CSS选择器

时间 2019-11-18

标签 css 选择器栏目 CSS 繁體版

原文原文链接

CSS选择器

1、基础选择器

一、通配选择器

- {
    border: solid;
}
匹配文档中全部标签：一般指html、body及body中全部显示类的标签

二、标签选择器

div {
    background-color: yellow;
}
匹配文档中全部与标签名匹配的标签：如div{}会匹配文档中所有div，span{}会匹配文档中全部span

三、类选择器

.red {
    color: red;
}
匹配文档中全部拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配

四、id选择器

#div {
    text-align: center;
}
匹配文档中全部拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配

2、基础选择器优先级

基础选择器优先级大体与选择器匹配范围成反比，匹配范围越小，优先级越高css
基础选择器优先级大体与选择器匹配精度成正比，匹配精度越高，优先级越高html
基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器编程

v_hint：id选择器必须保证单文档的惟一性

3、组合选择器

一、群组选择器

div, span, .red, #div {
    color: red;
}

一次性控制多个选择器编程语言
选择器之间以,隔开，每个选择器位都可觉得任意合法选择器或选择器组合布局

二、子代(后代)选择器

子代选择器用>链接
body > div {
    color: red;
}
后代选择器用空格链接
.sup .sub {
    color: red;
}

一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器ui
每个选择器位都可觉得任意合法选择器或选择器组合atom
子代选择器必须为一级父子嵌套关系，后代选择器能够为一级及多级父子嵌套关系spa

三、相邻(兄弟)选择器

相邻选择器用+链接
.d1 + .d2 {
    color: red;
}
兄弟选择器用~链接
.d1 ~ .d3 {
    color: red;
}

一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器htm
每个选择器位都可觉得任意合法选择器或选择器组合对象
相邻选择器必须为直接相邻关系，兄弟选择器能够为直接相邻或间接相邻关系

四、交集选择器

<div class="d" id="dd"></div>
div.d#dd {
    color: red;
}

<div class="d1 d2 d3"></div>
.d1.d2.d3 {
    color: red;
}

4、组合选择器优先级

组合选择器优先级与权值相关，权值为权重和

权重对应关系

选择器	权重
通配	1
标签	10
类、属性	100
id	1000
!important	10000

选择器权值比较，只关心权重和，不更新选择器位置
不一样级别的选择器间不具有可比性：1个类选择器优先级高于n个标签选择器的任意组合

5、属性选择器

[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>

组合选择器:

<!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</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>
　　　　<div class="d1">
　　　　　　<div id="dd1">
　　　　　　　　<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 class="d1">00000 　　<div class="d2">12345</div> 　　 　　<div class="helloworld" dd do="do something">helloworld</div> 　　</div></body></html>