[英]Selecting individual nav elements in CSS/CSS3
How do i go about selecting nav elements in CSS3? 如何在CSS3中选择导航元素?
I want to be able to make a nav element - when hovered - change to a color i want. 我希望能够将导航元素-悬停时-更改为我想要的颜色。
Such as 如
<nav>
<a href="#mainpage">first</a> // i want to make this word, when hovered, into #555
<a href="#secondpage">second</a> // i want to make this word, when hovered, into #444
<a href="#thirdpage">third</a> //i want to make this word, when hovered, into #643312
<a href="#fourthpage">fourth</a> //i want to make this word, when hovered, into #444
<a href="#fifthpage">fifth</a> // i want to make this word, when hovered, into #666
</nav>
How do i actually go about doing that? 我实际上该如何去做?
I am reading about the CSS3 selectors but i don't see any solutions (well at least not yet), so i'd thought i'll get a faster answer here on Stack Overflow. 我正在阅读有关CSS3选择器的信息,但我还没有看到任何解决方案(至少现在还没有),所以我想我会在Stack Overflow上得到更快的答案。 I'll continue searching to see if i yield any results.
我将继续搜索以查看是否产生任何结果。
check this one: 检查这一:
do you want this ? 你想要这个吗 ?
nav a:nth-child(2),
nav a:nth-child(4),
nav a:nth-child(6){
....something
}
nav a:nth-child(2)
{
background:#ff0000;
}
Maybe you're looking for when hovered
: (not sure your question isn't very descriptive) when hovered
也许正在寻找:(不确定您的问题不是很描述)
nav a:nth-child(1):hover
{
color: #555
}
nav a:nth-child(2):hover
{
color: #444
}
nav a:nth-child(3):hover
{
color: #643312
}
nav a:nth-child(4):hover
{
color: #444
}
nav a:nth-child(5):hover
{
color: #666
}
JsFiddle.net Example JsFiddle.net示例
UPDATE 更新
If you're wondering how every N works: 如果您想知道每个N的工作方式:
<style>
nav a:nth-child(3n+0):hover {
background-color: #f00;
}
nav a:nth-child(3n+1):hover {
background-color: #0f0;
}
nav a:nth-child(3n+2):hover {
background-color: #0f0;
}
<style>
<nav>
<a href="#mainpage">first</a>
<a href="#secondpage">second</a>
<a href="#thirdpage">third</a>
<a href="#fourthpage">fourth</a>
<a href="#fifthpage">fifth</a>
<a href="#sixthpage">sixth</a>
</nav>
JsFiddle.net Example JsFiddle.net示例
Elements (0, 3, 6, 9 etc) will be Green (#f00). 元素(0、3、6、9等)将为绿色(#f00)。
Elements (1, 4, 7, 10 etc) will be Blue (#0f0). 元素(1、4、7、10等)将为蓝色(#0f0)。
Elements (2, 5, 8, 11 etc) will be Red (#00f). 元素(2、5、8、11等)将为红色(#00f)。
There is a CSS 2.1 solution to this :) 有一个CSS 2.1解决方案:)
If you want to style your first link you may use nav a:first-child
selector, for the second one and on you can use the sibling selectors like so: 如果您想为第一个链接设置样式,则可以使用
nav a:first-child
选择器,对于第二个链接,您可以使用同级选择器,如下所示:
nav a:first-child + a{
color: red; //coloring the second link
}
nav a:first-child + a + a{
color: green; //coloring the third link
}
nav a:first-child + a + a + a{
color: black; //coloring the fourth link
}
nav a:first-child + a + a + a + a{
color: yellow; //coloring the fifth link
}
Such a solution would work from IE7 up. 从IE7起,这样的解决方案将起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.