0 0 3 4 - CSS选择器优先级 | 全网最粗暴有效

不二如是 · 发表于 2017-1-27 13:01:57

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:24 编辑

在33我们设计了一个很酷炫的块状阴影。

有位超可爱的鱼油，在HTML（11 - 19）小结 | 【小白版】提出，优先级的疑问，今天搞定之！

到目前为止，我们已经搞定了C3很大一部分的基础知识。

因为不同类型的属性，可以干相同的事情，所以优先级自然就出现了！

先上代码：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"></style>
</head>
<body>
        <h1 class="Happy" id="FishC">新春快乐～</h1>
</body>
</html>

效果图：

添加CSS颜色样式：

<style type="text/css">
                h1{
                        color: red;
                }
                .Happy{
                        color: blue;
                }
                #FishC{
                        color:yellow;
                }
        </style>

你猜效果图，会显示什么效果呢？

游客，如果您要查看本帖隐藏内容请回复

在上面的代码中，我们使用了三种选择器：

id选择器（#FishC{...}）、类选择器（.Happy{...}）、标签选择器{h1{...}}

从效果图，我们知道，id选择器优先级最高！

现在注释掉，看剩下两个谁厉害：

h1{
                        color: red;
                }
                .Happy{
                        color: blue;
                }
                #FishC{
                        /*color:yellow;*/
                }

效果图：

不言而喻，类选择比较腻害～

在33、32、31、我们使用了类选择器，a:hover{...}，只要鼠标移动到某区域，会变亮。

我来总结下他们的优先级。

在日常开发复杂的Web时，不可避免的使用大量的样式表。

因为多，所以产生问题的可能性也大大提高了。

有很大一部分，是因为优先级！

不管怎样，一定要记住下面这个优先级表

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

shishunfu · 发表于 2017-4-27 09:04:30

交作业
*{} < b{} < .class{} < a:hover{} < #{}

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>选择器优先级</title>
        <style type="text/css">
                body{
                        text-align: center;
                }
                h1{
                        margin-top: 30px;
                        color: red;
                }
                .Happy{
                        color: blue;
                }
                #FishC{
                        color:yellow;
                }
                /*
                        通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}
                        *{} < b{} < .class{} < a:hover{} < #{}
                */
        </style>
</head>

<body>
        <h1 class="Happy" id="FishC">五一劳动节快乐～</h1>
</body>
</html>

znyl · 发表于 2017-2-25 08:59:07

感谢分享！！！

不二如是 · 发表于 2017-2-25 09:02:14

znyl 发表于 2017-2-25 08:59
感谢分享！！！

欢迎学习

欢迎订阅专辑：传送门

345127857 · 发表于 2017-3-7 15:52:29

6666支持

dreamdnj · 发表于 2017-3-17 13:47:24

感谢分享！！

joker11111 · 发表于 2017-3-28 23:32:55

这章虽然例子简单，但最后这幅图确实理解到了，记得前些章看的时候，就百度看过这个选择器优先级的关系，一脸懵逼，现在看来才理解一点，感谢不二

不二如是 · 发表于 2017-3-29 06:41:49

joker11111 发表于 2017-3-28 23:32
这章虽然例子简单，但最后这幅图确实理解到了，记得前些章看的时候，就百度看过这个选择器优先级的关系，一 ...

谢谢joker

理解万岁！！！

逢源try一try · 发表于 2017-5-12 11:56:44

学习一下

ganglianhuo2 · 发表于 2017-7-6 14:16:59

非常好

aswyamato1989 · 发表于 2017-7-19 03:25:05

回复看帖

aswyamato1989 · 发表于 2017-7-19 04:00:40

交作业！

白牙 · 发表于 2017-10-11 13:51:55

js前端web一把嗦

R9bot · 发表于 2018-3-15 22:31:14

likesunshine · 发表于 2018-3-23 17:03:46

效果图

floride · 发表于 2018-8-3 21:05:14

上帝也幽默 · 发表于 2018-8-22 14:55:01

ID>伪类>类>标签>通用

a211827754 · 发表于 2018-8-22 16:24:06

好好看好好学

船到桥头自然沉 · 发表于 2018-9-10 21:34:25

了解

soulwyb · 发表于 2018-10-25 23:47:58

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>34</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        h1 {
            color: red;
        }
        
        .Happy {
            color: blue;
        }
        /* #FishC {
            color: yellow;
        } */
    </style>

</head>

<body>
    <h1 class="Happy" id="FishC">新春快乐~</h1>
</body>

</html>

这个很重要
通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 3 4 - CSS选择器优先级 | 全网最粗暴有效

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

点评

点评

评分