这是我的网站:http://daplonline.in/index9.php
我想在CSS链接中添加不同的颜色
IIT-JEE(Adv) - 2014,JEE MAIN - 2014,AIPMT / Guj-CET - 2014,GSEB - 2014,CBSE - 2014
HTML代码在这里
<nav>
<a class="pink" href="#">IIT-JEE(Adv) - 2014</a>
<a href="#">JEE MAIN - 2014</a>
<a href="#">AIPMT/Guj-CET - 2014</a>
<a href="#">GSEB - 2014</a>
<a href="#">CBSE - 2014</a>
</nav>
CSS代码
.mi-slider nav {
position: relative;
top: 330px;
max-width: 1200px;
margin: 0 auto;
left: 30px
}
.no-js nav {
display: none;
}
.mi-slider nav a {
display: inline-block;
text-transform: uppercase;
letter-spacing: 5px;
padding: 40px 0px 10px 34px;
position: relative;
color: #888;
outline: none;
-webkit-transition: color 0.2s linear;
transition: color 0.2s linear;
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 4px 8px 6px 8px;
text-decoration: none;
}
.mi-slider nav a:hover,
.mi-slider nav a.mi-selected {
color: #000;
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 4px 8px 6px 8px;
text-decoration: none;
}
.mi-slider nav a.mi-selected:after,
.mi-slider nav a.mi-selected:before {
content: '';
position: absolute;
top: -5px;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.mi-slider nav a.mi-selected:after {
border-color: transparent;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
.mi-slider nav a.mi-selected:before {
border-color: transparent;
border-width: 27px;
left: 50%;
margin-left: -27px;
}
.mi-slider ul.li a pink
{
background:#FF3366;
}
我添加了一个班级.pink
,但它不起作用。我想5色链接。
答案 0 :(得分:2)
首先按照这样的方式制作它
<nav>
<ul>
<li class="pink"> <a href="#">IIT-JEE(Adv) - 2014</a></li>
<li class="red"> <a href="#">JEE MAIN - 2014</a></li>
<li class="yellow"> <a href="#">AIPMT/Guj-CET - 2014</a></li>
<li class="gray"> <a href="#">GSEB - 2014</a></li>
<li class="blue"> <a href="#">CBSE - 2014</a></li>
</ul>
</nav>
这是css代码
.mi-slider nav {
position: relative;
top: 330px;
max-width: 1200px;
margin: 0 auto;
left: 30px
}
.no-js nav {
display: none;
}
.mi-slider nav ul li {
display: inline-block;
text-transform: uppercase;
letter-spacing: 5px;
padding: 40px 0px 10px 34px;
position: relative;
color: #888;
outline: none;
-webkit-transition: color 0.2s linear;
transition: color 0.2s linear;
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 4px 8px 6px 8px;
text-decoration: none;
}
.mi-slider nav ul li.pink {
background:#FF00FF;
}
.mi-slider nav ul li.red {
background::#FF0000;
}
.mi-slider nav ul li a{
display: inline-block;
text-transform: uppercase;
text-decoration: none;}
.mi-slider nav ul li:hover,
.mi-slider nav a.mi-selected {
color: #000;
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 4px 8px 6px 8px;
text-decoration: none;
}
.mi-slider nav a.mi-selected:after,
.mi-slider nav a.mi-selected:before {
content: '';
position: absolute;
top: -5px;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.mi-slider nav a.mi-selected:after {
border-color: transparent;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
.mi-slider nav a.mi-selected:before {
border-color: transparent;
border-width: 27px;
left: 50%;
margin-left: -27px;
}
.mi-slider ul.li a pink
{
background:#FF3366;
}
答案 1 :(得分:1)
如果您想为链接指定不同的颜色,请尝试此操作
<强> HTML 强>
<a class="pink" href="#">IIT-JEE(Adv) - 2014</a>
<a class="yellow" href="#">JEE MAIN - 2014</a>
<a class="green" href="#">AIPMT/Guj-CET - 2014</a>
<a class="red" href="#">GSEB - 2014</a>
<a class="blue" href="#">CBSE - 2014</a>
<强> CSS 强>
.pink{ background: pink;}
.yellow{ background: yellow;}
.green{ background: green;}
.red{ background: red;}
.blue{ background: orange;}
如果你想为你的所有链接提供相同的颜色,请给他们一个像这样的公共类
<强> HTML 强>
<a class="CommonColor" href="#">IIT-JEE(Adv) - 2014</a>
<a class="CommonColor" href="#">JEE MAIN - 2014</a>
<a class="CommonColor" href="#">AIPMT/Guj-CET - 2014</a>
<a class="CommonColor" href="#">GSEB - 2014</a>
<a class="CommonColor" href="#">CBSE - 2014</a>
<强> CSS 强>
.CommonColor{ background: grey;}
小提琴: fiddle
答案 2 :(得分:0)
好好看看你展示的css和html。您添加的css类可能存在一些问题。
你有
.mi-slider ul.li a pink
{
background:#FF3366;
}
但链接在导航栏下,没有李。
<a class="pink" href="#">IIT-JEE(Adv) - 2014</a>
有问题。
进行这些更改
<nav>
<li><a class="pink" href="#">IIT-JEE(Adv) - 2014</a></li>
<li><a class="red" href="#">AIPMT - 2014</a></li>
<li><a class="green" href="#">xyz - 2014</a></li>
</nav>
并像这样添加css
nav li a.pink{ background: pink;};
nav li a.pink:hover{//hover styling}
nav li a.red{ background: red;};
nav li a.green{ background: green;};