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. 雷林鹏分享：查看 XML 文件

    查看 XML 文件 在所有主流的浏览器中,均能够查看原始的 XML 文件. 不要指望 XML 文件会直接显示为 HTML 页面. 查看 XML 文件 - Tove Jani Reminder Don' ...

  2. 提取出一个组装基因组的gap（N）和重复序列区域，保存为bed格式

    参见: Question: How to extract allnon-seqencedpositions from a genome (Fasta file)? test.fa >chr1 N ...

  3. GEO数据下载分析（SRA、SRR、GEM、SRX、SAMN、SRS、SRP、PRJNA全面解析）

    很多时候我们需要从GEO(https://www.ncbi.nlm.nih.gov/geo/)下载RNA-seq数据,一个典型的下载页面是https://www.ncbi.nlm.nih.gov/ge ...

  4. PHP操作MySQL数据库--PHP的应用

    一.Apache服务器的安装 <1>安装版(计算机相关专业所用软件---百度云链接下载)-直接install<2>非安装版(https://www.apachehaus.com ...

  5. BIT-区间修改单点查询

    正好刷题时碰到了这个之前遇到过的问题,类似的还有区间修改区间查询,以后学了会补上. 我们知道BIT只支持单点修改区间查询,如果现在问题变成每次让一个区间的数同时变化,然后询问的是某一个点得值的时候该怎 ...

  6. ajax代码整理

    $.ajax({ type: "post", [以POST或GET的方式请求.默认GET.PUT和DELETE也可以用,有的浏览器不支持] url: url, [请求的目的地址,须 ...

  7. Leetcode 869. 重新排序得到 2 的幂

    869. 重新排序得到 2 的幂  显示英文描述 我的提交返回竞赛   用户通过次数102 用户尝试次数134 通过次数103 提交次数296 题目难度Medium 从正整数 N 开始,我们按任何顺序 ...

  8. 解决maven 找不到指定路径应该如何

    如果打开每个项目都有红x!!!解决办法: 1) 2)-->点击clean ,ok!!

  9. 【转】MVC form提交实体接收参数时空字符串值变成null

    问题:entity.BZ的值是null,Request.Form["BZ"]的值是空字符串 目标:让entity.BZ的值是空字符串. 解决方法:在实体的BZ属性上加上 [Disp ...

  10. git报错fatal: I don't handle protocol '​https'处理

    一.背景说明 今天使用在Cygwin中git clone时报fatal: I don't handle protocol '​https',如下: 以为是Cygwin实现的git有点问题没太在意,换去 ...