这篇博文有关css的权重问题,我个人认为这是css知识中很重要的一个知识点。因为在开发的过程能中我们会经常遇到这种问题,特别是如果你使用框架的时候,有些框架的某些标签有一些默认的样式。所以我们可以通过增加权重的方式来使我们所写的样式有效。既然说到权重那就必然要说起权重的等级以及权重值。

  css的权重等级可以分为5个级别:

  1.第一级别:内联样式,详细大家都知道什么是内联样式,既是在标签添加style属性<div style=""></div>,这种方式权重值最高,权重值为1000,但是开发过程中比较少用到这种,因为现在推荐的方式都是将css,js,html写成单独文件。这样子看起来会比较整洁以及方便管理。

  2.第二级别:ID选择器,id选择器就是使用"#"开头选择,大家应该都明白,这种选择方式的权重值为0100。

  3.第三级别:class选择器,class选择器就是使用"."开头的选择器,这种选择方式的权重值为0010.

  4.第四级别:标签选择器以及伪类选择器,就是直接使用标签或者伪类选择器,这种两种选择方式的权重值都为0001.

  5.这里提醒一下通用选择器(*),子选择器(>)和相邻同胞选择器(+)这三种是没有权重的,也就是权重值为0000,虽然没有权重 但是比继承样式权重高;这里值得提醒一下,并非所有的伪类选择器的权重都为i,总一些领导家的孩子,像a:link,a:visited伪类选择器,他们的权重比第三级别class选择器的权重还高。

  这里要提醒一下,这里的权重并不是10进制,不过在比比较的时候可以当作十进制去叠加。

  案例

  测试结果

  这里p.c的权重值为0011,.c的权重值为0010,所以字体会显示蓝色

  当然,如果是从上到下多层次选择也是一样的

  测试结果 

  这里的权重和上面也是一样的div .c权重为0011,.c权重值为10

  案例(测试伪类选择器)

  测试结果

  是不是,对不对,我没有说谎嘛

  其实权重计算方法是这样子大同小异的

  博文最后要讲一个最重量级别权重的东西,这家伙可不止是领导的儿子,简直就是太子来的,这个就是

  !important

 你没有看错,就是楼上的那个  !important 这个家伙,他可以将你所要呈现的样式的权重提的比行内样式还高,我举个例子来说明他的用法

  运行结果

  有木有,有木有,明明使用的是行内样式,但是显示的却是绿色,仿佛被戴了绿帽

  不过这个是样式是的权重,并非是选择器的权重,就是说和上面说的选择器权重不冲突,但是他却可以改变某些你也想要改变的样式。

  好了,上面内容就是css3的权重介绍

  

  

  

css3 选择器 权重问题 (第二部分)的更多相关文章

  1. css3 选择器 权重问题 (第一部分)

    其实我现在写的这些博文笔记都是我很早之前学习的时候所写的笔记,只不过之前是没有写博客的习惯,所以都是写在word文档中个人需要的时候看而已.最近刚刚开了博客,所以想将自己的笔记贴到博客. 但是现在看来 ...

  2. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  3. 总结30个CSS3选择器(转载)

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  4. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  5. CSS3选择器介绍

    1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  7. css3选择器(一)

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

  8. css3 选择器(二)

    接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...

  9. [css3]CSS3选择器:nth-child和:nth-of-type之间的差异

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...

随机推荐

  1. 零基础到精通Linux,从这篇文章开始

    2018年想做Linux运维的人应该如何学习才能快速精通Linux? Linux入门这么简单,为什么很多人学不会? 想要成为一个合格的运维工程师,到底怎么才能从零开始精通Linux? 作为一个运维小白 ...

  2. IE浏览器new Date()带参返回NaN解决方法

    var start = '2016-01-01 12:12:12'; var date = new Date(start); 得到的时间为NaN: 解决方法: 1.自定义方法 自定义一个NewDate ...

  3. 学习MPI并行编程记录

    简单的MPI程序示例 首先,我们来看一个简单的MPI程序实例.如同我们学习各种语言的第一个程序一样,对于MPI的第一个程序同样是"Hello Word". /* Case 1 he ...

  4. Dinic当前弧优化 模板及教程

    在阅读本文前,建议先自学最大流的Ek算法. 引入 Ek的核心是执行bfs,一旦找到增广路就停下来进行增广.换言之,执行一遍BFS执行一遍DFS,这使得效率大大降低.于是我们可以考虑优化. 核心思路 在 ...

  5. A water problem (hdu-5832)

    不多说就是一个数对两个数的乘积求模运算 不得不说vj上这个题的翻译版本真是太暴力了 难点 主要还是时间的控制,这题太容易TLE了.用到的算法就是大数求余数的ans=(ans*10-a[i]-'0')% ...

  6. CF36E Two Paths (欧拉回路+构造)

    题面传送门 题目大意:给你一张可能有重边的不保证联通的无向图,现在要在这个图上找出两条路径,恰好能覆盖所有边一次,根据边的编号输出方案,无解输出-1 一道很不错的欧拉路径变形题 首先要知道关于欧拉路径 ...

  7. 如何在docker和宿主机之间复制文件

    如何在docker和宿主机之间复制文件   最近在用Docker布署hadoop,要将文件上传到HDFS首先文件得在Docker容器中吧,网上提供的方法差不多有三种 1.用-v挂载主机数据卷到容器内  ...

  8. [加强版] Codeforces 835D Palindromic characteristics (回文自动机、DP)

    题目链接: https://codeforces.com/contest/835/problem/D 题意: 一个回文串是\(1\)-回文的,如果一个回文串的左半部分和右半部分一样且都是\(k\)-回 ...

  9. 创建RpcEnv

    感觉这篇文章不错 2.1.2.创建RpcEnv -  RpcEndpoint -  RpcEndpointRef val systemName = if (isDriver) driverSystem ...

  10. noip模拟赛 fateice-shop

    题目背景 紫女,韩国歌舞坊(实为刺客组织)紫兰轩之主,千娇百媚,美艳无方.武艺高强且极有谋略胆识,精通奇石药物,冶炼之术及制毒用毒之术独步天下,真实姓名与来历无人知晓,只因总是身着一袭紫衣,所以众人以 ...