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. 差异表达分析之FDR

    差异表达分析之FDR 随着测序成本的不断降低,转录组测序分析已逐渐成为一种很常用的分析手段.但对于转录组分析当中的一些概念,很多人还不是很清楚.今天,小编就来谈谈在转录组分析中,经常会遇到的一个概念F ...

  2. CentOS 7.0 安装配置LAMP服务器方法(Apache+PHP+MariaDB)(转)

    转自:http://www.jb51.net/os/188488.html 作者:佚名 字体:[增加 减小] 来源:osyunwei  准备篇: CentOS 7.0系统安装配置图解教程 http:/ ...

  3. ZOJ2412 Farm Irrigation(农田灌溉) 搜索

    Farm Irrigation Time Limit: 2 Seconds      Memory Limit: 65536 KB Benny has a spacious farm land to ...

  4. hook api实现

    https://www.cnblogs.com/findumars/p/8734116.html https://blog.csdn.net/lonelyrains/article/details/2 ...

  5. JS closure

    闭包的概念 闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍可访问非本地变量. --维基百科 闭包就是能够读取其他函数内部变量的函数. --阮一峰 由于在Javascript语言中, ...

  6. hbase shell 命令

    HBase使用教程 时间 2014-06-01 20:02:18 IT社区推荐资讯 原文  http://itindex.net/detail/49825-hbase 主题 HBase 1     基 ...

  7. django网页图片验证码功能

    在一个正常的登录系统中,验证码是非常重要的,用于识别人机,毕竟我们都知道,这个世界中存在着万恶的爬虫,验证码有很多种方式,有图片的,有邮件的,有短信的,有拼图的,不管什么样的验证码,目的都是验证访问用 ...

  8. 自定义注解与validation结合使用案例

    编写validation自定义注解: @Target({ ElementType.FIELD, ElementType.METHOD })@Retention(RetentionPolicy.RUNT ...

  9. [SQL]查询最新的数据

    在设计数据库的时候,把数据的跟新,删除都是软操作,就是都是变成了增加,也是会需要读取最新的那条数据 ' 获取最新时间的数据 Select a.* FROM SortInfo a,(SELECT SnS ...

  10. 异常处理（异常解析器） 和 对于Properties类型的属性的配置

    在程序运行中,有可能因为用户的不当操作,发生异常.. 在springmvc中可以根据不同的异常配置不同的处理方式 1.例如出现 这个类型异常 org.springframework.web.multi ...