您现在的位置是:首页 > 正文

html选择器优先值,CSS属性选择器高级用法及选择器优先级问题

2024-01-30 21:48:30阅读 0

CSS选择器之属性选择器

1:[attr] 存在此属性即可

2:[attr = 'attr_value'] 属性值为给定值即可

3:[attr ^= 'attr_value'] attr属性键以container开头 即便是字符串匹配

div[data-type ^= 'container'] {

background-color : #000;

}

开头存在 container 匹配成功

开头存在 container 匹配成功

不在开头 匹配失败

4:[attr *= 'attr_value'] attr属性键中存在给定的值即可 即便是字符串匹配

div[data-type *= 'container'] {

background-color : #00f;

}

只要键值中有给定的值即可匹配成功

5:[attr $= 'attr_value'] attr属性键结尾匹配 即便是字符串匹配

div[data-type $= 'container'] {

background-color : #0ff;

}

结尾不存在 失败

结尾存在 成功

结尾存在 成功

6:[attr ~= 'attr_value'] attr属性键值以空格分隔 其中存在给定的值即可匹配成功

div[data-type ~= 'container'] {

background-color : #f00;

}

空格拆分 存在container 匹配成功

不存在 失败

空格拆分 存在container 匹配成功

7:[attr |= 'attr_value'] attr属性键值以"-" 分隔 且拆分得到的第一个值为给给定属性值 匹配成功

div[data-type |= 'container'] {

background-color : #f0f;

}

-拆分 第一个值为container 匹配成功

不存在 失败

-拆分 第一个值不是container 匹配失败

CSS选择器之优先级

ID选择器 100 类选择器 10元素选择器 1

大家都知道 内联  >  内部  > 外部 而且样式内外样式表会因定义或引入的先后顺序后者覆盖前者

但样式选择器的优先级并不会因定义的先后顺序而发生覆盖

#container .article p {

background-color:#000;

font-size:14px;/* 无效 后面的 important 会优先于一切选择器的定义*/

}

//并不能覆盖前者 优先级低于前者

.article p {

background-color:#fff;

font-size:14px;/* 无效 后面的 important 会优先于一切选择器的定义*/

}

//同上

p {

background-color:#ccc;

font-size:16px!important;/*important 会优先于一切选择器的定义*/

}

但以上都会被指定为 important 属性覆盖掉

网站文章

  • 存储:F2FS文件系统读写性能良好

    存储:F2FS文件系统读写性能良好

    from : http://mobile.zol.com.cn/396/3960365.html

    2024-01-30 21:48:22
  • Linux 内核编译 LOCALVERSION 配置(分析内核版本号自动添加的"+"号)

    Linux 内核编译 LOCALVERSION 配置(分析内核版本号自动添加的"+"号)

    1 问题发现编译主线kernel版本的时候发现, 的内核版本编译成功后生成的版本号变成了"x.y.z+", 为什么后面会多一个加号呢?刚开始考虑是不是CONFIG...

    2024-01-30 21:47:51
  • BUUCTF靶场练习——第三周

    BUUCTF靶场练习——第三周

    整理了buuctf靶场第九第十道web题目的做题笔记并整理了涉及到的部分知识和扩展

    2024-01-30 21:47:43
  • 集群,分布式,集群的理解与区别

    集群,分布式,集群的理解与区别

    1.集群:同一个业务,部署在多个服务器上。 2.分布式:将一个大的系统划分为多个业务模块,业务模块分别部署到不同的机器上,各个业务模块之间通过接口进行数据交互。 3.微服务:是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成。系统中的各个微服务可被独立部署,各个微服务之间是松耦合的。每个微服务仅关注于完成一件任务并很好地完成该任务。在所有情况下,每个任务代表着一个小的业...

    2024-01-30 21:47:19
  • 几个非常有用的iOS学习博客链接

    几个非常有用的iOS学习博客链接请仔细阅读相关链接下的其他博客的文章:http://blog.csdn.net/sanpintian/article/details/7402853http://blog.csdn.net/sanpintian/article/details/8139878http://blog.csdn.net/san...

    2024-01-30 21:46:51
  • 移动端吸顶效果(小程序,h5)

    移动端吸顶效果(小程序,h5)

    前言:实例源码:#sticky-nav { position : sticky ; top : 100px ;}

    2024-01-30 21:46:44
  • 商业数据分析从入门到入职(1)商业数据分析综述

    商业数据分析从入门到入职(1)商业数据分析综述

    分析一个问题需要分析问题的能力;商业数据分析的从业要求包括基础知识、工具、业务能力和软技能;在数据获取、数据处理等5个阶段有各自所需要的技能;评价一个事务需要从多个角度衡量,基本的分析流程包括理解商业...

    2024-01-30 21:46:36
  • Win 10 利用conda安装tensorflow GPU 教程 (不用额外安装CUDA和cudnn)

    安装过程掉了好多坑,看到这篇安装教程觉得直白容易上手,而且亲测有效,于是就翻译一下,并根据实际一般情况进行了修改。 原文链接:https://millansanchez.medium.com 安装之前...

    2024-01-30 21:46:07
  • 搭建 LNMP + CodeIgniter 开发环境

    搭建 LNMP + CodeIgniter 开发环境 搭建 LNMP 环境 首先搭建 LNMP 的服务器环境 安装 Nginx, MySQL 和 PHP 软件包 执行以下命令: yum install -y nginx mariadb-server mariadb php php-fpm php-mysql启动并检查 Nginx 和 PHP 的安装情况 修改 /etc/n...

    2024-01-30 21:46:01
  • 虚拟机有告警,物理服务器没有,标准Citrix_服务器虚拟化测试方案.doc

    标准Citrix_服务器虚拟化测试方案***Citrix服务器虚拟化测试方案与测试报告目录测试目的4测试计划4测试人员4测试环境4示意图5测试内容及结果记录6测试结果总结9测试目的验证能否将多台物理服...

    2024-01-30 21:45:55