分享各种网络资源
是我乃至整个互联网的精髓所在
最新公告:
  • 开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
  • 目前站点正在不断折腾和调试中,如有问题请见谅
     您目前所在位置: 站点首页 » 移动互联 » 学习之路 » CSS中关于优先级的问题
  • 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中关于优先级的问题
    匿名

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

    CSS中关于优先级的问题
    5 + 4 =