CSS：選擇器

時間 2019-11-13

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

1.CSS選擇器.

標籤選擇器[div]
id選擇器[#name]每一個標籤惟一標識
class選擇器[.class]多個標籤能夠用同一個Class,同一個標籤也能夠有多個class
後代選擇器div div[只要知足這個條件的皆可（子孫後代）]
子代選擇器 div>div[必須是父代的親兒子的所有內容]注意：子代選擇器IE6不支持
相鄰兄弟選擇器div+div
分組選擇器，若是要寫多個標籤的屬性能夠用逗號隔開
僞類選擇器：：link/visited：/hover:/:active（它們有前後順序）

提升原元素的權重值 background:@ffff00 !important;
選擇有多個class的元素
<div class="aa">aa</div>css
<div class="aa bb">bb</div>html
.aa.bb/或者div.aa.bb

選擇器權重值：

!import>內聯樣式>id>class>標籤;
css:class樣式跟順序有關，如何是使用同一個選擇器，後面的會把前面的覆蓋掉；
若是有多個子元素，能夠相加以後比較，若是相同，後面的把前面的覆蓋掉；
（但不是絕對的，若是有具體的選擇器會比層層進的大）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a .b .c .d .e .f .g .h .i .j .k{
            background-color: red;
        }
        #l{
            background-color: aqua;//背景爲aqua;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b">
        <div class="c">
            <div class="d">
                <div class="e">
                    <div class="f">
                        <div class="g">
                            <div class="h">
                                <div class="i">
                                    <div class="j">
                                        <div class="k" id="l">div</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。