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. Java创建WebService

    从java 6之后就提供了简单快速的创建WebService的方法,这里将这种简单的方法记录下来方便以后回看.第一步:首先创建一个java Project,然后创建一个类HelloWorldImpl如 ...

  2. Http Requests for PHP

    一.Requests for PHP 官网:http://requests.ryanmccue.info官方介绍:Requests is a humble HTTP request library. ...

  3. 20180830xlVBA_合并计算

    Sub WorkbooksSheetsConsolidate() Rem 设置求和区域为 sheet名称/单元格区域;sheet名称/单元格区域 Const Setting As String = & ...

  4. 文件上传MultipartBody使用方法

    最近有使用一个文件上传的功能,需要在请求中添加文件,一起传给服务器 Okhttp提供了这个文件添加然后上传的功能 下面给出核心的代码,然后分析一下 //多个文件上传,Filelist private ...

  5. js将字符串转json

    Json格式字符串 "{"rows":[{"date":"2018-11-19","money":" ...

  6. PHP字符串函数小结

    1. strlen:获得字符串长度 2. substr:字符串截取函数 格式:string substr ( string $string , int $start [, int $length ] ...

  7. http认证方式，工程部分实现

    学习过程中,被boss批评,要求去复习http协议,因此找了相关资料做成一个系列:对于http认证方式不清楚的可以参考我的上一篇文章 http认证方式https://www.cnblogs.com/j ...

  8. hdu5608杜教筛

    题意:给定函数\(f(x)\),有\(n^2-3*n+2=\sum_{d|n}f(d)\),求\(\sum_{i=1}^nf(i)\) 题解:很显然的杜教筛,假设\(g(n)=n^2-3*n+2\), ...

  9. getopt实现传参自动识别

    test.py #!/usr/bin/env python # -*- coding: utf-8 -*- import getopt import sys #-h-f-v为了下面的识别 opts,a ...

  10. php导出大数据scv

    1.我系统要导出30w的数据,刚开始我使用的是: ini_set('memory_limit', '1024M');set_time_limit(0); header("Content-ty ...