CSS 基础优先级选择器继承

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;

　　}

　　包含指定值 |=

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

posted on 2017-12-28 15:59 我是伊只雄熊阅读(177) 评论(0) 编辑收藏举报

刷新页面返回顶部

我是伊只雄熊

导航

公告