CSS选择器

06 March 2018

css规则

选择器 + 一条或多条声明；

每条声明：属性 + 值；
例：

  h1 {
          color: red; 
          font-size: 14px;
      }

CSS高级语法

选择器分组
例：

  h1, h2, h3, h4, h5, h6 {
      color: green;
  }

继承
Netscape 4 由于不支持CSS继承，需要特殊处理

CSS派生选择器

派生选择器
例：

  li strong {
      font-style: italic;
      font-weight: nomal;
  }

后代选择器例：作为h1元素后代的任何em元素
例:
```
  h1 em {
      color: red;
  }
```

子元素选择器：后代选择器缩小应用范围，只应用某个元素的子元素
例：

  h1 > strong {
      color: red;
  }

  说明：从右往左读，选择作为 h1 元素子元素的所有 strong 元素（简单理解，就是两个元素相邻，中间没有其他元素）

相邻兄弟选择器
例：

  h1 + p {
      margin-top: 50px;
  }

  说明：选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

id选择器

为标有特定 id 的 HTML 元素指定特定的样式，id 选择器以 “#”来定义。
注意：id属性只能在每个HTML文档中出现一次。

    #red {
        color: red;
    }
    
    #green {
        color: green;
    }

    #sidebar h2 {
        font-size: 1em;
        font-weight: normal;
        font-style: italic;
        margin: 0;
        line-height: 1.5;
        text-align: right;
    }

类选择器

类选择器以一个点号显示，由于扩展性较id选择器好，在实际编码中应用比较多。
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

    .center {
        text-align: center；
    }

    .fancy td {
        color: #f60;
        background: #666;
    }

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

    input[type="text"] {
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: yellow;
        font-family: Verdana, Arial;
    }

创建CSS

外部样式表
例：

  <head>

  <link rel="stylesheet" type="text/css" href="mystyle.css" />

  </head>

内部样式表
例：

  <head>

  <style type="text/css">
      hr {
          color: sienna;
      }

      p {
          margin-left: 20px;
      }

      body {
          background-image: url("images/back40.gif");
      }
  </style>

  </head>

内联样式慎用
例:

  <p style="color: sienna; margin-left: 20px">
  this is a paragraph
  </p>

多重样式属性部分继承，部分会使用内部样式
例:

  /* 外部样式表 */
  h3 {
      color: red;
      text-align: left;
      font-size: 8pt;
  }

  /* 内部样式表 */
  h3 {
      text-align: right;
      font-size: 20pt;
  }

  /* 
      如果页面 同时拥有内部样式表 + 外部样式表，那么 得到的 h3 样式是
      color: red;
      text-align: right;
      font-size: 20pt;
   */