css的特性

一、继承性:

  继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。

/* 不具有继承性的css样式: */p{border:1px solid red;}

二、特殊性(优先级?)

  定位一个元素,选择器的特殊性值则是决定哪一个胜出的关键。 其形式(不在代码中体现)如:0,0,0,1/1,1,0,1/0,0,0,3/….

  主要有四个规则:

  1. 用了ID ,则 +0,1,0,0;
  2. 用class、属性(如[id=”btn1”])、伪类(如:hover) +0,0,1,0;
  3. 元素和伪元素(如::before) 加0,0,0,1;
  4. 结合符对特殊性没有贡献,而通配符的贡献是0,0,0,0.(所以他们对总特殊性没有影响);

  几个例子:

p{font-style: normal} /* 0,0,0,1 */
body div p{font-style:italic} /* 0,0,0,3 */(winner)

html > body table tr[id="totals"] td ul > li{color:maroon;} /* 0,0,1,7 */
li#answer {color: navy} /* 0,1,0,1 /* (winner)

  

  题外话:css中 内联样式(直接写在标签中的) >  嵌入样式(写在<head></head>中的)  >    外部样式(<link></link>导入的)

三、层叠

  后面的样式会覆盖前面的样式

  

四、总结

  内联样式>id>class;  

  如果特殊性相同,后定义的规则优先;

时间: 2025-01-02 20:03:07

css的特性的相关文章

2017年要学习的三个CSS新特性

2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性,但有三个特性令我最激动并进行学习. 1. Feature Queries(特性查询) 在这之前我写了一篇关于Feature Queries的文章the one CSS feature I really want.现在,它已经在这里了!目前所有主流浏览器都支持特征查

CSS三大特性(继承、优先级、层叠)之个人见解

首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开头的样式以及我们常用的color.简单的就不演示了,强调一下font-size这个东东(虽然也有继承,但是标签不同继承的效果也不一样),比如下面的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c

[转载]CSS三大特性(继承、优先级、层叠)之个人见解

首先声明一下CSS三大特性——继承.优 先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text- indent等t开头的样式以及我们常用的color.简单的就不演示了,强调一下font-size这个东东(虽然也有继承,但是标签不同继承的效果也 不一样),比如下面的代码: <!DOCTYPE html> <html lang="en"> <head> <met

CSS(三)CSS三大特性

CSS三大特性 一)层叠性 一般情况下,如果出现样式冲突,则会安装CSS的书写顺序,以最后的样式为准.就近原则. 二)继承性 子标签会继承父标签的某些样式.text.font.line以及color的样式都可以继承. 三)优先级 *|继承(0000) < 标签(0001) < class(0010) < id(0100) < 行内样式(1000) < !important(无限大) 越特殊越优先 0,0,1,0 > 0,0,0,12 原文地址:https://www.c

CSS之特性,背景,行高,复合选择器,显示模式

css复合选择器 css 分为 基础选择器 和 复合选择器 , 但是基础选择器不能满足实际开发中 快速高效的选择标签 目的是为了选择更准确更精细的目标元素标签 复合选择器是由两个或者多个基础选择器 , 通过不同的方式组合而成 后代选择器 ( 重点 ) 父级 子级 { 属性名: 属性值; } div a { color: #ccc; } 当标签发生嵌套时 , 内层标签就成为外层标签的后代; 子孙后代都可以选择 , 或者说 , 它能包含任何包含在内的标签 . 子元素选择器 作用 : 子元素选择器只能

CSS Specificity--CSS特性、权重、优先级---CSS specificity规则、

CSS Specificity As mentioned above, CSS styles follow an order of specificity and point values to determine(确定) when styles override(覆盖) one another or take precedence(优先). Nettuts recently had a nice article in which the point values for css were ex

CSS浮动特性总结

1.假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子.我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯一一个实现不了的就是“文字环绕图片”,我是想不出来能有什么方法可以让文字环绕图片显示.好,这个替代不了的作用才是float真正的意义所在,即float属性最初被设计的时候就是用来完成文字环绕效果的. 2.运用了float的元素只能横向浮动,不能纵向浮动.当元素运用的浮动属性后,将会脱离普通文档流,起

CSS【05】:CSS三大特性

继承性 作用:给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性 示例代码: <style> div { color: red; } </style> <div> <ul> <li> <p>我是段落</p> </li> </ul> </div> <!--p会变成红色--> 注意点: 并不是所有的属性都可以继承,只有以color.font-.text-.line-开

CSS新特性之2D转换transform

transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x轴和y轴上移动的距离 transform: translateX(n);//x轴上移动的位置 transform: translateY(n);//y轴上移动的位置 1.2举例子 <style type="text/css"> div { width: 200px; heigh