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. BZOJ1093或洛谷2272 [ZJOI2007]最大半连通子图

    BZOJ原题链接 洛谷原题链接 和 Going from u to v or from v to u?(题解)这道题类似,只不过是求最大子图的大小和个数而已. 一样用\(tarjan\)求强连通分量, ...

  2. 代码UITableView点击cell跳转

    首先,在tableViewController中设置好 代理和数据源方法: @interface FirstTableViewController ()<UITableViewDataSourc ...

  3. Previous Permutation

    Similar to next permutation, the steps as follow: 1) Find k in the increasing suffix such that nums[ ...

  4. DOM BOM 常用API小记

    DOM 1.元素节点: 元素节点element: 更精确的获得元素的标签名(全大写) 属性节点attribute: 属性名 文本节点text: #text 注释节点document:#document ...

  5. 使用xtrabackup备份innodb引擎的数据库

    innodb引擎的数据库可以使用mysqldump备份,如果表很大几十个G甚至上百G,显示用mysqldump备份会非常慢.然后使用xtrabackup 可以很快的在线备份innodb数据库.Inno ...

  6. 软件工程网络15个人作业4--Alpha阶段个人总结

    一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...

  7. 2017-2018-1 20155312《信息安全技术》实验二——Windows口令破解实验报告

    2017-2018-1 20155312<信息安全技术>实验二--Windows口令破解实验报告 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破 ...

  8. node 报错:Uncaught Error: Cannot find module "!!../../../node_modules/extract-webpack-plugin/loader.js

    问题出在缺少less和less-loader  因为以上模块使用了less解析. 解决方法在dependencies添加 "less": "^2.7.1", & ...

  9. shell脚本清空redis库缓存

    前提: 现在做的一个业务系统,用了redis做缓存. 系统做了缓存,通常在系统正常使用的过程中,可以节省很多系统资源,特别是数据库资源. 但是,在开发.测试或者系统遇到问题的时候,也有很麻烦的事情. ...

  10. Linux 文件授权

    Linux用户权限     在Linux操作系统中,root的权限是最高的,相当于windows的administrator,拥有最高权限,能执行任何命令和操作,在Linux系统中,通过UID来区分用 ...