我是伊只雄熊

导航

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;

  }

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

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