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

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

本帖最后由 不二如是 于 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>

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

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

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{...}

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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支持{:10_256:}

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

感谢分享！！

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

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

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

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

{:10_287:}谢谢joker

理解万岁！！！

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

学习一下{:10_257:}

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

{:10_249:}

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

效果图

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

{:7_146:}

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

ID>伪类>类>标签>通用{:10_323:}

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{...}
页: [1] 2 3
查看完整版本: 0 0 3 4 - CSS选择器优先级 | 全网最粗暴有效