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;
}