css权重+选择器

115 阅读1分钟

一.css权重

 //多个选择器时,权重相加比较(256进制)
 !important      Infinity
 行间样式         1000
 id              100
 class|属性|伪类  10
 标签选择器|伪元素 1
 通配符           0

二.css选择器

1. 父子选择器/派生选择器

/*选中div下的所有span标签*/
div span{
  background:red;
}

2. 直接子元素选择器

  /*选中div下的直接子元素span*/
  div > span{
  background:red;
  }

3.并列选择器

  <div>1</div>
  <!--并列选择器只改变2的背景颜色-->
  <div class="demo">2</div>
  <p class="demo">3</p>
 /*选中div元素并且class为demo的标签(中间不加空格)*/
 div.demo{
 background:red;
 }

4.分组选择器

  <!--三个标签设置同一个背景颜色-->
  <em>1</em>
  <strong>2</strong>
  <span>3</span>
   /*使用逗号分割*/
   em,
   strong,
   span{
     background:red;
   }