CSS 选择器

CSS

权值

!important 最高；

• style：1000
• id：100
• class、伪类、属性选择器：10
• 标签选择器：1

就近原则

后面声明覆盖前面。

CSS 的作用方式是：
选择器 + {
　　　　 属性1： 属性值；
　　　　 属性2： 属性值；
　　　　 }

常见的选择器有如下几种：

• 通用选择器：＊

* {
  }
/* *选择器应用于页面中所有的元素 */

• 类型选择器： 标签名

h1, p, span {
            }
/* 类型选择器匹配相对应的元素 */

• id选择器： #

#identity {
          }
/* 选择 id 值为 identity 的元素 */          

• 类选择器： .

.class {
       }
/* 选择 class 值为 class 的元素 */
p. class {
         }
/* 选择所有class值为class的 <p> 元素 */

• 子元素选择器： >

li> a {
       }
/* 选择所有父元素为 <li> 的 <a> 元素*/ 

• 后代选择器：

p a {
    }
/* 选择 <p> 元素内的所有 <a> 元素 */

• 相邻兄弟选择器： +

h1+ p {
      }
/* 选择 <h1> 元素后的第一个兄弟 <p> 元素 */

• 普通兄弟选择器： ~

h1~ p {
      }
/* 选择所有 <h1> 元素以后的兄弟 <p> 元素 */

-

某些情况下还可能使用到特性选择器：

• EXISTENCE（存在选择器）： [attr]

p[class] {
         }
/* 选择所有具有 class 特性的 <p> 元素 */

• EQUALIT（精确选择器）： [attr=value]

p[attr="value"]{
          }
/* 选择特定特性值的 <p> 元素 */

• SPACE（部分选择器）： [attr~=value]

p[class~="dscrpt"] {
                 }
/* 选择 class 属性中以**空格隔开**的含有 descrpt 值的 <p> 元素 */

• START（开头选择器）：[attr^=value]

div[class^="aa"]

• END（结尾选择器）：[attr$=value]

例如：

p *{
color: red;
}

将会把所有p元素包含的文本变成红色。

后代选择器还能构成非子选择器：

section * a{
font-size:2em;
}

这样就跳过了section元素的子元素，选择了非子元素的a标签