ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSで最初のliをスタイル解除する方法
CSSで最初のliをスタイル解除する方法
- 青灯夜游オリジナル
- 2022-09-02 19:02:532194ブラウズ
CSS では、最初の li をスタイルなしのままにすることは、最初の li を除外し、他の li 要素にスタイルを追加することを意味します。 3 つの方法: 1. ":not()" と ":first-child" を使用します。構文は "element:not(:first-child){style}" です。 2. ":nth-of-type" を使用します。構文 "Element:nth-of-type(n 2){style}"; 3. ":nth-child" を使用し、構文は "Element:nth-child(n 2){style}" です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
最初の li にはスタイルを設定しないようにします。つまり、最初の li 以外の他の li にスタイルを追加します。
#3 つの実装方法
方法 1: セレクターを使用します: not() および: first-child
- #Use:first-child を使用して最初の要素を選択します
- 次に、
- :not()
を使用して最初以外の要素と一致させます子要素のその他の要素
例: 最初の li には赤い背景スタイルを追加せず、最初の li 要素を除く他の li 要素に赤い背景を追加します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li{
float: left;
height: 50px;
line-height: 50px;
width: 50px;
margin: 20px;
background: #ccc;
text-align: center;
color: #fff;
}
li:not(:first-child){
background:red;
}
</style>
</head>
<body>
<ul class="dom">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
- :not(selector)
セレクターは、指定された要素/セレクターではないすべての要素と一致します。
- :first-child
セレクター 指定されたセレクターは、親要素に属する最初の子要素を選択するために使用されます。
:nth-of-type()
セレクターは、親要素の特定の型の N 番目の子要素であるすべての要素と一致します。n は 0 から始まり、
は当然のことながら Start です2番目の要素で。 <pre class="brush:php;toolbar:false">li:nth-of-type(n+2){
background:pink;
}</pre>
であり、偶数の要素を選択する場合は、次のようにする必要があります。 2n 2;プロジェクトの状況に応じて特定の状況を使用できます。 <pre class="brush:php;toolbar:false">li:nth-of-type(2n+1){
background:pink;
}
li:nth-of-type(2n+2){
background:green;
}</pre>
:nth-child():nth-child(n ) セレクターは、要素の型に関係なく、その親要素に属する N 番目の子要素と一致します。
メソッド 3 およびメソッド 2 タイプの場合は、
() の値を「n 2」に設定するだけです。 <pre class="brush:php;toolbar:false">li:nth-child(n+2){
background:green;
}</pre>
となり、偶数番号の要素を選択する場合は、 2n 2;プロジェクトの状況に応じて特定の状況を使用できます。 <pre class="brush:php;toolbar:false">li:nth-child(2n+1){
background:green;
}
li:nth-child(2n+2){
background:pink;
}</pre>
以上がCSSで最初のliをスタイル解除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。