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. UEFI、BIOS、Secure Boot的关系和知识介绍

      从Windows 8操作系统时代开始,安装操作系统的方法也有了很大的改变,Windows 8采用了Secure Boot引导启动的方式,而不是过去Win XP和Win 7的Legacy启动方式,从 ...

  2. 看懂 Fiddler 的瀑布图

    最近准备给组内的新同学们分享下 Fiddler 这枚神器,可以讲的地方太多,我打算把一节课讲不完的内容写在博客上,大家可以随便看看.今天先介绍下 Fiddler 的瀑布图. 每个网络请求都会经历域名解 ...

  3. 使用hMailServer搭建邮件服务器

    本文没有什么高深的技术内容,只是使用hMailServer,介绍搭建邮件服务器的全过程,供参考. 一.安装邮件服务器组件 打开软件,点下一步 选择存储数据的数据库,这里有两种选择, 一种是使用嵌入型数 ...

  4. PHP 5.6 开启CURL HTTPS 类型

    前几日要写微信支付接口,微信支付接口CURL地址是HTTPS.本机测试的是OK的,但是服务器缺提示错误--“ Protocol https not supported or disabled in l ...

  5. SWE_Browser编译

    QRD从android4.4开始使用SWE_Browser,android原始代码中不再提供Browser.最近在做一个QRD8916_113517 CMCC入库版本,需要使用SWE_Browser. ...

  6. Mercurial和Git的主要区别（zz）

    Mercurial和Git的主要区别 17 August 2008 1.Mercurial用Python开发,Git用C开发,相对来说,Git比较快,但是Mercurial的性能也不差 2.Mercu ...

  7. 2017/2/11CSS基础

    一:html中div: 1.DIV标签应用于 Style Sheet(样式表)方面会更显威力,它最终目的是给设计者另一种组织能力,有 Class.Style.title.ID 等属性. 2.<d ...

  8. OneZero第三周第五次站立会议（2016.4.8）

    1. 时间: 15:10--15:25  共计15分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...

  9. 玩具谜题(NOIP2016)

    题目链接:玩具谜题 提高组日常水题. 直接模拟,有需要注意的点会在代码后讲解: #include<bits/stdc++.h> using namespace std; int main( ...

  10. 利用Delphi-cross-socket 库提升kbmmw 跨平台开发

    以前我写过了,通过httpsys 提升windows 下,delphi 多层应用.随着delphi 10.2 对linux 的支持,很多人也想在linux 下 发布kbmmw 服务器,但是官方仅通过i ...