分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 移动互联 » 学习之路 » CSS中关于优先级的问题
+

CSS中关于优先级的问题

【文章目录】

CSS中关于优先级的问题-BanYuner

下午的时候,我有段时间就在研究如何让一个元素在PC端不出现,但是在移动端出现,那么我想到了两种方法。

一种就是直接通过判断语句来对设备精心判断,另一种就是利用响应式设计来达成目的。那么我很明显就是利用了响应式设计来达到这个目的了。

首先我一开始就直接在CSS样式表中定义了某个元素的显示属性为“none”,也就是不显示,接下来到移动端设置显示属性为“block”,我天真的以为这样就可以在PC端隐藏,但是移动端显示。可是我太傻太天真,效果并没有如我想的一样出现,而是”none”属性让”block”属性无法生效,那么为什么会这样,我第一时间就想到了,是否存在优先属性或者优先选择的问题,那么带着这样的问题就进行了百度,最后看到了两篇文章,均来自博客园,鉴于内容有点多 而且比较详细,所以我直接附上相关地址,然后主要引用重要部分。

相关地址如下:

http://www.cnblogs.com/iloveyoucc/archive/2012/09/06/2673003.html
http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html

要是想要看详细的,那么可以去上面的地址查看,如果你觉得只想要实现这个功能,那么请继续往下面看:

样式的优先级

多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。
一般情况下,优先级如下:
(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

三种基本的选择器类型

  • 标签名选择器,如:p{},即直接使用HTML标签作为选择器。
  • 类选择器,如.polaris{}。
  • ID选择器,如#polaris{}。
  • 三种选择器的优先级别一次是ID选择器>类选择器>标签选择器。

    选择器对应的权值

    相应的权值依次为1.10.100,但是这里还有一种可能就是内联样式,也就是通过直接写在文件中的样式,虽然这种方法不值得提倡,但是这种情况下的样式表的权值是最大的,为1000,或者你可以看看这种解释:
    CSS中关于优先级的问题-BanYuner

    1. 内联样式表的权值最高 1000;

    2. ID 选择器的权值为 100

    3. Class 类选择器的权值为 10

    4. HTML 标签选择器的权值为 1

    CSS 优先级法则

  • 选择器都有一个权值,权值越大越优先;
  • 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
  • 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
  • 继承的CSS 样式不如后来指定的CSS 样式;
  • 在同一组属性设置中标有“!important”规则的优先级最大;示例如下:
  • 个人理解

    其实上面的东西都是我从文章里面引用出来的,那么我这里还是用我自己的理解简单的说一下。

    首先我们需要理解的就是样式表的优先级,内联样式就是最优先级别的,其次就是内部样式了,也就是不是直接写到属性上面,但是是在同一个文件中,外部样式就是直接通过引入CSS表。这三种的级别都是依次降低的。

    其次就是在拥有同属性的情况之下,比如页面中含有display属性,但是出现了两个属性,一个是“none”,一个“block”,但是我想要在某种情况下,比如移动端的时候不显示,那么也就是说需要在移动端的时候,“none”的属性要高于“block”,那么最简单的办法就是直接在“none”属性后面加上!important,那么这样话就可以实现了,至少我是这么实现的,并不知道还有别的好方法么。

    最后就是关于选择器的问题,之前一直不明白为什么有的使用“#”有的使用“.”,后来看了这两篇文章之后我有了一定的了解了,可能不是很深,但是还是能理解。“#”对应的就是id选择器,而“.”对应的多半就是class选择器。

    上面的理解我并不知道是否正确,只能作为个人理解了。

    关注我们 打赏 分享此文
    微信扫码,关注我们
    扫码,支持我
    CSS中关于优先级的问题
    支付宝(点击图片切换)
    扫码,支持我
    CSS中关于优先级的问题
    微信(点击图片切换)
    扫码,手机看
    CSS中关于优先级的问题

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

     相关推荐

    换一批 换一批
    • PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法

      PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法

      今天给站点添加功能的时候,遇到了这个问题,经过寻找,我最终还是找到了相关文章。

      点击查看
    • PHP 字符串获取 substr 与 strstr 函数

      PHP 字符串获取 substr 与 strstr 函数

      前段时间我记录了一篇文章,是关于JS下如何切割字符串的问题,但是昨天我又遇到了同样的问题,不同的就是是在PHP的情况下如 ...

      点击查看
    • JavaScript split() 方法使用介绍

      JavaScript split() 方法使用介绍

      折腾的路对于我来说是种没有结束,这不,我又开始折腾了。

      点击查看
    • BAT命令大全

      BAT命令大全

      下面是我从网络上面转载过来的关于BAT命令的相关文章,希望对大家有用。

      点击查看
    • Excel批量添加前后缀内容的两种技巧方法

      Excel批量添加前后缀内容的两种技巧方法

      此前也是遇到了这样的问题,当时也是不知道怎么解决,尝试了很多次都没有结果,最后只能放弃,但是今天看了这个教程之后,发 ...

      点击查看
    • Excel技巧:十种全选操作方式

      Excel技巧:十种全选操作方式

      因为最近做表比较厉害,所以还是比关注这个东西的,这里分享一个全选的技巧给大家,一般来说的话,我们全选的技巧无非就是拖 ...

      点击查看
    • WordPress数据库表及字段详解

      WordPress数据库表及字段详解

      今天在网络上面看到了这篇文章,觉得还是很有效果的,对与不懂WordPress数据库的小白有很大的帮助,对与我同样也是存在很大 ...

      点击查看
    • CSS3:box-shadow使用和技巧总结

      CSS3:box-shadow使用和技巧总结

      text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越 ...

      点击查看
    • 一个问题让我学习到了两个知识点

      一个问题让我学习到了两个知识点

      昨日在贴吧上面看到了一个帖子,说的是在移动端手机菜单显示不正常,我本着帮人并且自己学习经验的想法去看了一下这个站点, ...

      点击查看
    • rel=”nofollow”属性的用法及其差别

      rel=”nofollow”属性的用法及其差别

      今天一个群友反应,怎么能禁止百度蜘蛛访问一个链接,他的方法就是通过.htaccess来设置,但是我的想法就是直接在这个链接后 ...

      点击查看
    • 通过JavaScript判断终端设备和浏览器

      通过JavaScript判断终端设备和浏览器

      通过JS代码,我们可以干很多事情,这里同样介绍一种通过JavaScript判断终端设备和浏览器的相关代码,代码方面来自爱博说博客 ...

      点击查看
    • 如何修改ul以及li小圆点的颜色

      如何修改ul以及li小圆点的颜色

      CSS的学习真的是无穷无尽的,最近在爱博说博客看到了关于如何修改ul以及li小圆点的颜色的教程,我当时并没有看中修改原点的 ...

      点击查看

      目前有 0 条评论 其中:访客: 0 条, 博主: 0 条

    CSS中关于优先级的问题
    评分: 5 + 3 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)