# 选择器进阶+背景相关属性+元素显示模式+三大特性

复合选择器
- 后代选择器:通过空格隔开
- 子代选择器: >
并集选择器:,---分组选择器
交集选择器:紧挨着
Emmet语法
伪类选择器
背景颜色
背景图片
- 图片盗链问题
背景平铺
背景位置
背景相关属性连写
方法一:直接写上img标签即可
方法二:div标签+背景图片
块级元素
行内元素
行内块元素
元素显示模式转换
继承性
- 继承的应用
- 继承失效的特殊情况
层叠性
优先级
- 权重叠加计算

# 选择器进阶

# 复合选择器

# 后代选择器:通过空格隔开

作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素

选择器语法:选择器1 选择器2 {CSS}

结果:在选择器1所找到的标签的后代(儿子,孙子,重孙子...)中,找到满足选择器2的标签,设置样式.

注意点:

后代包括:儿子,孙子,重孙子...
后代选择器中,选择器与选择器之前通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子孙后代选择器*/
        body div div p{
            color: red;
        }
        <!-- 匹配body里面的div里面的div里面的所有p(包括后代p) -->
    </style>

</head>
<body>
<p>p1</p>
<div>
    <p>p2</p>
    <div><P>P3</P></div>
    <div>
        <p>p4</p>
        <div><p>p5</p></div>
    </div>

</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 子代选择器: >

作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素

选择器语法:选择器1 > 选择器2 {CSS}

结果:在选择器1所找到的标签的子代(儿子)中,找到满足选择器2的标签,设置样式.

注意点:

子代只包括:儿子
子代选择器中,选择器与选择器之前通过>隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子代选择器*/
        body>div>div>p{
            color: red;
        }
    </style>
    <!--匹配body里面的div里面的div里面的子元素p -->

</head>
<body>
<p>p1</p>
<div>
    <p>p2</p>
    <div><P>P3</P></div>
    <div>
        <p>p4</p>
        <div><p>p5</p></div>
    </div>

</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 并集选择器:`,`---分组选择器

作用:同时选择多组标签,设置相同的样式

选择器语法:选择器1,选择器2{CSS}

h3,#id,.class{样式代码} h4,#p1,.c1{background-color: red}

结果:找到选择器1和选择器2选中的标签,设置样式

注意点:

并集选择器中的每组选择器之间通过,分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个,提高代码的可读性

# 交集选择器:紧挨着

作用:选中页面中同时满足多个选择器的标签

选择器语法:选择器1选择器2{CSS}

结果:(既又原则)找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式

注意点:

交集选择器中的每组选择器之间是紧挨着的,没有东西分隔
交集选择器中如果有标签选择器,标签选择器必须写在最前面

# Emmet语法

作用:通过简写语法,快速生成代码

语法:类似于刚刚学习的选择器的写法

记忆	示例	效果
标签名	div	`<div></div>`
类选择器	.red	`<div class="red"></div>`
id选择器	#one	`<div id="one"></div>`
交集选择器	p.red#one	`<p class="red" id="one"></p>`
子代选择器	ul>li	`<ul><li></li></ul>`
内部文本	ul>li{我是li的内容}	`<ul><li>我是li的内容</li></ul>`
创建多个	ul>li*3	`<ul><li></li><li></li><li></li></ul>`

# 伪类选择器

作用:选中鼠标悬停在元素上的状态,设置样式

选择器语法:选择器:hover{CSS}

a:link/visited/hover/active:{样式代码}

注意点:

伪类选择器选中的元素的某种状态,包括:未访问状态,访问过状态,悬停状态,点击状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子孙后代选择器*/
        /*body div div p{
            color: red;
        }*/
        /*子元素选择器*/
        div>div>p{
            color: red;
        }
        /*伪类选择器*/
        a:link{color: red;}/*未访问*/
        a:visited{color: pink}/*访问过*/
        a:hover{color: green}/*悬停*/
        a:active{color: yellow}/*点击*/
    </style>
</head>
<body>
<a href="http://www.tedu.cn">超链接1</a>
<a href="http://doc.canglaoshi.org">超链接2</a>
<a href="http://www.qq.com">超链接3</a>
<p>p1</p>
<div>
    <p>p2</p>
    <div><p>p3</p></div>
    <div>
        <p>p4</p>
        <div><p>p5</p></div>
    </div>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 背景相关属性

# 背景颜色

属性名:background-color(bgc)

属性值:颜色取值:关键字,rgb表示法.rgba表示法.十六进制...

注意点:

背景颜色默认值是透明:rgba(0,0,0,0),transparent
背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色

# 背景图片

属性名:background-image(bgi)

属性值:background-image:url('图片的路径');

注意点:

背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的
background-size:100px 200px; 设置背景图片尺寸
background-repeat: no-repeat; 设置禁止重复
background-position: 100px 200px; 设置背景图片位置还可以通过百分比赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            /*color: #ff0000;*/
           /* color: #f00;*/
            /*color: rgb(255,0,0);*/
            color: rgba(255,0,0,0.3);
        }
        #d2{
            width: 200px;
            height: 200px;
            background-color: pink;
            /*设置背景图片*/
            background-image: url("../b.jpg");
            /*设置背景图片尺寸*/
            background-size: 100px 100px;
            /*禁止重复*/
            background-repeat: no-repeat;
            /*控制位置:横向 纵向*/
            /*background-position: 50px 100px;*/
            background-position: 50% 50%;
        }
        #d1{
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
            background-repeat: no-repeat;
            background-position: 90% 90%;
            background-size: 318px 319px;
        }
    </style>
</head>
<body>
<div id="d2"></div>
<div id="d1"></div>
<h1>颜色测试</h1>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 图片盗链问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{background-color: black}
    #i1{
      /*如果盗链的图片是背景图片 右键是没有复制图片地址选项的
      在图片上右键检查 从样式中找到图片路径, 在路径上面右键copy link address*/
      background-image: url("https://game.gtimg.cn/images/yxzj/web201706/images/comm/nav_search.png");
      width: 27px;
      height: 26px;
      display: block;
    }
    #i2{
      background-image: url("https://game.gtimg.cn/images/lol/v3/topfoot-spr.png");
      display: block;
      width: 21px;
      height: 21px;
      background-position: -381px -39px;
    }
  </style>
</head>
<body>
<!--icon图标-->
<i id="i1"></i>
<i id="i2"></i>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 背景平铺

属性名:background-repeat(bgr)

属性值:

取值	效果
repeat	(默认值)水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向(x轴)平铺
repeat-y	沿着垂直方向(y轴)平铺

# 背景位置

属性名:background-position(bgp)

属性值:background-position:水平方向位置垂直方向位置;

注意点:

方位名词取值和坐标取值可以混使用,第一个取值表示水平,第二个取值表示垂直

# 背景相关属性连写

属性名:background(bg)

属性值:单个属性值的合写,取值之间以空格隔开

书写顺序:推荐:background:color image repeat position

省略问题:

可以按照需求省略
特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写background:url()

注意点:

如果需要设置单独的样式和连写
①要么把单独的样式写在连写的下面
②要么把单独的样式写在连写的里面

# 在网页中展示一张图片的两种方式

# 方法一:直接写上img标签即可

img标签是一个标签,不设置宽高默认会以原尺寸显示

# 方法二:div标签+背景图片

需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div样式

# 元素显示模式

# 块级元素

属性:display:block

显示特点:

独占一行(一行只能显示一个)
宽度默认是父元素的宽度,高度默认由内容撑开
可以设置宽高
比如:div,h1-h6,p等

代表标签:

div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer....

# 行内元素

属性:display:inline

显示特点:

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
比如:span,超链接a, b加粗,i斜体,u下划线,s删除线等

代表标签:

a,span,b,u,i,s,strong,ins,em,del...

# 行内块元素

属性:display:inline-block

显示特点:

一行可以显示多个
可以设置宽高
比如: img图片标签,input表单中的控件等

代表标签:

input,textarea,button,select...
特殊情况:img标签内由行内块元素特点,但是Chrome测试工具中显示结果是inline

# 元素显示模式转换

目的:改变元素默认的显示特点,让元素符合布局要求

语法:

属性	效果	使用频率
`display:block`	转换成块级元素	较多
`display:inline`	转换成行类元素	较少
`display:inline-block`	转换为行内块元素	较多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            width: 100px;
            height: 100px;
            display: none;/*隐藏元素*/
        }

        div {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        span {
            border: 1px solid blue;
            width: 100px;
            height: 100px;
            /*行内元素不能修改宽高, 如必须改则修改display为块级或行内块*/
            display: inline-block;
        }
        a{
            background-color: #0aa1ed;
            width: 132px;
            height: 40px;
            display: block;
            text-align: center;
            line-height: 40px;
            color: white;
            text-decoration: none;
            font-size: 20px;
            border-radius: 3px;/*设置圆角*/
        }

    </style>
</head>
<body>
<a href="">查看详情</a>

<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span><span>span2</span><span>span3</span>
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            border: 1px solid blue;
            /*行内元素不能修改宽高*/
            width: 100px;
            height: 100px;
            /*把行内元素改成了块级元素或行内块元素都可以修改宽高 */
            display: inline-block;
        }
        img{
            width: 100px;
            height: 100px;
            display: none;/*隐藏元素*/
        }
        a{
            width: 132px;
            height: 40px;
            background-color: #0aa1ed;
            /*行内元素不能修改宽高*/
            display: block;
            text-align: center;
            line-height: 40px;
            color: white;
            text-decoration: none;
            font-size: 20px;
            /*圆角 值越大越圆*/
            border-radius: 3px;
        }
    </style>
</head>
<body>
<a href="">查看详情</a>

<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# HTML嵌套规范注意点

块级元素一般作为大容器,可以嵌套;文本,块级元素,行内元素,行内块元素等等...

但是:p标签中不要嵌套div,p,h等块级元素

a标签内部可以嵌套任意元素

# 居中方法总结

# CSS三大特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #d1{
            color: red;
        }
        div{
            /*!important作用是提升优先级*/
            color: blue !important;
        }

    </style>
</head>
<body>
<div id="d1">
    <p>这是个p标签</p>
    <span>这是div里面的span</span>
    <a href="">超链接</a>
</div>
<span>这是div外面的span</span>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 继承性

特性:子元素由默认继承父元素样式的特点(子承父业)

可以继承的常见属性:

color
font-style;font-weight;font-size;font-family
text-indent;text-align
line-height;
...

注意点:可以通过调试工具判断样式是否可以继承,部分标签自带效果不受继承影响,如h1-h6字体大小,超链接的字体颜色等

# 继承的应用

好处:可以在一定程度上减少代码

常见应用场景:

可以直接给ul设置list-style:none属性,从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小

# 继承失效的特殊情况

如果元素由浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式

a标签的color会继承失效
h系列标签的font-size会继承失效
div的高度不能继承,但是宽度由类似于继承的效果

# 层叠性

特性:

给同一个标签设置不同的样式--->此时样式会层叠叠加--->会共同作用在标签上
给同一个标签设置相同的样式-->此时样式会层叠覆盖-->最终写在最后的样式会生效

注意点:

当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

# 优先级

特性:不同选择器具有不同的优先级,优先级越高的选择器会覆盖优先级低选择器样式

优先级公式:

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!impoant

注意点:

!impoant写在属性值的后面,分号的前面加!
!important不能提升继承的优先级,只要是继承优先级最低
实际开发中不建议使用!important
作用范围越小优先级越高, id>class>标签名>继承

# 权重叠加计算

场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效

权重叠加计算公式:(每一级之间不存在进位)

比较规则:

先比较第一级数字,如果比较出来了,之后的统统不看
如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
...
如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)

注意点:!important如果不是继承,则权重最高,天下第一!

# 查错流程

← 基础选择器+字体文本样式盒子模型的介绍 →

# 选择器进阶+背景相关属性+元素显示模式+三大特性

# 选择器进阶

# 复合选择器

# 后代选择器:通过空格隔开

# 子代选择器: >

# 并集选择器:,---分组选择器

# 交集选择器:紧挨着

# Emmet语法

# 伪类选择器

# 背景相关属性

# 背景颜色

# 背景图片

# 图片盗链问题

# 背景平铺

# 背景位置

# 背景相关属性连写

# 在网页中展示一张图片的两种方式

# 方法一:直接写上img标签即可

# 方法二:div标签+背景图片

# 元素显示模式

# 块级元素

# 行内元素

# 行内块元素

# 元素显示模式转换

# HTML嵌套规范注意点

# 居中方法总结

# CSS三大特性

# 继承性

# 继承的应用

# 继承失效的特殊情况

# 层叠性

# 优先级

# 权重叠加计算

# 查错流程

# 并集选择器:`,`---分组选择器