问题描述
|
我有一个包含项的下拉菜单,我想使用ODD和EVEN来替代颜色。
我的问题是...用于设置下拉列表项目样式的CSS代码是什么?
解决方法
使用CSS nth-child伪类:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
<title>HTML Dropdown list item baground colors</title>
<style type=\"text/css\">
#myForm select option:nth-child(odd) {
color:black;
background:yellow;
}
#myForm select option:nth-child(even) {
color:white;
background:blue;
}
#myForm select {
background:green;
color:orange;
}
</style>
</head>
<body>
<form id=\"myForm\" action=\"#\" method=\"get\">
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
</div>
</body>
</html>
,您可以将其他背景设置为:
#o1{background:red;}
#o2{background:green;}
#o3{background:#FFEA76;}
<option id=\"o1\">blah 1</option>
<option id=\"o2\">blah 2</option>
<option id=\"o3\">blah 3</option>
,您可以为列表项设置默认样式,然后应用更具体的样式来更改甚至项。奇数项将使用默认样式。
.nav{
padding: 0;
list-style: none;
}
.nav li{
color: #c1a404;
background: #007e96;
padding: 10px;
font-size: 20px;
font-family: Futura,sans-serif;
}
.nav li:nth-child(even) {
color: white;
background: dodgerblue;
}
<ul class=\"nav\">
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Careers</li>
<li>Contact</li>
</ul>