分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 移动互联 » 学习之路 » 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中关于优先级的问题
    匿名

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

    相关推荐

    • 如何利用float(浮动)自适应居中

      如何利用float(浮动)自适应居中

      尤其是在制作导航时,float(浮动)自适应居中是经常运用得到,无论使用text-align: center(文本居中),还是使用vertical-al ...

      点击查看
    • UI 交互动效的制作原则

      UI 交互动效的制作原则

      今天在一个站点看到了这篇文章,我个人觉得是很有必要转载过来的,毕竟我了解CSS方面也很长时间了,但是看了这篇文章之后, ...

      点击查看
    • PHP中有限数组随机取值问题

      PHP中有限数组随机取值问题

      今天在折腾的时候,遇到了这个问题,但是经过百度以及询问群友之后,最后还是能解决了,其实研究了半天就是有一个地方错了, ...

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

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

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

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

      PHP 字符串获取 substr 与 strstr 函数

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

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

      JavaScript split() 方法使用介绍

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

      点击查看
    CSS中关于优先级的问题
    0 + 5 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)