css复杂选择器和其基础属性

css复杂选择器：
1.父子选择器：

<!--父子选择器-->
    <div>
        <span>123</span>
    </div>
    <span>456</span>

    <div>
        <span class="demo">
            <em class="demo1">
                4564565
            </em>
        </span>
    </div>

/* 父子选择器*/
div span{
    background-color: red;

}

.demo .demo1{
    background-color: red;
}

显示成果如图：

从上可以看出：父子选择器，可以选择其标签的子标签，或者其子标签的子标签都可以更改。

2.直接选择器：

<!--直接选择器-->
    <div>
        <em>1</em>
        <span>
            <em>1</em>
        </span>
        <em>1</em>
    </div>

/* 直接选择器*/
div >em{
    background-color: red;
}
div >span>em{
    background-color: blue;
}

显示成功如下：

直接选择div标签里面的em标签，然后实现，区别于父子标签，不会再去找子标签里面的子标签。

3.并列选择器

<!--并列选择器-->
<div>1</div>
<div class="de">2</div>
<div class="del">3</div>

div.de{
    background-color: darkgreen;
}
div.del{
    background-color: gold;
}

显示如下：

并列选择器可以采用标签+class 也可以采用标签+id+class等等，各种搭配，找到自己指定的地方进行修改，所以称为并列选择器。大家可以多次尝试。

4.分组选择器

<!--分组选择器-->
<em>1</em>
<strong>2</strong>
<span>3</span>

em,strong,span{
    background-color: lightyellow;
}

可以看出上述的代码，我们想一次将其都改变，即可使用上述的代码：

css基础属性：
css为操控其样式的代码：下面介绍一些基础：

<!--css基础属性-->

<div id="hubei">湖北师范大学</div>

#hubei{
    font-size: 50px;/*设置字体大小*/
    font-weight: bold;/*设置字体加粗*  bold=600*/
    font-style: italic;/*设置斜体*/
    border: 1px solid black;/*加一个边框
    border-left-color 左边边框
    */
}

显示成果自己可以输入查看：

我们这里有一个css的一个介绍网站，上面有具体的一些介绍：

下面给出其链接：css全部属性索引

最后，再次介绍下颜色代码

/*color介绍：
颜色代码：

red        greed      blue

00-ff      00-ff     00-ff

上述为饱和度，各个颜色，互相结合
#ffffff:白色=#fff  每两位相同 可以缩写为一个
#000000：黑色=#000

*/

red的饱和度为00-ff
greed的饱和度为00-ff
blue的饱和度为00-ff

我们想要任何颜色都可以通过其饱和度来选择，互相搭配得出，作为写代码的不需要考虑这些，但是也要基本了解下。