写给初学者css优先级问题
首先需要搞清楚几个基本概念
1.内嵌样式：
写在元素标签内的例如：<div style="background-color:red"> </div>
2.内联样式：
写在head的style例如：<head>
<style>
div{
background-color:red;
}
</style>
</head>
3.外部样式：
link标签引入进来的例如：<link rel="stylesheet" href="1.css"/>
4.important:只要设置了important的优先级永远最高。例如：border:1px solid red !important;
优先级：！important > 内嵌（标签内）> 内联（style）=外部;
说明：这里很多初学者都会误会内联优先级要高与外部，实际上是相等的。例如：
<head>
<link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}
<style>
div{
background-color；red;
}
</style>
</head>
此时div的背景色为red;
<head>
<style>
div{
background-color；red;
}
</style>
<link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}
</head>
此时div的背景色为blue；
选择器权重值：内嵌：1000；
id:0100;
class或伪类：0010；
元素或伪元素：0001；
*：0000；
说明：权重值越大优先级越高；权重值可以累加，但是不会越位，例如：
嵌套十层div，然后有一个div元素选择器，该选择的权重值为000 10，而不是0010，仍旧比class或伪类选择器的权重值小。
权重值：内嵌（1000）>id（0100）>class/伪类（0010）>元素/伪元素（0001）> * 权重值越高优先级越高。 important永远最高。
写给初学者css优先级问题的更多相关文章
- 使用background和background-image对CSS优先级造成影响
在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- css优先级计算规则
原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...
- html网页的兼容性和css优先级
网页不仅是在一个浏览器上显示的网页,也要多考虑其他浏览器的兼容性,火狐.谷歌.搜狗等浏览器总体来说,网页的变化不大,最主要的是还是IE浏览器. color:red\9; IE6 IE7 IE8 ...
- CSS优先级和定位
overflow属性 hidden scroll auto hidden 超出隐藏 scroll 滚动条 Auto 自动 display属性 block inline inline-block non ...
- 深入理解css优先级
为什么要写这篇文章是因为 <style type="text/css"> body h1 { color: green; } html h1 { color: purp ...
- css优先级机制
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style >(内部样式)Internal style sheet ...
- CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别
在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- CSS优先级的详细解说
一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...
- 【学习笔记】CSS优先级规则
CSS的优先级规则很多地方的说法都是错误的,常见错误说法是inline css>内部样式>外部样式,其实并没有这种规定.真正的CSS优先级确定是通过特性值大小确定的,在特性值大小相同的情况 ...
随机推荐
- Java三大特征之多态(三)
面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...
- AdapterView及其子类之四：基于ListView及SimpleAdapter实现列表
代码请见SimpleAdapterDemo.zip. 步骤如下: 1.创建主布局文件 <RelativeLayout xmlns:android="http://schemas.and ...
- jQuery工具函数下
测试操作 1.判断是否为数组对象 $(function () { //判断是否为数组对象 var arr = [1,2,3,4]; alert($.isArray(arr));//true }); 2 ...
- 关于dwt文件和lbi文件
1,dwt 文件是网页模板文件(Dreamweaver Template), 在创建网站的多个网页的时候,通常可以将网页的共同部分创建成为一个模板, 然后给多个网页调用, 以实现网页代码的重复利用. ...
- zmodem协议的使用(SecureCRT)
SecureCRT可以使用zmodem协议来快速的传送文件,使用非常方便.对于Linux系统,大多数发行版本都自带有rz和sz命令.在SecureCRT中选择Options->Session O ...
- Entity Framewor中的 Migration
http://www.entityframeworktutorial.net/code-first/code-based-migration-in-code-first.aspx = Code bas ...
- 混合使用Azure LB和ILB访问相同web服务（1）
在经典的使用场景中,我们一般使用AzureLoadBalancer来面向公网提供负载均衡服务,而使用Azure Internal Load Balancer提供内部那些不愿意将服务暴露给公网的服务,比 ...
- 添加解压缩版Tomcat到系统服务
一.安装服务 在命令行中进入/Tomcat路径/bin/,执行“service.bat install”: 说明:1.服务名和显示名称:service.bat中设置了默认的服务名称,不同版本分别命名为 ...
- 启动Tomcat的几种方式
启动Tomcat有两种场景,一是部署时启动,二是开发时启动.部署时基本上是通过war包来启动,而开发时的启动方式多种多样,下面拟介绍几种适用于开发时启动Tomcat的方法. 在DOS命令行启动 Apa ...
- EasyUI选项卡tab页面处理示例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...