相鄰元素選擇器

時間 2019-11-30

標籤相鄰元素選擇器简体版

原文原文鏈接

簡介

在寫css樣式佈局的時候常常會遇到一種狀況，在循環列表的時候統一有margin-top：10px,或者margin-right: 10px這樣的狀況，可是你並不想第一個元素添加上外邊距；在不知道相鄰兄弟選擇器前一般是自定義class樣式把第一個元素設置爲margin-top:0;使用了相鄰兄弟選擇器後只須要一行代碼就能夠解決css

htmlhtml

<body>
    <div>
        <ul>
            <li>ABC</li>
            <li>ABC</li>
            <li>ABC</li>
            <li>ABC</li>
        </ul>
    </div>
</body>

css佈局

　　<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            padding-left: 10px;
        }
        li {
            margin-top: 10px;
        }
　　</style>

解決方法和實現效果

即在元素後面添加+號，具體參考能夠查看 http://www.w3school.com.cn/css/css_selector_adjacent_sibling.aspspa

<style>
        li+li {
            margin-top: 10px;
        }
</style>

小結

能用css解決的問題就不要用js或者濫用css加大複雜度，本篇作個小記錄，爲之前的本身感到😳😳😳😳！3d

相關標籤/搜索