cssはいくつかのli要素に一致し、スタイルを設定する方法
3622 ワード
cssは、いくつかのli要素と一致してスタイルを設定する方法です.li要素のリストがある場合は、指定した場所liのスタイルを設定します.これは、この設定するli要素にclassやidを追加するなど、以前は少し面倒だったかもしれません.しかし、上記の方法は柔軟ではありません.次に、擬似クラスセレクタでこの機能を実現する方法を紹介します.コードの例:
上のコードでは、2番目のli要素のフォント色を緑に設定できます.:nth-childはCSSの擬似クラス選択子E:nth-child(n)の章を参照することができる.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=18282
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> </title>
<style type="text/css">
#items{
width:900px;
height:auto;
margin:0 auto;
padding:5px 0;
clear:both;
}
#items ul, #items li{
list-style:none;
}
#items li{
width:500px;
height:28px;
text-align:left;
padding-left: 0px;
line-height:28px;
border-bottom:dashed 1px #CCC;
cursor:pointer;
}
#items ul li:nth-child(2){color:green;}
</style>
</head>
<body>
<div id="items">
<ul>
<li> ， </li>
<li> ， </li>
<li> url softwhy.com</li>
<li> ， </li>
<li>div css </li>
</ul>
</div>
</body>
</html>上のコードでは、2番目のli要素のフォント色を緑に設定できます.:nth-childはCSSの擬似クラス選択子E:nth-child(n)の章を参照することができる.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=18282
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/