鱼C论坛

 找回密码
 立即注册
查看: 5839|回复: 47

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

[复制链接]
发表于 2017-1-27 13:01:57 | 显示全部楼层 |阅读模式

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

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

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

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

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

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

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

先上代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css"></style>
  7. </head>
  8. <body>
  9.         <h1 class="Happy" id="FishC">新春快乐~</h1>
  10. </body>
  11. </html>
复制代码

效果图:
Snip20170127_82.png


添加CSS颜色样式:
  1. <style type="text/css">
  2.                 h1{
  3.                         color: red;
  4.                 }
  5.                 .Happy{
  6.                         color: blue;
  7.                 }
  8.                 #FishC{
  9.                         color:yellow;
  10.                 }
  11.         </style>
复制代码


你猜效果图,会显示什么效果呢?
游客,如果您要查看本帖隐藏内容请回复


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

id选择器(#FishC{...})、类选择器(.Happy{...})、标签选择器{h1{...}}

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

现在注释掉,看剩下两个谁厉害:
  1. h1{
  2.                         color: red;
  3.                 }
  4.                 .Happy{
  5.                         color: blue;
  6.                 }
  7.                 #FishC{
  8.                         /*color:yellow;*/
  9.                 }
复制代码

效果图:
Snip20170127_84.png


不言而喻,类选择比较腻害~

在33、3231、我们使用了类选择器,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 课程:

评分

参与人数 3荣誉 +15 鱼币 +15 贡献 +9 收起 理由
STmove + 5 + 5 + 3
睦ちゃん她爹 + 5 + 5 + 3 无条件支持楼主!
alltolove + 5 + 5 + 3 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-4-27 09:04:30 | 显示全部楼层
交作业
*{} < b{} < .class{} < a:hover{} < #{}
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>选择器优先级</title>
  6.         <style type="text/css">
  7.                 body{
  8.                         text-align: center;
  9.                 }
  10.                 h1{
  11.                         margin-top: 30px;
  12.                         color: red;
  13.                 }
  14.                 .Happy{
  15.                         color: blue;
  16.                 }
  17.                 #FishC{
  18.                         color:yellow;
  19.                 }
  20.                 /*
  21.                         通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}
  22.                         *{} < b{} < .class{} < a:hover{} < #{}
  23.                 */
  24.         </style>
  25. </head>

  26. <body>
  27.         <h1 class="Happy" id="FishC">五一劳动节快乐~</h1>
  28. </body>
  29. </html>
复制代码

点评

我很赞同!: 5.0
我很赞同!: 5
应景!  发表于 2017-4-27 09:05
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-25 08:59:07 | 显示全部楼层
感谢分享!!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-2-25 09:02:14 | 显示全部楼层
znyl 发表于 2017-2-25 08:59
感谢分享!!!

欢迎学习

欢迎订阅专辑:传送门
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-7 15:52:29 | 显示全部楼层
6666支持
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-17 13:47:24 | 显示全部楼层
感谢分享!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-28 23:32:55 | 显示全部楼层
这章虽然例子简单,但最后这幅图确实理解到了,记得前些章看的时候,就百度看过这个选择器优先级的关系,一脸懵逼,现在看来才理解一点,感谢不二

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-3-29 06:41
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-29 06:41:49 | 显示全部楼层
joker11111 发表于 2017-3-28 23:32
这章虽然例子简单,但最后这幅图确实理解到了,记得前些章看的时候,就百度看过这个选择器优先级的关系,一 ...

谢谢joker

理解万岁!!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-5-12 11:56:44 From FishC Mobile | 显示全部楼层
学习一下
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-6 14:16:59 | 显示全部楼层
非常好
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-19 03:25:05 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-19 04:00:40 | 显示全部楼层
交作业!
034.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-10-11 13:51:55 | 显示全部楼层
js前端web一把嗦
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-3-15 22:31:14 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-3-23 17:03:46 | 显示全部楼层
效果图
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-3 21:05:14 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-22 14:55:01 | 显示全部楼层
ID>伪类>类>标签>通用

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-8-22 17:29

评分

参与人数 1鱼币 +3 收起 理由
不二如是 + 3 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-22 16:24:06 | 显示全部楼层
好好看好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-10 21:34:25 | 显示全部楼层
了解
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-10-25 23:47:58 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>34</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style>
  9.         h1 {
  10.             color: red;
  11.         }
  12.         
  13.         .Happy {
  14.             color: blue;
  15.         }
  16.         /* #FishC {
  17.             color: yellow;
  18.         } */
  19.     </style>

  20. </head>

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

  24. </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{...}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 16:53

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表