Question

我正在尝试将其中一个li元素更改为红色，将另一个li元素更改为具有下划线翻转效果的不同颜色，另一个li元素以标准颜色进行超链接但具有不具有下划线的翻转效果改变颜色。

任何想法我做错了什么？感谢帮助。

ul.standard-list{
	padding:0px 0 50px 00000;
	margin:0;
	text-align:left;
	color:#333;
	font-weight:100;
	font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
	font-size:20px;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	line-height:28px;
}
ul.standard-list a:link{
	color:#008CBA;
	text-decoration:none;
}
ul.standard-list a:visited{
	color:#008CBA;
	text-decoration:none;
}
ul.standard-list a:hover{
	color:#008CBA;
	text-decoration:underline;
}
ul.standard-list li{
	list-style-type: none;
	line-height:28px;
}
ul.standard-list li:before{
    /* Unicode bullet symbol */
    content: '\2022';
    /* Bullet color */
    color: #008CBA;
    padding-right: 10px;
}
.standard-list.no-list-decoration{
	color:red;
}
.standard-list.link-2 a:hover{
	text-decoration:underline;
}

<ul class="standard-list">
          <li><a href="http://google.co.uk">linked, underlined in different colour with underline rollover effect</a></li>
          <li class="no-list-decoration">red</li>
          <li class="link-2"><a href="http://google.co.uk">linked, underlined rollover effect but same colour as normal list style</a></li>
          <li>four</li>
          <li>five</li>
    </ul>

Answer 1

你的css中缺少空间：

.standard-list.no-list-decoration{

更改为

.standard-list .no-list-decoration{

或

ul.standard-list .no-list-decoration{

和

一样

.standard-list.link-2 a:hover{

更改为

.standard-list .link-2 a:hover{

Answer 2

定义不同的类以获得不同li标签的不同滚动效果行为，以不同颜色加下划线并带有下划线翻转效果（。link-1）＆amp; 带下划线的翻转效果，但颜色与普通列表样式相同（。link-2）并分别设计风格

ul.standard-list .link-1 a:hover{
    color:red;
    text-decoration:underline;
}
.standard-list .link-2 a:hover{
    text-decoration:underline;
}

ul.standard-list{
	padding:0px 0 50px 00000;
	margin:0;
	text-align:left;
	color:#333;
	font-weight:100;
	font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
	font-size:20px;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	line-height:28px;
}


ul.standard-list a:link{
	color:#008CBA;
	text-decoration:none;
}
ul.standard-list a:visited{
	color:#008CBA;
	text-decoration:none;
}
ul.standard-list .link-1 a:hover{
	color:red;
	text-decoration:underline;
}
ul.standard-list li{
	list-style-type: none;
	line-height:28px;
}
ul.standard-list li:before{
    /* Unicode bullet symbol */
    content: '\2022';
    /* Bullet color */
    color: #008CBA;
    padding-right: 10px;
}
.standard-list .no-list-decoration{
	color:red;
}
.standard-list .link-2 a:hover{
	text-decoration:underline;
}

<ul class="standard-list">
          <li class="link-1"><a href="http://google.co.uk">linked, underlined in different colour with underline rollover effect</a></li>
          <li class="no-list-decoration">red</li>
          <li class="link-2"><a href="http://google.co.uk">linked, underlined rollover effect but same colour as normal list style</a></li>
          <li>four</li>
          <li>five</li>
    </ul>

Answer 3

红色没有显示，因为两个类之间没有空格

ul.standard-list{
	padding:0px 0 50px 00000;
	margin:0;
	text-align:left;
	color:#333;
	font-weight:100;
	font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
	font-size:20px;
	-webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
	line-height:28px;
}
ul.standard-list a:link{
	color:#008CBA;
	text-decoration:none;
}
ul.standard-list a:visited{
	color:#008CBA;
	text-decoration:none;
}
ul.standard-list a:hover{
	color:#008CBA;
	text-decoration:underline;
}
ul.standard-list li{
	list-style-type: none;
	line-height:28px;
}
ul.standard-list li:before{
    /* Unicode bullet symbol */
    content: '\2022';
    /* Bullet color */
    color: #008CBA;
    padding-right: 10px;
}
.standard-list .no-list-decoration{
	color:red;
}
.standard-list .link-2 a:hover{
	text-decoration:underline;
}

<ul class="standard-list">
          <li><a href="http://google.co.uk">linked, underlined in different colour with underline rollover effect</a></li>
          <li class="no-list-decoration">red</li>
          <li class="link-2"><a href="http://google.co.uk">linked, underlined rollover effect but same colour as normal list style</a></li>
          <li>four</li>
          <li>five</li>
    </ul>

列表中的可自定义<li>无法正常工作

3 个答案: