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. oracle sqlplus操作

    步骤: su - oracle 切换到oracle用户 sqlplus /nolog 进入sqlplus命令行 conn cps/cps 连接到cps用户的数据库,cps/cps表示:用户/密码 执行 ...

  2. Windows下war包部署到Linux下Tomcat出现的问题

    最近,将Windows下开发的war包部署到Linux下的Tomcat时报了一个错误:tomcat error in opening zip file.按理说,如果正常,当把war包复制到webapp ...

  3. VS2010下MFC的串口编程

    串口通信简介 一般来说,计算机都有一个或多个串行端口,这些串口提供了外部设备与PC进行数据传输和通信的通道,在CPU和外设之间充当解释器的角色.当字符数据从CPU发送给外设时,这些字符数据将被转换成串 ...

  4. qrcode解决方案大全

    QRCODE解决方案 1.delphi原生QRCode.pas 2.delphi编写http服务器实现QRcode请求生成图片,http下载 3.delphi编写cgi程序,加载到apache服务器 ...

  5. PS制作纸质复古野外露营插画分享

    经常有人说一些复古风,就觉得蛮难,其实制作过程其实没有想象中复杂,从1850年到2017年,通过这160多年里的平面设计,给我们的作品添加上一些新鲜的灵感和活力,本次教程就来教大家用PS做出耐看的纸质 ...

  6. Homestead 修改 Homestead.yaml 文件后 vagrant up 报错的问题

    一般情况是 TAB 和空格的问题. 虽然表面看来,缩进是一致的. 但是 TAB 没能替换为空格,从而导致问题. 解决: $ sudo vim /etc/vim/vimrc.local syntax o ...

  7. CentOS 7安装配置Samba服务器(挂载共享文件夹)

    CentOS 7安装配置Samba服务器 CentOS 7下Samba服务器安装配置过程笔记. 假设我们有这样一个场景 共享名 路径 权限 SHAREDOC /smb/docs 所有人员包括来宾均可以 ...

  8. Tomcat优化详细1

    在Tomcat和应用程序进行了压力测试后,如果您对应用程序的性能结果不太满意,就可以采取一些性能调整措施了,当然了前提是应用程序没有问题,我们这里只讲Tomcat的调整.由于Tomcat的运行依赖于J ...

  9. MVVM中viewmodel的理解

    网上有人写了这段话,我也有同感,特别是第一种用法,很重要,后一种用法,我觉得是把第一种用法加入controller中了. 第一种 “view model” 是 “model for the view” ...

  10. Django之auth模块用户认证模块

    一.Auth模块 1)auth模块是什么.登录后台使用的账号密码,则就是使用的auth模块创建的表 Auth模块是Django自带的用户认证模块: 我们在开发一个网站的时候,无可避免的需要设计实现网站 ...