为什么我不能在标记标签上使用nth-child？
[英]Why can't I use nth-child on mark tags?
问题描述
Nothing in my code overwrites this selector, so I'm confused as to why it's not working. 
我的代码中没有任何内容会覆盖此选择器，因此我对为什么它不起作用感到困惑。 I've googled about it and asked a few friends and they don't know. 我在Google上搜索了一下，并问了几个朋友，他们不知道。 I checked the server wasn't just taking a while to update the page by updating text and it seems fine. 我检查服务器是否不花时间通过更新文本来更新页面，看起来还不错。
CSS 的CSS
mark {
color: #CCC;
background: #333;
padding: 5px;
margin: 5px;
}
mark:nth-child(even) {
background: #000;
}
HTML 的HTML
<p><mark>warri0r</mark>Yes</p>
<p><mark>j3w1sh</mark>No</p>
<p><mark>MrGuy</mark>I don't know</p>
<p><mark>explode_</mark>Maybe...</p>
<p><mark>USAUSAUSA</mark>Why not?</p>
<p><mark>Samuel01</mark>Absolutely</p>
3 个解决方案
解决方案1
3 已采纳 2015-07-05 16:58:09
mark:nth-child(even) doesn't work because it is an only child of <p> . mark:nth-child(even)不起作用，因为它是<p>的唯一子级。
Rewrite your CSS: 重写您的CSS：
p:nth-child(even) mark {
background: #000;
}
(select <mark> of even <p> ) （选择<mark> <p> <mark> <p> ）
解决方案2
1 2015-07-05 16:56:21
Because :nth-child looks for the parent element to find the child. 因为:nth-child寻找父元素来寻找孩子。
To easily understand it: 要轻松理解它：
Wrap your code inside a div. 将您的代码包装在div中。 Access the even paragraph using nth-child(2n) which is even children of the parent div mark . 使用nth-child(2n)访问偶数段落， nth-child(2n)是父div mark偶数子代。
You need not have parent div mask for your case because <body> is the parent. 您的案例不需要父div mask ，因为<body>是父。 Just for explanation purpose I have added the class mask 出于解释目的，我添加了类mask
mark { color: #CCC; background: #333; padding: 5px; margin: 5px; } .mark p:nth-child(even) mark { background: #000; }
<div class="mark"> <p> <mark>warri0r</mark>Yes</p> <p> <mark>j3w1sh</mark>No</p> <p> <mark>MrGuy</mark>I don't know</p> <p> <mark>explode_</mark>Maybe...</p> <p> <mark>USAUSAUSA</mark>Why not?</p> <p> <mark>Samuel01</mark>Absolutely</p> </div>
解决方案3
0 2015-07-05 16:56:59
Because nth-child use in a element like this: 因为nth-child在这样的元素中使用：
mark {
color: #CCC;
background: #333;
padding: 5px;
margin: 5px;
}
mark:nth-child(even) {
background: #000;
}
<p>
<mark>warri0r</mark><span>Yes</span> <br>
<mark>j3w1sh</mark><span<No</span> <br>
<mark>MrGuy</mark><span>I don't know</span>
</p>
Now p element has 3 child in yourself. 现在， p元素自己有3个孩子。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.