css比較特殊選擇器彙總（持續更新）

時間 2019-12-07

標籤 css 比較特殊選擇器彙總持續更新欄目 CSS 简体版

原文原文鏈接

一、css選擇器中加號（+）是啥意思？css

　　加號（+）爲：相鄰同胞選擇器，若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，能夠使用相鄰兄弟選擇器(Adjacent sibling selector)html

如圖：ide

咱們常常見到頁面上方的導航，用「/」分隔開，這個時候咱們就能夠考慮使用相鄰兄弟同胞選擇器，spa

樣式寫法相似如：li+li:before {padding: 0 5px;color: #ccc;content: "/\00a0";}，表示li的緊接的li的前面加入樣式‘/’,而且這兩個li有共同的父元素。因此除了第一個外其餘的li的前面都會加入‘/’,（這裏用到了before，能夠看個人另外一篇博客，關於before after僞元素的介紹。http://www.javashuo.com/article/p-gjvavkmv-gy.html）。code

上述圖片樣式完整代碼以下：htm

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>checkbox css change</title>
    <style type="text/css">
        .breadcrumb>li {
            display: inline-block;
        }
        
        .breadcrumb>li+li:before {
            padding: 0 5px;
            color: #ccc;
            content: "/\00a0";
        }
    </style>
</head>

<body>
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">class0</a></li>
        <li><a href="#">class1</a></li>
        <li><a href="#">class2</a></li>
        <li><a href="#">class3</a></li>
        <li class="active">Data</li>
    </ol>

</body>

</html>