Verwendung des Not()-Selektors-CSS-Tutorial-php.cn

Verwendung des Not()-Selektors

php中世界最好的语言

Freigeben： 2018-03-22 17:23:59

Original

3108 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Verwendung des not()-Selektors vorstellen. Was sind die Vorsichtsmaßnahmen, wenn Sie den not()-Selektor verwenden?

Was in diesem Artikel verwendet wird, ist der neue Pseudoklassenselektor :not() in CSS3, der Elemente abgleichen kann, die keinen Selektor enthalten. Angenommen, es gibt eine Liste, jedes Listenelement hat ein Endergebnis, aber das letzte Element benötigt kein Endergebnis

Der Beispielcode lautet wie folgt:

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>使用:not() 最后一行li不添加边框</title>
<style type="text/css"></p>
<p>/* 
    使字体在所有设备上都达到最佳的显示
*/
html { 
 -moz-osx-font-smoothing: grayscale; 
 -webkit-font-smoothing: antialiased; 
 text-rendering: optimizeLegibility; 
}</p>
<p>/*
    给body添加阴影
*/
body:before {
 content: "";
 
position
: fixed;
 top: -10px;
 left: 0;
 width: 100%;
 height: 10px;
 -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 z-index: 100;
}</p>
<p>/*
 设置列表
*/
.listItem {
    border: 1px solid red;
}
.listItem ul {
    width: 100%;
    
overflow
:hidden;
}
.listItem ul,listItem li {
    margin:0;
    
padding
:0;
    
list-style
:none;
}
.listItem li {
   
margin-left
:10px;
}
/*
    li 最后一个元素不添加边框
*/
.listItem li:not(:last-child) {
    border-bottom:1px solid green;  
}
/*
    与第一个li相连兄弟
*/
.listItem  li
:first-child
 ~ li { border-left: 1px solid #666; }
</style>
</head></p>
<p><body></p>
<p> <p class="listItem">
     <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表5</li>
        </ul>
    </p>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Drei Möglichkeiten, absolut positionierte Elemente horizontal und vertikal zu zentrieren

width:100%; Unterschied bei der Verwendung von width:auto

Das obige ist der detaillierte Inhalt vonVerwendung des Not()-Selektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!