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. 为 昂达 v891 安装上了 remix OS 了

    起因: 默认的ROM自带一堆垃圾app,最主要的是没有root , 所以卸载不了. 然后试了 Root大师 , 刷机精灵 之类的软件. 我 CTMD , 简直比出厂ROM 还流氓, 不断的强制安装各种 ...

  2. gradlew 的https代理设定

    在内网编译vlc for Android 时, 总是在 [./gradlew assemble] 卡住, 在网上找到了设置代理的方法: 在gradlew 的同一目录,建立一个 gradle.prope ...

  3. centos7: php7.2.9安装配置

    下载php http://cn2.php.net/distributions/php-7.2.9.tar.gz 解压到: /usr/local/src/ 接下来进行参数配置,配置前如果没有libxml ...

  4. 记 linux 下面初次使用的convert 工具完成拼长图功能

    今天,遇到了一个需要把大量图片合并到一个长图的功能.本来找了各种图片处理界顶顶大佬.. “PS(手动一张张 的加).光影魔术手(批处理功能没有看到拼图功能).美图秀秀(可以有个拼图,限制30张,而且需 ...

  5. Spark分布式安装

    三台 服务器 n0,n2,n3 centos 6.4 X64 JDK, SCALA 2.11 Hadoop 2.2.0 spark-0.9.1-bin-hadoop2.tgz 说明: 1.所有机器上安 ...

  6. vue， vux调用微信点击图片，上传图片，删除图片，接口，其中选图接口，苹果手机显示有问题，查看不到图片，提交会提示fail not exist，解决如下

    <template> <div v-cloak v-show="show"> <div v-show="mailbox"> ...

  7. 微擎查询SQL语句常用

    pdo_fetch:根据SQL语句,查询一条记录 array | boolean pdo_fetch($sql, $params = array()); // :uid 是参数的一个点位符,没有使用引 ...

  8. 树莓派 CSI摄像头 No data received from sensor. Check all connections, including the Sunny one on the camera board

    不知道为什么摄像头在包里放了两天旧坏了,中间完全没用过摄像头的功能,查了资料,原因大概有两种 1)sunny烧了 2)试摄像头传感器坏了 这两天没有插拔过摄像头,可能是树莓派漏电了,也可能是它被压坏了 ...

  9. apache2反向代理

    1.安装 Apache2 sudo apt-get install apache2 2.重启服务器 sudo /etc/init.d/apache2 restart 3.虚拟主机配置 启用这几个模块 ...

  10. hdu5992 kdt

    题意:n个旅馆,每个有花费,m个查询,查询在某个点在c花费范围内的距离最小的旅馆 题解:kdt,建成四维,坐标两维,花费一维,id一维,实际上建树只用前两维,正常的查询,如果满足条件在更新答案即可 / ...