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. The MySQL Server

    mysqld is the MySQL server. configuring the server. The mysql server, mysqld,has many command option ...

  2. RNA Spike-in Control（转）

    Spike-in Control:添加/加入(某种物质)的对照(组)在某些情况下,待检验样本中不含待测物质或者含有但是浓度很低,为了证明自己建立的方法能对样本中待测物质进行有效的检测,可在待检样本中加 ...

  3. java --> Long和long/Integer和int

    java中非一切是对象,因为还有基本数据类型. 基本数据类型有对应的基本数据类型打包器,它们的基本数据类型打包器是对象. j2se 5.0引入装箱和拆箱,它们是基本数据类型和基本数据类型打包器的关系 ...

  4. linux之bash shell

    GNU bash ======================================================== 通常计算机硬件是由运算器.控制器.存储器.输入/输出设备等等这些物理 ...

  5. yii框架中获取添加数据后的id值

    Yii::$app->db->createCommand()->insert('month4_user',['openid'=>$openid,'integ'=>0])- ...

  6. 迷宫最短路径问题的dfs,bfs实现

    迷宫的最短路径 给定一个大小为 N×M的迷宫.迷宫由通道和墙壁组成,每一步可以向邻接的上下左右四格的通道移动.请求出从起点到终点所需的小步数.请注意,本题假定从起点一定可以移动到终点 限制条件:N,M ...

  7. java把类似a=1&b=2&c=3的String类型数据转成map集合

    public static Map<String, Object> transStringToMap(String mapString, String separator, String ...

  8. leetcode-algorithms-15 3Sum

    leetcode-algorithms-15 3Sum Given an array nums of n integers, are there elements a, b, c in nums su ...

  9. python中Flask模块的使用

    1.简介 在服务器上运行Flask接口,就能使用requests模块获取该接口的值. 先运行接口文件,再运行requests文件,即可获取值. 2.示例 2.1一个简单的flask接口 import ...

  10. servlet初认知（持续更新中）

    一:前言: 一个Servlet程序其实就是一个实现了Java特殊接口的类,它由支持Servlet(具有Servlet引擎)的WEB服务器调用和启动运行.一个Servlet程序负责处理它对应的一个或者多 ...