CSS 选择器及优先级

1.根据权值计算

div .class1 #people的权值等于1+10+100=111

  .class2 li #age的权值等于10+1+100=111

2.权值相同,那么以后定义的为准。

3.一般在类选择器、属性选择器、伪类选择器优先级比较容易出错。

css3选择器主要有:基本选择器 , 层次选择器,  伪类选择器 ,  伪元素选择器 , 属性选择器

基本选择器

 层次选择器

伪类选择器分为 动态伪类选择器, 目标伪类选择器, 语言伪类选择器, UI元素状态伪类选择器,结构伪类选择器,否定伪类选择器

伪元素选择器

属性选择器

CSS 选择器及优先级的更多相关文章

  1. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  2. CSS选择器、优先级与匹配原理(转)

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  3. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  4. 转载:详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  5. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  6. 详解CSS选择器、优先级与匹配原理【转】

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  7. (转)css选择器及其优先级

    文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...

  8. CSS选择器、优先级与匹配原理

    为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...

  9. CSS选择器及其优先级

    一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. Python os.dup2() 方法

    概述 os.dup2() 方法用于将一个文件描述符 fd 复制到另一个 fd2.高佣联盟 www.cgewang.com Unix, Windows 上可用. 语法 dup2()方法语法格式如下: o ...

  2. PHP substr_count() 函数

    实例 计算 "world" 在字符串中出现的次数: <?php高佣联盟 www.cgewang.comecho substr_count("Hello world. ...

  3. [转]Nginx限流配置

    原文:https://www.cnblogs.com/biglittleant/p/8979915.html 作者:biglittleant 1. 限流算法 1.1 令牌桶算法 算法思想是: 令牌以固 ...

  4. 执行HiveSQL出现的问题

    -- ::, INFO [main] org.apache.hadoop.hive.ql.exec.ReduceSinkOperator: RECORDS_OUT_INTERMEDIATE:, -- ...

  5. 【BZOJ4398】福慧双修 题解(建图优化)

    题目链接 题目大意:给定一张$n$个点$m$条边的无向图,每条边两个方向的权值不一定相同.问从$1$出发不重复走一条边回到$1$的最短路径. ------------------- 暴力不太会.大概是 ...

  6. 基于 JavaEmail 简单的发送邮件点到点,一对多(图片和附件)之多收件人,多少送人

    if(!StringUtil.isEmpty(message_type_to)){ if (message_type_to.contains(",")) { String[] sp ...

  7. Linux集群配置离线ntp时间同步服务

    集群中时间不同步有可能会让大数据的应用程序运行混乱,造成不可预知的问题,比如Hbase.mongodb副本集等,Hbase当时间差别过大时就会挂掉,mongodb如果副本时间过快,会出现时间栈帧溢出提 ...

  8. H5移动端手势密码组件

    项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...

  9. NuGet Package Explorer 中文版

    Id:NuGet Package Explorer 中文版 Description:基于原版 5.7.170 的绿色中文版,无任何‘添加剂’ Version:5.7.170 Download:Gith ...

  10. 有哪些开源的 Python 库让你相见恨晚?

    Arrow 我们知道 Python 已经内置了好几个处理时间相关的库,但是对于时间以及时区间的转换并不清晰,操作起来略繁琐,而 Arrow 可以弥补这个问题,它提供了更友好的方法,方便我们对时间,日期 ...