QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 745|回复: 14

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

[复制链接]
最佳答案
97 
累计签到:500 天
连续签到:28 天
不二如是 发表于 2017-1-27 13:01:57 74514 | 显示全部楼层 |阅读模式

马上注册加入鱼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 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:115 天
连续签到:6 天
shishunfu 发表于 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
最佳答案
0 
累计签到:6 天
连续签到:1 天
znyl 发表于 2017-2-25 08:59:07 | 显示全部楼层
感谢分享!!!
最佳答案
97 
累计签到:500 天
连续签到:28 天
不二如是  楼主| 发表于 2017-2-25 09:02:14 | 显示全部楼层
znyl 发表于 2017-2-25 08:59
感谢分享!!!

欢迎学习

欢迎订阅专辑:传送门
最佳答案
0 
累计签到:3 天
连续签到:1 天
345127857 发表于 2017-3-7 15:52:29 | 显示全部楼层
6666支持
最佳答案
0 
累计签到:88 天
连续签到:1 天
dreamdnj 发表于 2017-3-17 13:47:24 | 显示全部楼层
感谢分享!!
最佳答案
3 
累计签到:411 天
连续签到:1 天
joker11111 发表于 2017-3-28 23:32:55 | 显示全部楼层
这章虽然例子简单,但最后这幅图确实理解到了,记得前些章看的时候,就百度看过这个选择器优先级的关系,一脸懵逼,现在看来才理解一点,感谢不二

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-3-29 06:41
最佳答案
97 
累计签到:500 天
连续签到:28 天
不二如是  楼主| 发表于 2017-3-29 06:41:49 | 显示全部楼层
joker11111 发表于 2017-3-28 23:32
这章虽然例子简单,但最后这幅图确实理解到了,记得前些章看的时候,就百度看过这个选择器优先级的关系,一 ...

谢谢joker

理解万岁!!!
最佳答案
0 
累计签到:43 天
连续签到:1 天
逢源try一try 发表于 2017-5-12 11:56:44 From FishC Mobile | 显示全部楼层
学习一下
最佳答案
0 
累计签到:5 天
连续签到:1 天
ganglianhuo2 发表于 2017-7-6 14:16:59 | 显示全部楼层
非常好
最佳答案
0 
累计签到:614 天
连续签到:39 天
aswyamato1989 发表于 2017-7-19 03:25:05 | 显示全部楼层
回复看帖
最佳答案
0 
累计签到:614 天
连续签到:39 天
aswyamato1989 发表于 2017-7-19 04:00:40 | 显示全部楼层
交作业!
034.jpg
最佳答案
0 
累计签到:140 天
连续签到:1 天
白牙 发表于 2017-10-11 13:51:55 | 显示全部楼层
js前端web一把嗦

发表回复

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

本版积分规则

关闭

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

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2017-12-16 19:06

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