css3 选择器 权重问题 (第二部分)
这篇博文有关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 选择器 权重问题 (第二部分)的更多相关文章
- css3 选择器 权重问题 (第一部分)
其实我现在写的这些博文笔记都是我很早之前学习的时候所写的笔记,只不过之前是没有写博客的习惯,所以都是写在word文档中个人需要的时候看而已.最近刚刚开了博客,所以想将自己的笔记贴到博客. 但是现在看来 ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- css3选择器(一)
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
- css3 选择器(二)
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
- [css3]CSS3选择器:nth-child和:nth-of-type之间的差异
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...
随机推荐
- 【转】resultMap详解(包含多表查询)
简介: MyBatis的每一个查询映射的返回类型都是ResultMap,只是当我们提供的返回类型属性是resultType的时候,MyBatis对自动的给我们把对应的值赋给resultType所指定对 ...
- join 和 left join 和 right join的区别?
join等价于 inner join 是内连接 ,返回两个表都有的符合条件的行. left join 是左连接,返回坐表中所有的行以及右表中符合条件的行. right join右连接,是返回右表中所有 ...
- Luogu P1256 显示图像
P1256 显示图像 题目描述 古老的显示屏是由N×M个像素(Pixel)点组成的.一个像素点的位置是根据所在行数和列数决定的.例如P(2,1)表示第2行第1列的像素点.那时候,屏幕只能显示黑与白两种 ...
- idea热更新配置
idea部署热启动如下,经过本人实验 在这里只能选择exploded因为它支持热部署 在这里选择如下 到这里已经完成热部署了,如果有问题欢迎反馈给我,我会及时回复
- 7-11 社交网络图中结点的“重要性”计算 (30 分)(Dijkstra算法)
题意: 思路:对每个输入的点跑一遍dijkstra算法,然后对这个点到所有点的距离求和按公式输出就可以了. (这次尝试了用数组模拟链表来做最短路问题,刷新了自己对最短路的理解) 这里构造链表的过程我 ...
- Scrapy下载器中间件用法示例
1.爬虫文件httpbin.py # -*- coding: utf-8 -*- import scrapy class HttpbinSpider(scrapy.Spider): name = 'h ...
- protel99se 问题汇总(不定期更新)
1.在PROTEL99SE中,怎样改变敷铜的线宽? 规则---manufacturing----polygon connect style 里面设置:或Power polygon connect st ...
- Maven学习总结(10)——使用Maven编译项目gbk的不可映射问题
Maven学习总结(十)--使用Maven编译项目gbk的不可映射问题 一.问题描述 今天在MyEclipse中使用Maven编译项目源代码时,结果如下了如下的错误 百思不得其解啊,java源代码在M ...
- StringIndexOutOfBoundsException
<span style="font-family:Microsoft YaHei;font-size:14px;">public class StringIndexBo ...
- android 细节之 menu 之 invalidateOptionsMenu
menu 在 android中是个很经常使用的控件,曾经自己做项目的时候通常都是将系统的menu相关方法在activity中直接删去.而且将主题换为fullscreen,然后再在layout中引入自己 ...