高階選擇器

總結：

 <!--
        總結：
            基礎選擇器：
                1.標籤選擇器    div
                2.類選擇器     .div1
                3.id選擇器     #box
                4.萬用字元選擇器  *
            高階選擇器：
                1.群組選擇器  中間用,
                    .title,.content,.footer{}
                
 
2.交集選擇器  選擇器之間不能有空格，第一個標籤必須是標籤選擇器，第二個標籤可以是id或者類選擇器
                    p.p1{}   p#title1{}
                3.後代選擇器  選擇器之間用 空格
                    ul a{}
                4.子代選擇器  選擇器之間用 >
                    ul>li{}
                5.毗鄰選擇器  選擇器之間用 +  緊跟著h3標題的標籤
                    h3+p{}
                
 
6.兄弟選擇器  選擇器之間用~
                    h3~p{}
                7.屬性選擇器
                     [class='baidu']{}
                     [class^='btn']{}
                     [class$='ault']{}
            css樣式優先順序：
                行內樣式 > 內部樣式表 > 外部樣式表
                ID選擇器 > 類選擇器 > 標籤選擇器
    
 
-->

 並集選擇器：

/*並集選擇器 （組合）  設定多個標籤中的統一樣式*/
        a,h4{
            color: #666;
            font-size: 20px;
            text-decoration: none;
        }
        
        /* *   萬用字元選擇器   */
        /* 效能有點差*/
        html,body,div,p,span,a{

            color: red;
        
        }

交集選擇器：

/*交集選擇器*/

        h3{
            width:300px;
            color: red;
        }

        .active{
            font-size: 30px;
        }

        h3.active{
            background-color: yellow;
        }

後代選擇器

    
        /*後代選擇器 在css中使用非常頻繁*/
        /*div  p{
            color: red;
        }

        div div p{
            color: yellow;
        }

        .container div p{
            color: green;
        }*/

子代選擇器：

/*子代選擇器*/

        .container>p{
            color: yellowgreen;
        }

屬性選擇器:

除了HTML元素的id屬性和class屬性外，還可以根據HTML元素的特定屬性選擇元素。

 <div class="box">
        <form>
            <label for="user">使用者名稱</label>
            <input type="text" name="" id="user">
            <label for="pwd">密碼：</label>
            <input type="password" id="pwd">
        </form>

    </div>
---------------------------------------------------
根據屬性查詢

[title] {
  color: red;
}
---------------------------------------------------
根據屬性和值查詢
找到所有title屬性等於hello的元素：
[title="hello"] {
  color: red;
}
-----------------------------------------------------
找到所有title屬性以hello開頭的元素：

[title^="hello"] {
  color: red;
}

------------------------------------------------------
找到所有title屬性以hello結尾的元素：
[title$="hello"] {
  color: red;
}
------------------------------------------------------
找到所有title屬性中包含（字串包含）hello的元素：

[title*="hello"] {
  color: red;
}
----------------------------------------------------
找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：
[title~="hello"] {
  color: red;
}
---------------------------------------------------
表單常用
input[type="text"] {
  backgroundcolor: red;
}