css 常用選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>常用選擇器</title>
        <style type="text/css">
            /*
            1.  通配選擇器：*
             選中頁面中的所有元素
             語法： *{}
             * */
            *{
                color: red;
            }
            
            /*
            2.  為多個選擇器設置樣式
            可以同時選中多個選擇器的元素          
             語法： 選擇器1，選擇器2，選擇器N{}
             * */
            //為擁有class p3 span 元素設置一個背景顏色為黃色
            #p1, .p2, h1{
                background-color: yellow;
            }
            
            /**
             * 3. 復合選擇器（交集選擇器）
             * 可以選中同時滿足多個選擇器的元素
             * 語法：
             * 選擇器1選擇器2選擇器N{}
             * */
            span.p3{
                background-color: aquamarine;
            }
            
        </style>
    </head>
    <body>
        <h1>標題一</h1>
        <p id="#p1">鋤禾日當午</p>
        <p class=".p2">鋤禾日當午</p>
        <p>鋤禾日當午</p>
        <p>鋤禾日當午</p>
        <p>鋤禾日當午</p>
        <p>鋤禾日當午</p>    
        <span class="p3"></span>
    </body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容