前端基础-CSS的各类选择器的特色以及CSS的三大特性

时间  2019-11-17
标签 前端 基础 css 各类 选择器 特色 以及 三大 特性 栏目 CSS 繁體版
原文   原文链接

1、 基本选择器

一、id选择器css

#一、做用：
根据指定的id名称，在当前界面中找到对应的惟一一个的标签，而后设置属性

#二、格式
id名称 {
    属性：值;
}

#三、注意点：
1、在企业开发中若是仅仅只是为了设置样式，一般不会使用id，在前端开发中id一般是留给js使用的
二、每一个标签均可以设置惟一一个id，id就至关于人/标签的身份证，所以在同一界面内id毫不能重复
三、引用id必定要加#
四、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        #p1 {
            color: red;
        }
        #p2 {
            color: green;
        }
        #p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p id="p1">大多数人的帅，都是浮在表面的，是外表的帅</p>
<p id="p2">而多多，不只具有外表帅，心里更是帅了一逼</p>
<p id="p3">多多就是我，我就是多多</p>
</body>

</html>
id选择器实例

二、类选择器html

#一、做用：根据指定的类名称，在当前界面中找到对应的标签，而后设置属性

#二、格式：
.类名称 {
    属性：值;
}

#三、注意点：
1、类名就是专门用来给某个特定的标签设置样式的
二、每一个标签均可以设置一个或多个class（空格分隔），class就至关于人/标签的名称，
所以同一界面内class能够重复
3、引用class必定要加点.
四、类名的命名规则与id的命名规则相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>类选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p class="p1">大多数人的帅，都是浮在表面的，是外表的帅</p>
<p class="p2">而多多，不只具有外表帅，心里更是帅了一逼</p>
<p class="p3">多多就是我，我就是多多</p>
</body>

</html>
类选择器实例

三、标签选择器前端

#一、做用：根据指定的标签名称，在当前界面中找到全部该名称的标签，而后设置属性

#二、格式：
标签名称 {
    属性：值;
}

#三、注意点：
1、只要是HTML的标签都能当作标签选择器
2、标签选择器选中的是当前界面中的全部标签,而不能单独选中某一标签
三、标签选择器，不管嵌套多少层都能选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>多多美丽的外表下其实隐藏着一颗骚动的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>这颗心叫作七巧玲珑心，男人吃了会流泪，女人吃了会怀孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>
标签选择器

四、通配符选择器css3

#一、做用：选择全部标签

#二、格式：
* {
    属性：值；
}
#三、注意点：
1、在企业开发中通常不会使用通配符选择器
    理由是：
    因为通配符选择器是设置界面上全部的标签的属性，
    因此在设置以前会遍历全部的标签
    若是当前界面上的标签比较多，那么性能就会比较差
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>

    <style type="text/css">

        * {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是标题</h1>
    <p >我是段落</p>
    <a href="#">我是超连接</a>
</body>
</html>
通配选择器实例

2、 后代选择器、子元素选择器

一、后代选择器浏览器

#一、做用：找到指定标签的全部后代（儿子，孙子，重孙子、、、）标签，设置属性

#二、格式：
    标签名1 xxx {
        属性：值;
    }

#三、注意：
1、后代选择器必须用空格隔开
2、后代不只仅是儿子，也包括孙子、重孙子
3、后代选择器不只仅可使用标签名称，还可使用其余选择器好比id或class
四、后代选择器能够经过空格一直延续下去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }

        div ul li a {
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--若是想为div内全部标签都设置属性，不管用id仍是class都不合理，由于当div内的标签过多，咱们没法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>
后代选择器实例

二、子元素选择器ide

#一、做用：找到制定标签的全部特定的直接子元素，而后设置属性

#二、格式：
    标签名1>标签名2 {
        属性：值;
    }

先找到名称叫作"标签名称1"的标签，而后在这个标签中查找全部直接子元素名称叫作"标签名称2"的元素

#三、注意：
一、子元素选择器之间须要用>符号连接，而且不能有空格
    好比div >p会找div标签的全部后代标签，标签名为">p"
2、子元素选择器只会查找儿子，不会查找其余嵌套的标签
3、子元素选择器不只能够用标签名称，还可使用其余选择器,好比id或class
四、子元素选择器能够经过>符号一直延续下去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        body>p {
            color: green;
        }

        div>p {
            color: red;
        }

        .aaa>a {
            font-size: 100px;
        }

        div>ul>li>.ddd {
            color: blue;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--若是想为div内全部标签都设置属性，不管用id仍是class都不合理，由于当div内的标签过多，咱们没法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落2</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>
子元素选择器

3、 兄弟选择器

一、相邻兄弟选择器，CSS2推出性能

#一、做用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

#二、格式
选择器1+选择器2 {
    属性：值;
}

#三、注意点：
一、相邻兄弟选择器必须经过+号连接
二、相邻兄弟选择器只能选中你紧跟其后的那个标签，不能选中被隔开的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>

    <style type="text/css">
        h1+p {
            font-size: 50px;
        }   /* 相邻兄弟解释器*/  

    </style>
</head>
<body>
    <h1 >我是标题1</h1>
    <!--<a href="">有了这个标签，p就再也不是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>-->
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是标题2</h1>
    <p>我是段落</p>

</body>
</html>
相邻兄弟解释器演示

二、通用兄弟选择器，CSS3推出学习

#一、做用：给指定选择器后面的全部选择器中的全部标签设置属性

#二、格式：
选择器1~选择器2 {
    属性：值;
}

#三、注意点：
一、通用兄弟选择器必须用~来连接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的全部标签
不管有没有被隔开，均可以被选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>

    <style type="text/css">

        h1~p {
            color: red;
        }    
   /*通用兄弟选择器*/

    </style>
</head>
<body>
    <h1 >我是标题1</h1>
    <!--<a href="">有了这个标签，p就再也不是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>-->
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是标题2</h1>
    <p>我是段落</p>

</body>
</html>
通用兄弟解释器实例

4、 交集选择器与并集选择器

一、交集选择器字体

#一、做用：给全部选择器选中的标签中，相交的那部分标签设置属性

#二、格式：
    选择器1选择器2 {
        属性：值;
    }

#三、注意：
1、选择器与选择器之间没有任何连接符号
二、选择器可使用标签名称、id、class
3、交集选择器在企业开发中并很少见，了解便可
   由于：p.part1 彻底能够用.part1取代
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        p.part1 {
            color: red;
        }
        p#p1{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
交集选择器实例

二、并集选择器spa

#一、做用：给全部知足条件的标签设置属性

#二、格式：
    选择器1,选择器2 {
        属性：值;
    }

#三、注意：
1、选择器与选择器之间必须用逗号来连接
二、选择器可使用标签名称、id、class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>

    <style type="text/css">
        .part1,h1,a {
            color: red;
        }
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <a href="#">我是我</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
并集选择器实例

5、 序列选择器

#一、做用：
css3中新推出的选择器中，最具表明性的的9个，又称为序列选择器，
过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，
想选中同级别的第几个就选第几个

#二、格式
#2.1 同级别
:first-child    p:first-child    同级别的第一个
:last-child    p:last-child    同级别的最后一个
:nth-child(n)                    同级别的第n个
:nth-last-child(n)            同级别的倒数第n个

#2.2 同级别同类型
:first-of-type                    同级别同类型的第一个
:last-of-type                    同级别同类型的最后一个
:nth-of-type(n)                    同级别同类型的第n个
:nth-last-of-type(n)            同级别同类型的倒数第n个

#2.3 其余
:only-of-type                    同类型的惟一一个
:only-child                         同级别的惟一一个
#一、同级别的第一个
#1.1 示范一
p:first-child { 
    color: red;
}
表明：同级别的第一个，而且第一个要求是一个p标签

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

这样的话第一个p和div中的第一个p都变成红色，

#1.2 示范二
p:first-child {
    color: red;
}
表明：同级别的第一个，而且第一个要求是一个p标签

<h1>w我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

这样的话只有div中的第一个p变红，由于在有在div内同一级别的第一个才是p

注意点：
    :fist-child就是第一个孩子，不区分类型

#二、同级别的最后一个
p:last-child {
    color: red;
}
表明：同级别的最后一个，而且最后一个要求是一个p标签

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>
<p>我是段落7</p>
这样的话只有6跟7都变红

#三、同级别的第n个
p:nth-child(3) {
    color: red;
}
表明：同级别的第3个，而且第3个要求是一个p标签

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落2”变红

#四、同级别的倒数第n个
p:nth-last-child(3) {
    color: red;
}
表明：同级别的倒数第3个，而且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落6.1”和“我是段落5”被选中
同级别示范 
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
#一、同级别同类型的第一个
p:first-of-type {
    color: red;
}
“我是段落1”和“我是段落6.1”被选中

#二、同级别同类型的最后一个
p:last-of-type {
    color: red;
}
“我是段落7”和“我是段落6.2”被选中

#三、同级别同类型的第n个
p:nth-of-type(2) {
    color: red;
}
“我是段落2”和“我是段落6.2”被选中

#四、同级别同类型的倒数第n个
p:nth-last-of-type(2) {
    color: red;
}
“我是段落5”和“我是段落6.1”被选中
同级别同类型实例 
#一、同类型的惟一一个
p:only-of-type {
    color: red;
}

<h1>我是标题</h1>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>

“我是段落7“被选中

#二、同级别的惟一一个
p:only-child {
    color: red;
}

<h1>我是标题</h1>
<div>
    <p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被选中
其余状况

6、 属性选择器

#一、做用：根据指定的属性名称找到对应的标签，而后设置属性
       该选择器，最经常使用于input标签
 
#二、格式与具体用法：
    [属性名]
    其余选择器[属性名]
    [属性名=值]
    [属性名^=值]
    [属性名$=值]
    [属性名*=值]

    例1：找到全部包含id属性的标签
        [id]
    
    例2：找到全部包含id属性的p标签
        p[id]
    
    例3：找到全部class属性值为part1的p标签
        p[class="part1"]
    
    例4：找到全部href属性值以https开头的a标签
        a[href^="https"]
        
    例5：找到全部src属性值以png结果的img标签
        img[src$="png"]
        
    例6：找到全部class属性值中包含part2的标签
        [class*="part"] 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style type="text/css">

        [id] {
            color: red;
        }


        p[id] {
            font-size: 30px;
        }


        p[class="part1"] {
            color: green;
        }

        a[href^="https"] {
            font-size: 50px;
        }

        img[src$="jpg"] {
            width: 300px;
        }

        [class*="part"] {
            text-decoration: line-through;
        }



    </style>
</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落</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="2.jpg" alt="加载失败">
    <img src="1.jpg1" alt="加载失败">
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>
具体演示

7、 伪类选择器

#一、做用：经常使用的几种伪类选择器。

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

#1.2 访问过的超连接a标签样式：
a:visited {
  color: gray;
}

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

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

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

#2 注意：
1 a标签的伪类选择器能够单独出现，也能够一块儿出现
2 a标签的伪类选择器若是一块儿出现，有严格的顺序要求，不然失效
    link，visited，hover，active
3 hover是全部其余标签均可以使用的
4 focus只给input标签使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>

    <style type="text/css">
        a:link {
            color: #cccccc;
        }
        a:visited {
            color: #55BBBB;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: red;
        }

        input:hover {
            outline: none;
            background-color: #cccccc;

        }

    </style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>
<input type="text">
</body>
</html>
伪类选择器实例

8、 伪元素选择器

#一、经常使用的伪元素。
#1.1 first-letter：杂志类文章首字母样式调整
例如：
p:first-letter {
  font-size: 48px;
}

#1.2 before
用于在元素的内容前面插入新内容。
例如：

p:before {
  content: "*";
  color: red;
}
在全部p标签的内容前面加上一个红色的*。

#1.3 after
用于在元素的内容后面插入新内容。
例如：

p:after {
  content: "?";
  color: red;
}
在全部p标签的内容后面加上一个蓝色的?。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>

    <style type="text/css">
        p:first-letter {
            font-size: 50px;
        }
        /*两个冒号与一个是同样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/
        a::after {
            content: "?";
            color: red;
        }
        a:before {
            content: "！";
            color: green;
        }

    </style>
</head>
<body>
<p>英雄不问出处，流氓不论岁数</p>
<a href="#" class="help">多可能是干什么的</a>
<a href="#" class="help">多可能是干什么的</a>
<a href="#" class="help">多可能是干什么的</a>
</body>
</html>
伪元素演示

9、 CSS三大特性

一、继承性

#一、定义：给某一个元素设置一些属性，该元素的后代也可使用，这个咱们就称之为继承性

#二、注意：
    一、只有以color、font-、text-、line-开头的属性才能够继承
    2、a标签的文字颜色和下划线是不能继承别人的
    3、h标签的文字大小是不能继承别人的，会变大，可是会在原来字体大小的基础上变大
    
    ps:打开浏览器审查元素能够看到一些inherited from。。。的属性
#三、应用场景：
    一般基于继承性统一设置网页的文字颜色，字体，文字大小等样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">

        div {
            color: red;
            font-size: 50px;
        }


    </style>
</head>
<body>

<div>
    <h1>我是标题</h1>
    <p><a href="#">多多最帅</a></p>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航2</li>
    </ul>
</div>

<div>
    <div>
        <p>aaaa</p>
    </div>
    <div>
        <p>bbbb</p>
    </div>
</div>


</body>
</html>
继承性演示

二、层叠性

#一、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，
即若是有多个选择器选中了同一个标签那么会有覆盖效果

#二、注意：
1、层叠性只有在多个选择器选中了同一个标签，而后设置了相同的属性，
才会发生层叠性
ps：经过谷歌浏览器能够查看到，一些属性被划掉了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠性</title>

    <style type="text/css">

        p {
            color: red;
        }

        .ppp {
            color: green;
        }

    </style>
</head>
<body>

<p class="ppp">我是段落</p>

</body>
</html>
层叠性演示

三、优先级

#一、定义：当多个选择器选中同一个标签，而且给同一个标签设置相同的属性时，如何层叠就由优先级来肯定

#二、优先级
    总体优先级从高到底：行内样式>嵌入样式>外部样式

    行内样式并不推荐使用，因此咱们以嵌入为例来介绍优先级

一、大前提：直接选中 > 间接选中(即继承而来的)

#一、如下为直接选中
    <style type="text/css">
        #id1 {
            color: red;
        }

        .ppp {
            color: green;
        }

        p {
            color: blue;
        }
    </style>

#二、如下为间接选中
    <style type="text/css">
        ul {
            color: yellow;
        }
    </style>


    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
直接选中优先级间接选中示范

二、若是都是间接选中，那么谁离目标标签比较近，就听谁的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>

    <style type="text/css">
        /*离目标近，显示的固然是red*/
        li {
            color: red;
        }
        /*离目标远*/
        ul {
            color: yellow;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>
都是间接选中，谁离目标近谁优先示范

三、若是都是直接选中，而且都是同类型的选择器，那么就是谁写的在后面就听谁的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>

    <style type="text/css">
        p {
            color: red;
        }
        /*一样都是标签选择器，谁写在后面谁生效*/
        p {
            color: yellow;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>
一样都是标签选择器，谁写后面谁生效示范

四、若是都是直接选中，而且是不一样类型的选择器，那么就会按照选择器的优先级来层叠

    id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>

    <style type="text/css">
        /*打开浏览器依次去掉优先级高的来进行验证*/
        #id1 {
            color: red;
        }
        .ppp {
            color: green;
        }
        p {
            color: blue;
        }
        * {
            color: yellow;
        }
        li {
            color: #7e1487;
        }
        
    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>
演示

五、优先级之!important

#一、做用：还有一种不讲道理的!import方式来强制指定的属性的优先级提高为最高，可是不推荐使用。由于大量使用!import的代码是没法维护的。
  
#二、注意：
    1、!important只能用于直接选中，不能用于间接选中
    2、!important只能用于提高被指定的属性的优先级，其余属性的优先级不会被提高
    三、!important必须写在属性值分号的前面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>

    <style type="text/css">
        /*打开浏览器依次去掉优先级高的来进行验证*/
        #id1 {
            color: red;
        }
        .ppp {
            color: green;
        }
        p {
            color: blue;
        }
        * {
            color: yellow !important;
        }
        li {
            color: #7e1487;
        }

    </style>
</head>
<body>

    <ul>
        <li>
            <p id="id1" class="ppp">我是span</p>
        </li>
    </ul>
</body>
</html>
了解就行，不推荐用

六、优先级之权重计算

#一、强调
若是都是直接选中，而且混杂了一系列其余的选择器一块儿使用时，则须要经过计算机权重来断定优先级

#二、计算方式
#一、id数多的优先级高
#二、id数相同，则断定类数多的优先级高
#三、id数、class数均相同，则断定标签数多的优先级高
#四、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>

    <style type="text/css">
        #id1 #id2 #id3 .ppp{
            color: red;
        }
        #id2 #id3.aaa p{
            color: purple;
        }

        #id1.ccc>.bbb>.aaa>p {
            color: pink;
        }

        #id1 .aaa .ppp {
            color: green;
        }

        #id2 .aaa p {
            color: yellow;
        }

        div ul li p {
            color: blue;
        }

        div ul p {
            color: cyan;
        }

    </style>
</head>
<body>
    <div id="id1" class="ccc">
        <ul id="id2" class="bbb">
            <li id="id3" class="aaa">
                <p class="ppp">我是段落</p>
            </li>
        </ul>
    </div>
</body>
</html>
一个一个对比，演示
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程