【无标题】

1.复合选择器

#1.交集选择器
交集选择器:
格式：
选择器选择器 {
属性:属性值
}
注意：如果有标签选择器，那么标签选择器写在前面

<div class="fa">1111111</div>
    <span class="fa fa1">222222</span>
    <div>333333</div>
    <div class="fa son">44444</div>
    .fa.son {
            color: yellow;
        }

2.并集选择器
并集选择器:表示前一个选择器和后一个选择器作用公共样式
格式：
选择器,选择器 {
属性:属性值
}
作用：一般用来作用公共样式

<div class="fa">1111111</div>
    <span class="fa1">222222</span>
    <div>333333</div>
    <div class="son">44444</div>
     .fa,
        .son {
            color: red;
        }

3.子代选择器
子代选择器:会选择所用同名的子代(注意只能选择子代)
格式：
选择器>选择器 {
属性:属性值
}

div class="fa">
        <p>1111</p>
        <p>2222</p>
        <p>3333</p>
        <p>4444</p>
    </div>
    <div class="fa2">
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
        <p>ddd</p>
    </div>
    <div class="fa3">
        <div class="son1">
            <span>111111</span>
            <div class="son2">
                <span>000000</span>
                <p>9999999</p>
            </div>
        </div>
        <div>22222</div>
        <span>333333</span>
        <p>444444</p>
        <div class="son1">aaaaaaaa</div>
        <div class="son2">bbbbbbb</div>
    </div>
    .fa>p {
            color: green;
        }

        .fa2>p {
            color: red;
        }

        .fa3>.son1>.son2 {
            color: pink;
        }

4.后代选择器
后代选择器：会选择所有同名的后代
格式：
选择器 选择器 {
属性:属性值
}

<div class="fa1">
        <div class="son1">
            <span>111111</span>
            <div class="son2">
                <span>000000</span>
                <p>9999999</p>
            </div>
        </div>
        <div>22222</div>
        <span>333333</span>
        <p>444444</p>
        <div class="son1">aaaaaaaa</div>
        <div class="son2">bbbbbbb</div>
        div.fa1>.son1 p,span{
            color: red;
        }

5.兄弟选择器
兄弟选择器：
+：表示选择下一个相邻的兄弟
~：表示选择下面所有同名的兄弟
格式：
选择器+选择器 选择器~选择器
*/

 <div class="fa">11111111</div>
<p>222222222</p>
<span>33333333</span>
<div class="fa1">44444444</div>
<div>5555555</div>
 .fa+div {
            color: red;
        }

        .fa~.fa1 {
            color: red;
        }

6.属性选择器：
属性选择器
格式：
[属性] {
属性:属性值
}
[属性^=“属性值”] 以什么属性值作为开头
[属性*=“属性值”] 包含什么属性值
[属性$=“属性值”] 以什么属性值作为结尾
*

 <input type="text" class="cde" placeholder="111">
<input type="text" value="xioo" class="aced" placeholder="222">
<input type="password"  class="abc" placeholder="333">
 [type="password"] {
            background-color: red;
        }

        [class^="ab"] {
            background-color: yellow;
        }

        [class*="d"] {
            background-color: green;
        }

        [class$="e"] {
            background-color: blue;
        }