CSS选择器优先级详细介绍

本文为大家分享的是css选择器优先级相关资料介绍,供大家参考,具体内容如下

1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序

例如:

.a{       color:red  }   .b{       color:green  }  

登录后复制

由于b晚于a定义,所以b覆盖a,反之则a覆盖b

2.类选择器优先级大于标签选择器

立即学习“前端免费学习笔记(深入)”;

例如:

div{       color:red  }   .div{       color:green  }   

登录后复制

.div将覆盖div

3.类选择器优先级等于纯属性选择器,谁后定义谁优先级高。

例如:

[data-name='div']{        color: red     }    .a{         color:blue     }   

登录后复制

.a将覆盖[data-name=’div’],反之[data-name=’div’]覆盖.a

4.类选择器优先级小于标签+属性组合选择器。

例如:

div[data-name='div']{        color: red     }    .a{         color:blue     }   

登录后复制

5.类选择器优先级小于id选择器。

例如:

.a{        color:blue     }     #div{         color: red     }   

登录后复制

.a将被#div覆盖

6.标签+属性组合选择器优先级小于id选择器。

例如:

[data-name='div']{         color:blue   }    #div{         color: red  }  

登录后复制

#div将会覆盖[data-name=’div’]

7.标签选择器优先级小于id选择器。

例如:

div{         color:blue   }     #div{        color: red     } 

登录后复制

#div将会覆盖div

8.标签选择器优先级小于纯属性选择器。

例如:

div{         color:blue     }   [data-name='div']{         color: red     }   

登录后复制

div将会被 [data-name=’div’]覆盖

综上所述: 标签选择器。

更多选择器的资料大家可以查看css手册中的css选择器章节

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3119757.html

(0)
上一篇 2025年3月29日 14:37:01
下一篇 2025年3月29日 14:37:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css 自动换行 word-break:break-all和word-wrap:break-word

    1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的…

    编程技术 2025年3月29日
    100
  • CSS3动画之3D旋转书本效果

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用。 书本的3D模型是所有商品中最为简单的,因为其本质上就是…

    编程技术 2025年3月29日
    100
  • css 浏览器兼容性总结

    一、css样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了f…

    编程技术 2025年3月29日
    100
  • CSS3绘制三角形实例介绍

    利用css的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是他的border的叠加,由于相邻boder会重叠,故存在内容…

    编程技术 2025年3月29日
    100
  • css 高大上选择器:nth-child() 应用实例

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”。 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器…

    编程技术 2025年3月29日
    100
  • 纯css代码如何制作透明三角形

    css实现下图样式,具体像素值记不住了,很好设置,html code (2014百度秋招面试题): 登录后复制 分析:这个样式的关键就在三角形和三角形实现了之后的变成只有个边框的三角形。利用元素的:after和:before伪元素(请自动忽…

    编程技术 2025年3月29日
    100
  • CSS选择器详解

    1、元素选择器 这是最基本的css选择器,html文档中的元素本身就是一个选择器: p {line-height:1.5em; margin-bottom:1em;}   2、关系选择器 E F:后代选择器,该选择器定位元素E的后代中所有元…

    编程技术 2025年3月29日
    100
  • CSS 使用border来创建三角形的基本思路和实例

    比较简单实用的还是使用border来创建三角形,今天主要研究这个的实现 将边框分别设置为红/黄/蓝/绿 .triangle { height: 0; width: 0; overflow: hidden; font-size: 0; lin…

    2025年3月29日 编程技术
    100
  • css 实现DIV水平垂直居中于屏幕

    代码如下: css 实现DIV水平垂直居中于屏幕 body{ margin:0px; padding:0px; } #thediv{ width:100px; height:100px; background:green; position…

    编程技术 2025年3月29日
    100
  • CSS常用文本样式实例介绍

    css文本样式是相对于内容进行的样式修饰。由于在层叠关系中,内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容。本文将详细介绍文本相关样式。 css tex…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论