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. GitOps初阶指南：将DevOps扩展至K8S

    本文转自Rancher Labs 在过去十年的编程中,出现了一些革命性的转变.其中之一是源于围绕DevOps的实践,它将开发和运维团队整合到一个共享的工作流程中,此外还有持续集成和持续交付(CI/CD ...

  2. PHP array_diff_key() 函数

    实例 比较两个数组的键名,并返回差集: <?php $a1=array("a"=>"red","b"=>"gre ...

  3. PHP array_splice() 函数

    实例 从数组中移除元素,并用新元素取代它: <?php$a1=array("a"=>"red","b"=>"gr ...

  4. PHP fileowner() 函数

    定义和用法 fileowner() 函数返回指定文件的用户 ID(所有者). 如果成功,该函数返回用户 ID.如果失败,则返回 FALSE. 语法 fileowner(filename) 参数 描述 ...

  5. PHP atan2() 函数

    实例 通过 atan2() 函数返回两个变量的反正切: <?phpecho(atan2(0.50,0.50) . "<br>");echo(atan2(-0.50 ...

  6. OpenCL 增强单work-item kernel性能策略

    1.基于反馈的Optimization Report解决单个Work-item的Kernel相关性 在许多情况下,将OpenCL™应用程序设计为单个工作项内核就足以在不执行其他优化步骤的情况下最大化性 ...

  7. 利用Jsoup爬取新冠疫情数据并存至数据库

    需要用到的jar包(用来爬取的jsoup,htmlunit-2.37.0-bin以及连接数据库中的mysql.jar) 链接:https://pan.baidu.com/s/1VlylWmlhjd8K ...

  8. Android后台数据接口交互实现注册功能

    首先,在ecplise里面新建一个叫做TestServices的web工程.在WebContent--WEB-INF--libs文件夹下导入两个jar包:mysql-connector-java-6. ...

  9. 网站favicon.ico 图标

    favicon.ico一般用于作为缩略的网站图标,它显示在浏览器的地址栏或者标签上.目前主要的浏览器都支持favicon.ico图标. 一.制作favicon图标 1.把图标切成png图片. 2.把p ...

  10. 代码生成器插件与Creator预制体文件解析

    前言 之前写过一篇自动生成脚本的工具,但是我给它起名叫半自动代码生成器.之所以称之为半自动,因为我觉得全自动代码生成器应该做到两点:代码生成+自动绑定.之前的工具只做了代码生成,并没有做自动绑定,所以 ...