1、样式优先级

　　(内联样式）Inline style     >    （内部样式）Internal style sheet     >     （外部样式）External style sheet    >      浏览器默认样式

　　<p style="width:10px">                       页面内<style></style>                          引用外部样式文件

 2、 选择器优先级

　　以下列表逐级增加：

  • 通用选择器（*）    * ｛  ｝
  • 元素(类型)选择器        p {  ｝
  • 类选择器    .class { }
  • 属性选择器
  • 伪类
  • ID 选择器   #id { }
  • 内联样式   <p style="width:10px">

 3、!important

　　　如，color:blue !important; 其覆盖CSS中任何其他的声明,  其与优先级无关， 使用 !important 不是一个好习惯，它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

  • 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
  • 永远不要在全站范围的 css 上使用 !important
  • 永远不要在你的插件中使用 !important

4、样式继承性

　　重复的属性用优先级高的，不存在的直接继承过来，如

　　外部样式表

h3

{

    color:red;

    text-align:left;

    font-size:8pt;

}

　　内部样式表

h3

{

    text-align:right;

    font-size:20pt;

}

　　最终样式

/*从外部样式表继承*/

color:red;

/*以下两个，内部样式表中重复存在，被其取代*/

text-align:right;

font-size:20pt;

5、选择器 分组 和 层级嵌套 

　　分组：减少重复的样式书写，一样的写在一起，用,隔开

/*重复的 color */

h1
{

　　color:green;

}

h2

{

　　color:green;

}

p

{

　　color:green;

}

　　分组写法

h1,h2,p

{

    color:green;

}

　　层级嵌套: 选择器内部的选择器的样式

　　先举个复杂的例子

定义了root-wrap样式的元素的form子元素下的定义了show-hide-body样式的元素下的定义了.scroll-contaier元素下的ol标签的所有li标签的样式
.root-wrap form .show-hide-body .scroll-contaier ol li {

  padding-top: 3px;

  padding-bottom: 5px;

  box-sizing: border-box;

}
　又如：为所有class="marked"元素内的p元素指定一个样式
p

{

    color:blue;

    text-align:center;

}

.marked

{

    background-color:red;

}

/*嵌套写法*/

.marked p

{

    color:white;

}

　　对应的html

<body>

    <p>这个段落是蓝色文本，居中对齐。</p>

　　<!-- 先找到marked-->

    <div class="marked"> 　

        <!-- 再找到其子元素p-->

　　    <p>这个段落不是蓝色文本。</p>

    </div>

    <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。

    </p>

</body>

 6、样式其他写法

元素同时写了两个样式

<p class="root-wrap actives">

下边.root-wrap和.actives之间没空格

.root-wrap.actives {

  border: 1px solid #00a6c9 ;

}

又如元素选择器与类名结合

<img class="normal" src="logocss.gif" width="95" height="84" />

之间没空格

img.normal

{

    height:auto;

}

 7、组合选择器

  • 后代选取器(以空格分隔 div p { background-color:yellow; })  div下的所有p，可能不是直接子p元素
  • 子元素选择器(以大于号分隔 div>p { background-color:yellow; }）div下直接子p元素
  • 相邻兄弟选择器（以加号分隔div+p { background-color:yellow; }）
  • 普通兄弟选择器（以破折号分隔div~p { background-color:yellow; }）

8、属性选择器

　　有属性的元素

　　[title]

　　 {

　　　　color:blue;

　　}

　　<h1 title="Hello world">Hello world</h1>

　　指定属性值

　　[title=runoob]

　　{

　　 　　border:5px solid green;

　　}

　　<img title="runoob" src="logo.png" width="270" height="50" />

　　包含指定值 |=

　　[lang|=en]
　　{
　　　　color:blue;
　　}　

　　<p lang="en">Hello!</p>
　　<p lang="en-us">Hi!</p>
　　<p lang="en-gb">Ello!</p>

　　指定表单元素

　　input[type="text"]
　　{
　　　　width:150px;
　　　　display:block;
　　　　margin-bottom:10px;
　　　　background-color:yellow;
　　}

CSS 基础 优先级 选择器 继承的更多相关文章

  1. CSS的优先级和继承问题

    CSS的优先级和继承问题 ★CSS的冲突,即优先级 CSS本身的设置可以同时应用多个样式在同一个元素,此时样式之间可能出现冲突而达不到用户所想要的效果. ★解决CSS冲突的优先级规则: ● CSS层叠 ...

  2. HTML&CSS基础-样式的继承

    HTML&CSS基础-样式的继承 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...

  3. HTML&CSS基础-属性选择器

    HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  4. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  5. CSS基础和选择器

    什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...

  6. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  7. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. CSS基础及选择器

    CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...

  9. CSS基础-层叠与继承

    继承 一些属性可以被继承,一些不可以. 一般来说,字体颜色.字体大小会被继承,关于形状的如 padding .border .margin.width等就不会被继承.哪些属性属于默认继承很大程度上是由 ...

随机推荐

  1. ObjC.primitive-methods

    Primitive Method "When it comes to subclassing, knowing which methods are ‘primitive’ methods i ...

  2. 2015-09-27 git学习

    创建 初始化 git init Initialized empty Git repository in <file> 关联 git remote add origin <git@se ...

  3. SystemTap 工作原理

    <systemtap原理及使用> https://www.cnblogs.com/youngerchina/p/5624588.html 这篇帖子前边系统介绍了systemtap的工作原理 ...

  4. JeeSite 4.0

    http://jeesite.com/ JeeSite 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot.Spring MVC.Apache Shiro.MyBat ...

  5. Spring 如何保证后置处理器的执行顺序 - OrderComparator

    Spring 如何保证后置处理器的执行顺序 - OrderComparator Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.htm ...

  6. Python之路(第十一篇)装饰器

    一.什么是装饰器? 装饰器他人的器具,本身可以是任意可调用对象,被装饰者也可以是任意可调用对象. 强调装饰器的原则:1 不修改被装饰对象的源代码 2 不修改被装饰对象的调用方式 装饰器的目标:在遵循1 ...

  7. c++11 template 模板练习

    直接上代码吧 to do // 111111.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> ...

  8. Zxing2.1扫描取景框变形问题解决

    修改竖屏扫描的贴子,2.0之前的都很适用.可是到了2.1,有些贴子的做法可以将扫描框改为竖屏,但是取景框里扫描到的东西是变形的(扁的),本人仔细研究一番,终于解决了这个问题,下面贴出解决办法: 1.修 ...

  9. Vuejs2.0之异步跨域请求

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了axios.接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的能力 ...

  10. 在Tomcat中部署Spring jpetstore

    第三篇:在Tomcat中部署Spring jpetstore 博客分类: Java之web SpringTomcatMySQLJDBCMVC  Spring samples中的jpetstore,基于 ...