css的特性

css具有两大特性：继承性和层叠性

1、继承性

指的是子元素继承父元素的样式，但没有所有的样式都可以继承（那样就太可怕了）

所以具有继承性的属性主要分为三大类

a、文本属性

font-size、font-family、font-style、font-weight、font、text-align、word-spacing、line-height、text-index

b、列表相关属性

list-style-image、list-style-position、list-style-type、list-style、

c、颜色相关属性

color

Q:为什么我设置了a元素父标签的color属性，但是a标签没有跟着发生变化

A：因为a标签具有默认样式，优先级高于继承性，所以要设置a标签的颜色属性就要对a标签单独进行

2、层叠性

<html>

<head>

<style type="text/css">

div{color:red;}

div{color:yelow;}

div{color:blue;}

</style>

</head>

<body>

<div>color</div>

<div>color</div>

<div>color</div>

</body>

<html>

运行后：

由于层叠性前面的样式被div{color：blue}覆盖，最后显示出来的都是蓝色

css发生层叠性的原则：

1、元素相同

2、属性相同

3、权重相同

css的优先级

层叠指的就是样式层叠，当样式的覆盖发生冲突时，以优先级高低为准

样式覆盖发生冲突有以下5种：

1、引用方式冲突

2、继承方式冲突

3、指定样式冲突

4、继承样式与指定样式冲突

5！important

引用方式冲突

css有3中引用方式：外部样式、内部样式、行内样式

优先级如下：
  行内样式>（外部样式=内部样式）

<html>

<head>

<style type="text/css">

div{color:blue;}

</style>

<link href="index.css" type="text/css" rel="stylesheet"/>

</head>

<body>

<div style="color:yellow;">color</div>

</body>

<html>

结果：

继承方式冲突

就是设置了当前元素的颜色属性等最近的祖先元素也设置了，样式继承了祖先的样式

指定样式冲突

当指定样式发生冲突，当前权重最高获胜

选择器 权值
通配符 0
伪元素 1
元素选择器 1
class选择器 10
伪类 10
属性选择器 10
id选择器 100
行内样式

1000

常见伪元素有四个：即::before,::after,::first-letter,::first-line

继承样式与指定样式发生冲突

指定样式获胜

就是从别人那继承的，都不如自己设定的优先级高

！important

如果一个样式使用！important来声明，那么这个样式会覆盖css中任何其他样式的声明

CSS特性的更多相关文章

  1. 深入探讨 CSS 特性检测 @supports 与 Modernizr

    什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷.在 CSS 层面亦不例外. 一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下: 很多实验 ...

  2. 2017年值得学习的3个CSS特性

    原文:https://bitsofco.de/3-new-css-features-to-learn-in-2017/译文:http://caibaojian.com/3-new-css-featur ...

  3. 即将来到: CSS Feature Queries (CSS特性查询)

    Feature Queries 是CSS3 Conditional Rules specification中的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否 ...

  4. css基础（css书写 背景设置 标签分类 css特性）

      css书写位置   行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link re ...

  5. 一些你不知道的css特性【一】

    浏览器禁止用户在标签的style中使用js写入"!important"的特性 我们在使用jQuery设置css的时候 $('#text').css('height', '200px ...

  6. 容易被忽略CSS特性

    CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .tes ...

  7. CSS特性： 继承 和 层叠

    在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个”树型“ ...

  8. 容易被忽略的CSS特性

    CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 .tes ...

  9. Css 特性之 transition和transform

    CSS 有一些新的属性,可以简化代码的书写,用简单的代码就可以实现复杂的变化.不用像 js 那样,需要写很多代码 这里主要介绍三个属性:transition ,transform,以及translat ...

随机推荐

  1. （转）c#反射

    1. 什么是反射2. 命名空间与装配件的关系3. 运行期得到类型信息有什么用4. 如何使用反射获取类型5. 如何根据类型来动态创建对象6. 如何获取方法以及动态调用方法7. 动态创建委托 1.什么是反 ...

  2. ubuntu解压和压缩文件

    .tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.gz解压1:gun ...

  3. catalan 递推

    http://www.cnblogs.com/zyt1253679098/p/9190217.html

  4. 动态加载DataGrid表头及数据

    初始化表头 js生成前端 /*初始化表头*/ function initDataGridTitle(id) { $.ajax({ url: '/${appName}/report/***/***', ...

  5. php url处理

    http_build_query() $data = array("name"=>"callback" , "value"=>& ...

  6. day11 - 15（装饰器、生成器、迭代器、内置函数、推导式）

    day11:装饰器(装饰器形成.装饰器作用.@语法糖.原则.固定模式) 装饰器形成:最简单的.有返回值的.有一个参数的.万能参数 函数起的作用:装饰器用于在已经完成的函数前后增加功能 语法糖:使代码变 ...

  7. Hongcow Buys a Deck of Cards CodeForces - 744C (状压)

    大意: n个红黑卡, 每天可以选择领取一块红币一块黑币, 或者买一张卡, 第$i$张卡的花费红币数$max(r_i-A,0)$, 花费黑币数$max(b_i-B,0)$, A为当前红卡数, B为当前黑 ...

  8. 让你明白kvm是什么

    参考:https://blog.csdn.net/bbwangj/article/details/80465320 KVM 工具集合: libvirt:操作和管理KVM虚机的虚拟化 API,使用 C ...

  9. python-django rest framework框架之解析器

    1.解析器 : 对请求的数据进行解析 - 请求体进行解析. 解析器在你不拿请求体数据时 不会调用. class UsersView(APIView): def get(self,request,*ar ...

  10. ireport表单制作

    关于ireport的表单制作,可参考http://blog.csdn.net/wlwlwlwl015/article/details/51312853 这里主要讲解下如何在表单中加入table,如何让 ...