css选择器

CSS全称Cascading Style Sheet层叠样式表,是专门用来为HTML标签添加样式的.

# css三种引用方式

三种引入方式的优先级: 行内式 > (嵌入式和外链式谁在后面谁优先因为是自上而下解析的后面覆盖前面的啦)

# 1.行内式

<p style="color: red;font-size: 50px;text-align: center">egon yyds</p>

# 2.嵌入式

<head>
    <style>
        p {
            color: red;
            font-size: 50px;
            text-align: center
        }
    </style>
</head>

1
2
3
4
5
6
7
8
9

# 3.外链式

(企业内部使用这种方式！)

<!-- mystyle.css
p {
    color: red;
    font-size: 50px;
    text-align: center
}
-->

<head>
  	<!-- type属性可以不写,默认就是文本类型 -->
    <link rel="stylesheet" href="css/mystyle.css" type="text/css">
</head>

1
2
3
4
5
6
7
8
9
10
11
12

Ps. <style>@import url("css/mystyle.css")</style>
导入式CSS2.1特有的,不是所有浏览器都支持,但也基本不用...
使用外链式时与导入式不同的是它会在网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会像导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点.

# css选择器

# 基本选择器

id选择器类选择器标签选择器通配符选择器

▽id选择器

根据指定的id名称,在当前界面中找到对应的 唯一一个 的标签,然后设置属性

<!-- 
在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的
每个标签都可以设置唯一一个id,id就相当于人/标签的身份证,因此在同一界面内id绝不能重复
引用id一定要加#
id的命名只能由字符、数字、下划线组成,且不能以数字开头,更不能是html关键字如p a img等 
-->
<head>
    <style>
        #p1 {
          color: red;
        }
    </style>
</head>

<body>
    <p id="p1">Hello world!</p>
    <p>egon yyds.</p>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

▽类选择器

根据指定的类名称,在当前界面中找到对应的标签,然后设置属性

<head>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }
    </style>
</head>

<body>
  	<!--
    第一行与第三行的颜色都是红色
    第一行与第二行的字体大小都是50px
    第二行与第三行内容有个下划线
		-->
    <p class="p1 p2">窗前明月光</p>
    <p class="p2 p3">疑似地上霜</p>
    <p class="p1 p3">举头望明月</p>
</body>

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

▽标签选择器

根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

<!--
只要是HTML的标签都能当做标签选择器
标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
标签选择器,无论嵌套多少层都能选中
-->

1
2
3
4
5

▽通配符选择器

选择所有标签

<!--
* {
    属性：值；
}

在企业开发中一般不会使用通配符选择器
理由是：
    由于通配符选择器是设置界面上所有的标签的属性
    所以在设置之前会遍历所有的标签
    如果当前界面上的标签比较多,那么性能就会比较差
-->

1
2
3
4
5
6
7
8
9
10
11

# 组合选择器

后代选择器 相邻兄弟选择器 通用兄弟选择器 子元素选择器

组合选择器	含义
div,p 并集选择器	两个选择器应用于同一个样式
div p 后代选择器	div标签里面所有p标签,不论p标签身处第几层
div>p 子类选择器	div的儿子,不会查找其他嵌套里的标签
div+p 相邻选择器	跟div紧挨着的那个兄弟p元素
div~p 兄弟选择器	div的兄弟,不管是否相邻,只要是同一级别的都行

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<head>
    <style>
        /* 后代选择器 找到div所有的后代 */
        div p {
            color: red;
        }

        /* 相邻兄弟
        选中的是div后面那一个同一级别紧跟着的p标签
        不能选中被隔开的标签 */
        div + p {
            color: green;
        }

        /* 通用兄弟(隔开的兄弟)
        选中的是div后面那一堆同一级别的a标签
        无论有没有被隔开,都可以被选中
        */
        div ~ a {
            color: blue;
        }

        /* 子元素选择器只会查找儿子,不会查找其他嵌套的标签 */
        div > p {
            color: pink;
        }

        /* 不仅可以用标签名称,还可以使用其他选择器,比如id或class */
        .box2 ul p{
            color: orange;
        }
    </style>
</head>
<body>
    <p>111</p>
    <div class="box1">
        <p>粉色</p>
        <p>粉色</p>
        <ul>
            <li>
                <p>红色</p>
            </li>
        </ul>
        <p>粉色</p>
    </div>
    <p>绿色</p>
    <a style="text-decoration: none">蓝色</a>
    <a style="text-decoration: none">蓝色</a>
    <hr>
    <a style="text-decoration: none">蓝色</a>

    <div class="box2">
        <ul>
            <li>
                <p>橙色</p>
            </li>
        </ul>
        <p>粉色</p>
    </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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

# 交集与并集选择器

交集选择器(不常用) 并集选择器

<head>
    <style>
      	/* 交集选择器(不常用)
      	只给包含box1的div标签添加文本蓝色的样式
      	选择器与选择器之间没有任何链接符号
      	选择器可以使用标签名称、id、class
      	*/
        div.box1 {
            color: blue;
        }

        h1.box1 {
            color: green;
        }

      	/* 并集选择器
      	选择h2和h3标签 `,`号表示和的意思
      	*/
        h2, h3 {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>蓝色</p>
        <a style="text-decoration: none">蓝色</a>
    </div>

    <h1 class="box1">绿色</h1>
    <h2>粉色</h2>
    <h3>粉色</h3>
</body>

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

# 序列选择器

过去的选择器中要选中某个必须加id或class 学习了这9个序列选择器后,不用加id或class,想选中同级别的第几个就选第几个

▽同级别 -- 按顺序 先看是级别中的第几个位置,再看这个位置的标签是否是:左边的那个标签 p:first-child 同级别的第一个,并且得是p标签 p:last-child 同级别的最后一个,并且得是p标签 p:nth-child(n) 自定义同级别的第n个,并且得是p标签 p:nth-last-child(n) 自定义同级别的倒数第n个,并且得是p标签

▽同级别同类型 -- 不受顺序的限制 所谓的类型是指 eg:p标签是一个类型 div标签是一个类型... p:first-of-type 同级别同类型的第一个p标签 p:last-of-type 同级别同类型的最后一个p标签 p:nth-of-type(n) 同级别同类型的第n个p标签 p:nth-last-of-type(n) 同级别同类型的倒数第n个p标签

▽其他 p:only-of-type 同级别可有多个标签,但p标签只有一个 p:only-child 同级别只有一个标签,并且这个标签得是p标签

PS:
/* 奇数 */
ul li:nth-child(2n+1){}
ul li:nth-child(odd){}
/* 偶数 */
ul li:nth-child(2n){}
ul li:nth-child(even){}
/* 小于等于3的位置 */
ul li:nth-child(-n+3){} 
/* 大于等于3的位置 */
ul li:nth-child(n+3){}
/* 除了最后一个li标签 */
ul li:not(:last-child){}
1
2
3
4
5
6
7
8
9
10
11
12

<body>
<!--
现body标签里有四个级别(看缩进嘛)
h1 p p p p p div p是一个级别;div下的p ul是一个级别;
ul下li是一个级别;li下的p是一个级别
-->
    <h1>我是标题</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
    <div>
        <p>我是段落6</p>
        <ul>
            <li>
                <p>Hello world.学习,学个屁!</p>
            </li>
        </ul>
    </div>
    <p>我是段落7</p>
</body>

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

# 属性选择器

[属性名];     其他选择器[属性名];     [属性名=值]
[属性名^=值];     [属性名$=值];     [属性名*=值]

[x]     -- 找到所有包含x属性的标签
[id]     -- 找到所有包含id属性的标签
p[id]     -- 找到所有包含id属性的p标签
p[class="part1"]     -- 找到所有class属性值为part1的p标签
等号表示完全匹配,class的值只能有part1, <p class="part1 part2"></p>是匹配不上
[href^="https"]     -- 找到所有href属性值以https开头的a标签
img[src$="png"]     -- 找到所有src属性值以png结果的img标签
[class*="part1"]      -- 找到所有class属性值中包含part1的标签,类属性值只要有part1这个字符就行啦.
        eg: <p class="aaapart1 part2"></p>
* ^ $ 相当于将属性值当作一个字符串进行的匹配.

<body>
  	<!-- 可以自定义属性 eg: x="111" -->
    <h1 id="id1" x="111">哈哈啊</h1>
    <p id="id2" x="222">我是段落</p>
    <p class="part1">我是段落</p>
    <p class="xxx part2 yyy">我是段落</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 伪类选择器

▽没有访问的超链接a标签样式：
a:link {color: blue;}

▽访问过的超链接a标签样式：
a:visited {color: gray;}

▽鼠标悬浮在元素上应用样式：
a:hover {background-color: #ced; }

▽鼠标点击瞬间的样式：
a:active {color: green;}

▽input输入框获取焦点时样式：
input:focus {
     outline: none;
     background-color: #eee;
}

注意:
1> a标签的伪类选择器可以单独出现,也可以一起出现
2> a标签的伪类选择器如果一起出现, 有严格的顺序要求 , 否则失效
     link      visited      hover      active
3> hover是所有其他标签都可以使用的 4> focus只给input标签使用

# 伪元素选择器

两个冒号与一个是一样的,老版本用的是一个冒号,考虑到兼容性推荐使用一个冒号.
先提一嘴(￣▽￣) 伪元素选择器可以清楚浮动！！

▽first-letter: 杂志类文章首字母样式调整（了解即可）
/* 第一个字的变化 */
p:first-letter {
		font-size: 48px;
}
1
2
3
4
▽before: 用于在元素的内容前面插入新内容
eg: 在所有p标签的内容前面加上一个红色的*
p:before {
 	content: "*";
 	color: red;
}
1
2
3
4
▽after: 用于在元素的内容后面插入新内容
在所有p标签的内容后面加上一个蓝色的?
p:after {
 	content: "?";
 	color: red;
}
1
2
3
4

# css三大特性

# 继承性

给某一个元素设置一些属性,该元素的后代(儿子孙子...)也可以使用,这个我们就称之为继承性.

敲黑板!!!
1>. 只有以color、font-、text-、line-开头的属性才可以继承
2>. a标签的文字颜色和下划线是不能继承别人的
3>. h标签的文字大小是不能继承别人的,会变大,但是会在原来字体大小的基础上变大

# 层叠性

层叠性指的就是CSS处理冲突的一种能力,即如果有多个选择器选中了同一个标签那么会有覆盖效果.

<!--
层叠性只有在多个选择器选中了同一个标签,然后设置了相同的属性,才会发生层叠性
ps: 通过谷歌浏览器可以查看到,一些属性被划掉了

注意哦,这个涉及到优先级的问题！！
-->
<head>
		<style type="text/css">
        p {
            color: red;
        }
        .ppp {
            color: green;
        }
    </style>
</head>
<body>
		<p class="ppp">我是段落</p>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 优先级!!

当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定.

▽1.大前提: 直接选中(一步到位定位到此标签) > 间接选中(即继承而来的)

▽2.如果都是间接选中,那么谁离目标标签比较近,就听谁的

<head>
    <style>
      	/*离目标近*/
        div li{
            color: green;
        }
      	/*离目标远*/
        div ul{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
          	<!-- 字体显示为绿色 -->
            <p class="p1">学习？学个屁!!</p>
        </li>
    </ul>
</div>
</body>

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

▽3.如果都是直接选中,并且都是同类型的选择器,那么谁写在后面谁生效 eg: p标签选择器 .p是类选择器 #id1ID选择器 单个选择器 若是多个选择器组合形成的选择器需要进行权重计算...

▽4.如果都是直接选中,并且是不同类型的选择器,那么就会按照选择器的优先级来层叠
**id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性） **
eg:<p id="id1" class="ppp">我是span</p>

▽5.优先级之权重计算如果都是直接选中,并且混杂了一系列其他的选择器一起使用时,则需要通过计算权重来判定优先级.

<!--
计算方式
    1. id数多的优先级高
    2. id数相同,则判定类数多的优先级高
    3. id数、class数均相同,则判定标签数多的优先级高
    4. 若id数、class数、标签数均相同,则无需继续往下计算了,谁写在后面谁的优先级高
-->

1
2
3
4
5
6
7

▽6优先级之 !important.
!import方式来强制指定的属性的优先级提升为最高,但是不推荐使用.
因为大量使用!import的代码是无法维护的。

<!--
注意:
1. !important只能用于直接选中,不能用于间接选中
2. !important只能用于提升被指定的属性的优先级,其他属性的优先级不会被提升
3. !important必须写在属性值分号的前面
-->
<head>
    <style>
      	/* 最终效果: 红色,字体大小10px */
        .p1{
            color: red !important;
          	font-size: 20px;
        }
        .p1{
            color: green;
          	font-size: 10px;
        }
    </style>
</head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

← html css属性设置→