群组选择器、透明度属性、css选择器的优先级

群组选择器

  把具有相同样式的元素用群组选择器写到一起
    群组选择器是将任意多个选择器分在一组
    每个选择器之间用逗号隔开
    最后一个选择器不用写逗号
​
  h2,
    .box,
    #con,
    .wrap p {
      font-size: 40px;
      color: tomato;
    }

透明度属性

1.rgba

​
 透明度属性
    rgba
    r:red  0-255
    g:green  0-255
    b:blue  0-255
    a:alpha  透明度
       0-1  半透明
       0    完全透明
       1    完全不透明
​
​
    应用于：
    背景颜色
    字体颜色
    边框颜色
​
​
  /* 透明度：1  完全不透明*/
      background-color: rgba(255, 255, 0, 1);
      /* 透明度：0  完全透明*/
      background-color: rgba(255, 255, 0, 0);
      /* 透明度：0.5  半透明*/
      background-color: rgba(255, 255, 0, .5);
      background-color: rgba(255, 255, 0, .9);
      background-color: rgba(255, 255, 0, .2);
​
      color: rgba(0, 0, 0,.5 );
​
      border: 10px solid rgba(0, 0, 0,.8);

2.opacity

opacity:透明度
    取值：
      0-1  半透明
       0    完全透明
       1    完全不透明
​
       注意：这个属性不仅自身透明，而且后代也透明，内容也透明
​
/* 自身及内容透明，后代也会透明 */
      /* 透明度 1  完全不透明*/
      opacity: 1;
      /* 透明度 0  完全透明*/
      opacity: 0;
      /* 透明度 .5  半透明透明*/
      opacity: 0.5;

css选择器的优先级

1.通配符选择器  权重（权值） 0
2.标签选择器  权重（权值） 1
3.类（class）选择器  权重（权值） 10
4.id选择器  权重（权值） 100
​
行间样式的权重（权值） 1000
​
​
优先级越高就会显示谁的样式
​
样式被划掉---就是被优先级高的样式覆盖了
​
css选择器优先级规则：
1.权重越大，优先级越高,  优先级越高就会显示谁的样式
id选择器的优先级>类选择器的优先级>标签选择器的优先级>通配符选择器的优先级
2.行间样式的优先级高于id选择器的优先级
3.优先级最高，高于行间样式的优先级
!important
在css样式后面加上!important
important:重要的意思
4.选择器相同的情况下，后写的会覆盖先写的
5.复合选择器的权值等于所有单一选择器权值的累加
​
​
/* 权值：  10+1=11
.wrap  10
h1    1
​
*/
.wrap h1 {
color: tomato;
}
​
/* 权值：  10+10=20
.wrap  10
.box    10
​
*/
.wrap .box {
color: pink;
}
​
/* 20>11  所以：显示粉色 */
​
/* 
权值：  10+10+100=120
.wrap  10
.f   10
#b  100
*/
.wrap .f #b {
background-color: aqua;
}
​
<div class="wrap">
    <h1 class="box">疫情--退退退退</h1>
​
    <div class="f">
        <div id="b">bb</div>
    </div>
</div>