QQ登录

只需一步,快速开始

搜索
查看: 677|回复: 14

[系列教程] 0 0 3 4 - CSS选择器优先级 | 全网最粗暴有效

[复制链接]
最佳答案
92 
累计签到:445 天
连续签到:115 天
发表于 2017-1-27 13:01:57 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

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

x
本帖最后由 不二如是 于 2017-5-21 12:25 编辑

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




这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑传送门)(不喜欢更要订阅

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
alltolove + 5 + 5 + 3 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:102 天
连续签到:1 天
发表于 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
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:6 天
连续签到:1 天
发表于 2017-2-25 08:59:07 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
92 
累计签到:445 天
连续签到:115 天
发表于 2017-2-25 09:02:14 | 显示全部楼层
znyl 发表于 2017-2-25 08:59
感谢分享!!!

欢迎学习

欢迎订阅专辑:传送门
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:2 天
连续签到:1 天
发表于 2017-3-7 15:52:29 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:88 天
连续签到:1 天
发表于 2017-3-17 13:47:24 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
3 
累计签到:409 天
连续签到:1 天
发表于 2017-3-28 23:32:55 | 显示全部楼层
这章虽然例子简单,但最后这幅图确实理解到了,记得前些章看的时候,就百度看过这个选择器优先级的关系,一脸懵逼,现在看来才理解一点,感谢不二

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-3-29 06:41
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
92 
累计签到:445 天
连续签到:115 天
发表于 2017-3-29 06:41:49 | 显示全部楼层
joker11111 发表于 2017-3-28 23:32
这章虽然例子简单,但最后这幅图确实理解到了,记得前些章看的时候,就百度看过这个选择器优先级的关系,一 ...

谢谢joker

理解万岁!!!
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:40 天
连续签到:1 天
发表于 2017-5-12 11:56:44 From FishC Mobile | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:4 天
连续签到:1 天
发表于 2017-7-6 14:16:59 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:560 天
连续签到:5 天
发表于 2017-7-19 03:25:05 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:560 天
连续签到:5 天
发表于 2017-7-19 04:00:40 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
最佳答案
0 
累计签到:134 天
连续签到:1 天
发表于 2017-10-11 13:51:55 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋手机版Archiver( 粤公网安备 44051102000370号 | 粤ICP备11014136号

© 2010-2017 FishC.com GMT+8, 2017-10-21 20:01 Powered by Discuz! X2.5 Theme by dreambred

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