重温系列6《css 复杂选择器》

1.CSS的注解 ：

/*
我是css的注解样式，在两星号后面
*/

2.父子选择器：父父级元素 父级元素 子元素 子子级元素 { 括号里面为css的样式 }：
下面是父子结构的html的结构

下面是CSS的代码：

.fatherfather .father .son .sonson{
    background-color: black;
    width: 300px;
    height: 300px;
}
.fatherfather .father .son{
    background-color: red;
    width: 600px;
    height: 600px;
}
.fatherfather .father{
    background-color:green;
    width: 900px;
    height: 900px;
}
.fatherfather{
    background-color: blue;
    width: 1200px;
    height: 1200px;
}

然后你会得到这个图画：

以上是比较传统的写法。但是通常情况页面结构是这样的：

这的css选择器可以这样写，我需要选中所有的span标签。如下代码：三个span标签全部被选中了。

div span{
    background-color: salmon;
}

3.直接子元素选择器，下图结构，我想选中第一个span标签。需要用一个 > 号表示。

CSS代码如下：

div > span{
    background-color: seagreen;
}

这样操作2号与3号span标签将不会被选中。
4.并列选择器，例如标签名 .class值{css的样式}，例如：我要选择第三行的div标签。

css的代码如下：我用的并列选择器 div .three {css样式代码}。

      div .three{
            background-color: aqua;
            
        }

5.分组选择器，就是同时选择中多个标签一起设置：

现在同时设置div span strong三个标签。就是把标签用逗号隔开，叠在一起写。最后一个标签元素不要逗号。

   div,
   span,
   strong{
           background-color: aqua;
       }

6.权重计算，复杂选择器一般同时会选中多个标签，这个时候就会涉及权重的计算。

如上的（括号里面的就是权重值，每一个权重进阶下一个权重是256进制）。

如果权重相等，那么谁在后面就执行谁，也就是说后面会覆盖前面的效果（必需是css的相同属性）。举例：

我同时给第三行的div进行css的样式。如下css的代码，两个代码的权重一样。
都是：标签的权重+class的权重=20，所以执行的效果是红色。

     div .three1{
            background-color: aqua;

        }
        div .three2{
            background-color:red;

        }