首页 > 其他分享 >你真的掌握样式优先级和选择器优先级吗?

你真的掌握样式优先级和选择器优先级吗?

时间:2023-04-23 23:13:39浏览次数:42  
标签:优先级 伪类 样式 个数 选择符 选择器

css选择器以及优先级

1.样式优先级

  • 最近的祖先样式比其他祖先样式优先级高
  • "直接样式"比"祖先样式"优先级高
  • 选择器优先级

    内联样式 > id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

    • 组合选择符
      • 分类
        1. 后代选择符

          .a .b{}

        2. 子选择符

          .a > .b{}

        3. 相邻选择符

          .a + .b {}

      • 选择符优先级
          1.计算id选择器的个数(a)
          2.计算类选择器、属性选择器、伪类选择器的个数(b)
          3.计算标签选择器、伪元素选择器的个数(c)
          对比a、b、c的个数,相等则比较下一个
          若都相等,则按照“就近原则”比较
        
      • 属性后面加 !important 拥有最高优先级,若两个样式都有此设置,则对比选择器优先级

标签:优先级,伪类,样式,个数,选择符,选择器
From: https://www.cnblogs.com/chenzilong/p/17348059.html

相关文章

  • el-table设置表格表头和内容的对齐方式及样式
    在el-table标签上加上以下代码即可为表头和表格设置统一对齐方式和样式:header-cell-style="{'text-align':'center','background':'#f7f8fa'}":cell-style="{'text-align':'center'}" 在el-table-column标签......
  • el-button实现点击按钮更换背景色并自动回显原来的样式
    场景:点击按钮的会更改背景色会自动回显默认样式点击之前:点击之后自动又恢复点击前样式 实现:我用得是element-ui的el-button组件实现,代码如下在template中设置一个id<el-buttonclass="downloadBtn"id="resetFormBtn"@click="downloadBtn">报表下载</el-button> 在m......
  • 基于HTML5的移动Web应用——Bootstrap 样式案例
     需求说明使用container、row等栅格系统的知识布局网页结构使用表单元素制作登录页面使用btn-success制作“搜索”按钮,用btn-danger制作“登录”按钮运行效果新梦想技术分享参考代码<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><metaname="view......
  • 组件的样式(含三元表达式)
    04-组件的样式import'../css/01.css'//导入样式functionApp(){varmyname="lucax"varobj={background:"red",fontSize:"40px"//font-size所有样式的-都改为用驼峰写法去替代}return(<div>......
  • css在标签右上角添加“推荐”字样的斜三角样式
    可以使用CSS中的伪类:before来实现在标签右上角添加“推荐”字样的斜三角样式,具体实现代码如下:```.recommend:before{content:"推荐";position:absolute;top:-8px;right:-26px;z-index:1;padding:14px22px2px;background-color:#ff9900;t......
  • 类与样式绑定
    Class与Style绑定Vue专门为class和style的v-bind用法提供了特殊的功能增强,除字符串外,表达式的值也可以是对象或数组绑定HTMLclass可以给:class(v-bind:class缩写)传递一个对象来动态切换class<div:class="{active:isActive}"></div>这里是一个布尔值绑定,active是否存......
  • 博客园页面展示--前端及样式代码
    这是一个博客园的首页面的展示前端代码和样式代码样式代码CSS采用外部链接,建好文件直接复制运行vscode即可,话不多说,直接上代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Mickey-博客园</title><linkrel="stylesheet&q......
  • 在js中修改less文件内样式
    title:"在js中修改less文件内样式"date:2023-04-21T22:51:58+08:00tags:["React","less","JavaScript"]categories:["前端篇"]在项目中使用使用进度条时遇到了一点问题,根据需求进度条的百分比需要在条内显示,但是当完成度太低时由于进度条背景和百分比值都是接近的颜......
  • 网页滚动条样式修改
    title:网页滚动条样式修改date:2022-12-2116:03:45tags:['Css']categories:["前端篇"]修改网页中侧边滚动条可以对如下几方面进行修改::-webkit-scrollbar:滚动条整体::-webkit-scrollbar-thumb:可拖拽区域::-webkit-scrollbar-track:滚动条轨道::-webkit-scrollba......
  • EasyExcel格式化映射注解和样式注解详解
     https://blog.csdn.net/qq_44749491/article/details/127879946一、概述使用注解很简单,只要在对应的实体类上面加上注解即可。也就是说使用实体类模型来读写Excel文件时,可以通过注解来控制实体类字段和Excel列之间的对应关系。二、ExcelProperty2.1作用ExcelProperty注解用......