如何更有效地更改列表中的id上的颜色？

时间：2015-04-24 10:36:39

标签： html css

我的网站上有<ul>，<ul>内总共有<li>。 我把所有这些都分别叫做.list。我需要它们有不同的颜色，所以我为它们做了四个不同的<id>。 <id="list1">，<id="list2">，<id="list3">，<id="list4">。

.list{
	float:right;
	position:relative;
	width: 120px;
	height: 80px;
	text-align: center;
	line-height: 55px;
	margin-top: -16px;
	transition: all 0.4s ease-in-out;
}

.list h3{
	font-family: 'Raleway', sans-serif;
	color:rgb(51, 51, 51);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
	z-index: 4;
	height: 80px;
}


#list4:hover{
	font-family: 'Raleway', sans-serif;
	float:right;
	position: relative;
	width: 120px;
	height: 80px;
	text-align: center;
	background-color: rgb(151, 215, 196);
	transition: all 0.4s ease-in-out;
	line-height: 55px;
	margin-top: -16px;
}

#list3:hover{
	font-family: 'Raleway', sans-serif;
	float:right;
	position: relative;
	width: 120px;
	height: 80px;
	text-align: center;
	background-color: rgb(215, 194, 151);
	transition: all 0.4s ease-in-out;
	line-height: 55px;
	margin-top: -16px;
}

#list2:hover{
	font-family: 'Raleway', sans-serif;
	float:right;
	position: relative;
	width: 120px;
	height: 80px;
	text-align: center;
	background-color: rgb(189, 215, 151);
	transition: all 0.4s ease-in-out;
	line-height: 55px;
	margin-top: -16px;
}

#list1:hover{
	font-family: 'Raleway', sans-serif;
	float:right;
	position: relative;
	width: 120px;
	height: 80px;
	text-align: center;
	background-color: rgb(151, 190, 215);
	transition: all 0.4s ease-in-out;
	line-height: 55px;
	margin-top: -16px;
}
<ul>
				<li class="list" id="list1">
					<a href="#content1" class="smoothScroll">
						<h3>contact</h3>
					</a>	
				</li>
				<li class="list" id="list2">
					<a href="#content2" class="smoothScroll">
						<h3>events</h3>
					</a>	
				</li>
				<li class="list" id="list3">
					<a href="#content3" class="smoothScroll">
						<h3>band</h3>
					</a>
				<li class="list" id="list4">
					<a href="#main" class="smoothScroll">
						<h3>home</h3>
					</a>	
				</li>
			</ul>

如您所见，这不是很有效。我似乎找不到更好的方法来实现相同的结果。任何帮助表示赞赏。

5 个答案:

答案 0 :(得分：0)

因为li元素之间唯一不同的是悬停时的颜色。我建议将所有样式放在课程list上并使用nth-child()，如下所示：

.list:nth-child(1):hover{
    background-color: rgb(151, 190, 215);
}

...

这样，唯一的Ids list1，list2等就变得不必要了

＆＃13;
＆＃13; 
.list{
	float:right;
	position:relative;
	width: 120px;
	height: 80px;
	text-align: center;
	line-height: 55px;
	margin-top: -16px;
	transition: all 0.4s ease-in-out;
}

.list h3{
	font-family: 'Raleway', sans-serif;
	color:rgb(51, 51, 51);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
	z-index: 4;
	height: 80px;
}

.list:nth-child(1):hover{
  background-color: rgb(151, 190, 215);
}

.list:nth-child(2):hover{
  background-color: rgb(189, 215, 151);
}

.list:nth-child(3):hover{
  background-color: rgb(215, 194, 151);
}

.list:nth-child(4):hover{
  background-color: rgb(151, 215, 196);
}
＆＃13; 
<ul>
				<li class="list">
					<a href="#content1" class="smoothScroll">
						<h3>contact</h3>
					</a>	
				</li>
				<li class="list">
					<a href="#content2" class="smoothScroll">
						<h3>events</h3>
					</a>	
				</li>
				<li class="list">
					<a href="#content3" class="smoothScroll">
						<h3>band</h3>
					</a>
				<li class="list">
					<a href="#main" class="smoothScroll">
						<h3>home</h3>
					</a>	
				</li>
			</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

.list{
	float:right;
	position:relative;
	width: 120px;
	height: 80px;
	text-align: center;
	line-height: 55px;
	margin-top: -16px;
	transition: all 0.4s ease-in-out;
}

.list h3{
	font-family: 'Raleway', sans-serif;
	color:rgb(51, 51, 51);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
	z-index: 4;
	height: 80px;
}


.list:nth-of-type(4):hover{
 
        background-color: rgb(151, 215, 196);

}

.list:nth-of-type(3):hover{
	
	background-color: rgb(215, 194, 151);
	
  
}

.list:nth-of-type(2):hover{
	
	background-color: rgb(189, 215, 151);
	
}

.list:nth-of-type(1):hover{
	
	background-color: rgb(151, 190, 215);
	

}
<ul>
				<li class="list">
					<a href="#content1" class="smoothScroll">
						<h3>contact</h3>
					</a>	
				</li>
				<li class="list">
					<a href="#content2" class="smoothScroll">
						<h3>events</h3>
					</a>	
				</li>
				<li class="list">
					<a href="#content3" class="smoothScroll">
						<h3>band</h3>
					</a>
				<li class="list">
					<a href="#main" class="smoothScroll">
						<h3>home</h3>
					</a>	
				</li>
			</ul>

  

除了backgroundcolor，您的其他.list似乎没有任何不同，所以我从其他.list

中删除了副本属性
可以使用

.list:nth-of-type()代替id

答案 2 :(得分：0)

您可以删除CSS属性的重复声明。例如，float: right和.list都定义了#list3。

由于 - 在您的情况下 - 给定元素与两个CSS选择器匹配，.list中的定义将首先应用于您的元素（因为基于类的匹配具有lower priority而不是基于id的匹配），并且然后 #list3中的定义将被应用，（在您的情况下，不必要地）覆盖冲突的值。

<强> HTML 

<!-- this element will be styled first by .list, then by #list3 -->
<li class="list" id="list3">

也就是说，（IMO）显着的有效方法可以减少CSS的大小以及将定义应用于相应元素所需的计算能力定义公共类选择器中的属性，然后定义每个元素或每个选择器各自的属性：

<强> CSS 

/* applied to all elements with class list */
.list {
    float: right;
    position: relative;
    width: 120px;
    height: 80px;
    text-align: center;
    line-height: 55px;
    margin-top: -16px;
    transition: all 0.4s ease-in-out;
}

/* applied to element with ID list3 when it is under mouse */
#list3:hover {
    background-color: rgb(151, 190, 215);
}

当然，如果您需要不同的行为，您还可以为.list:hover定义一个公共（基于类选择器）属性集，并使用ID选择器覆盖它。

答案 3 :(得分：0)

根据效率关注id是有效的但是，我建议使用class申请css。您可以根据颜色添加另一个类。当您想要应用特定颜色时，请在HTMl元素中添加该类。

.list{
	float:right;
	position:relative;
	width: 120px;
	height: 80px;
	text-align: center;
	line-height: 55px;
	margin-top: -16px;
	transition: all 0.4s ease-in-out;
}

.list h3{
	font-family: 'Raleway', sans-serif;
	color:rgb(51, 51, 51);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
	z-index: 4;
	height: 80px;
}


.color4:hover{
	font-family: 'Raleway', sans-serif;
	float:right;
	position: relative;
	width: 120px;
	height: 80px;
	text-align: center;
	background-color: rgb(151, 215, 196);
	transition: all 0.4s ease-in-out;
	line-height: 55px;
	margin-top: -16px;
}

.color3:hover{
	font-family: 'Raleway', sans-serif;
	float:right;
	position: relative;
	width: 120px;
	height: 80px;
	text-align: center;
	background-color: rgb(215, 194, 151);
	transition: all 0.4s ease-in-out;
	line-height: 55px;
	margin-top: -16px;
}

.color2:hover{
	font-family: 'Raleway', sans-serif;
	float:right;
	position: relative;
	width: 120px;
	height: 80px;
	text-align: center;
	background-color: rgb(189, 215, 151);
	transition: all 0.4s ease-in-out;
	line-height: 55px;
	margin-top: -16px;
}

.color1:hover{
	font-family: 'Raleway', sans-serif;
	float:right;
	position: relative;
	width: 120px;
	height: 80px;
	text-align: center;
	background-color: rgb(151, 190, 215);
	transition: all 0.4s ease-in-out;
	line-height: 55px;
	margin-top: -16px;
}
<ul>
				<li class="list color1" id="menu_list">
					<a href="#content1" class="smoothScroll">
						<h3>contact</h3>
					</a>	
				</li>
				<li class="list color2" id="menu_list">
					<a href="#content2" class="smoothScroll">
						<h3>events</h3>
					</a>	
				</li>
				<li class="list color3" id="menu_list">
					<a href="#content3" class="smoothScroll">
						<h3>band</h3>
					</a>
				<li class="list color4" id="menu_list">
					<a href="#main" class="smoothScroll">
						<h3>home</h3>
					</a>	
				</li>
			</ul>

答案 4 :(得分：0)

虽然，你正在尝试一些好的工作，但是当你为所有列表项添加了类时，不需要为不同的id一次又一次地重写整个代码。您必须遵循“ DRY ”主体，即 不要重复 。请遵循以下CSS代码：

.list{font-family: 'Raleway', sans-serif;
 float:right;
 position: relative;
 width: 120px;
 height: 80px;
 text-align: center;
 background-color: rgb(189, 215, 151);
 transition: all 0.4s ease-in-out;
 line-height: 55px;
 margin-top: -16px;
}
#list1:hover{background:red;}
#list2:hover{background:orange;}
#list3:hover{backgorund:green;}
#list4:hover{background:pink;}
相关问题
最新问题