1.继承0.1    标签1    类选择符10    ID选择符100

2.层叠:后面的样式会覆盖前面的样式。

3.内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式(外部文件)

4.!important具有最高权值,p{color:red  !important;}

5.!important > 用户自己设置的样式 > 网页制作者样式 > 浏览器默认样式

6.class选择器和属性选择器同优先级。

7.像这种.dog > p多了特殊符号的,还是和 .dog p优先级一样。

8.如:<div id="parent" class="parent">
  <p class="p">p</p>
</div>

优先级为: .p > div p > p > #parent > .parent

子级p和父级#parent, 子级的选择器优先级比父级的选择器优先级高,或者说继承的优先级程度比自身的优先级低!但是只要能定位到p元素,那么父级选择器的权重就起作用了。

9.css样式优先级还和继承有关,继承的优先级不如本身应用的优先级高。

CSS权值比较(读书笔记)的更多相关文章

  1. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  2. HTML/CSS权值继承

    <style type="text/css">p{color:red;}.first{color:green;}/*因为权值高显示为绿色*/ span{color:pi ...

  3. css权值和优先级+命名规范

    选择器权值: 标签选择器:1 类选择器和伪类选择器:10 ID选择器:100 通配符选择器:0 行内样式:1000 !important 在一定条件下,优先级最高 常用的css样式命名 页面结构页头: ...

  4. css权值计算

    外部样式表<内部样式表<内联样式: HTML 标签选择器的权值为 1: Class 类选择器的权值为 10: ID 选择器的权值为 100: 内联样式表的权值最高 1000: !impor ...

  5. CSS权值

    选择器权值 标签选择器:权值为1 类选择器和伪类:权值为10 ID选择器:权值为100 通配符选择器:权值为0 行内样式:权值为1000 !important规则: 可调整样式规则的优先级 添加在样式 ...

  6. css权值问题

    继承是没有权值的,比通配符的的权值0还要低. 选择器是不分上下级的.只管优先级. 第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为0 ...

  7. 《CSS那些事儿》读书笔记

    注: 此书出版于2009年,所以有些知识...你懂得. 有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧. 暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多 ...

  8. 《CSS权威指南》读书笔记

    一.css和文档层叠 css规定了冲突规则,这些规则统称为层叠.这些规则定义了样式发生冲突时以优先级高的为准. 常用的优先级判定: 1. 开发者样式>读者样式>浏览器样式(除非使用!imp ...

  9. CSS揭秘读书笔记 (一)

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

随机推荐

  1. php表单 - 验证邮件和URL

    PHP - 验证名称 以下代码将通过简单的方式来检测 name 字段是否包含字母和空格,如果 name 字段值不合法,将输出错误信息: $name = test_input($_POST[" ...

  2. Extjs 疑难杂症 (LoadMark 遮罩、Panel Update无效、chrome浏览器date控件全屏)

    一.在extjs gridPanel中使用LoadMark无效,三步搞定. 原代码: grid = new Ext.grid.GridPanel({ store: store, title:'资料列表 ...

  3. IO流 复制文件及文件夹

    package io; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; im ...

  4. Java 后端彻底解决跨域问题(CORS)

    接口调用出现跨域问题时,浏览器会报如下提示 XMLHttpRequest cannot load xxx. Request header field Authorization is not allo ...

  5. 禁止input文本框输入select无法选择

    readonly.disabled.autocomplete readonly表示此域的值不可修改,仅可与 type="text" 配合使用,可复制,可选择,可以接收焦点,后台会接 ...

  6. file_instances文件实例表

      SELECT * FROM performance_schema.file_instances;

  7. spring源码学习之AOP(一)

    继续源码学习,看了spring中基础的容器和AOP感觉自己也没有什么长进,哈哈,我也不知道到底有用没有,这可能是培养自己的一种精神吧,不管那么多,继续学习!AOP中 AOP中几个重要的概念:(1)Ad ...

  8. 探索云网络技术前沿,Sigcomm 2019 阿里云参会分享

    Sigcomm 2019简介 一年一度的网络顶级学术峰会Sigcomm于8月20日至22日在北京举行.作为ACM Special Interest Group on Data Communicatio ...

  9. 【python之路25】正则表达式

    一.正则表达式简介 就其本质而言,正则表达式(或RE)是一种小型的.高度专业化的(在python中),它内嵌在python中,并通过RE模块实现.正则表达式编译成一系列字节码,然后由用C编写的匹配引擎 ...

  10. python模拟浏览器文件上传,csrf放行

    服务器端视图函数 from django.shortcuts import render,HttpResponse from django.views.decorators.csrf import c ...