blocks|key|5445192|text|您的css中有一个类型，但我不确定这是否是问题所在。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5445193|specialTable+tr:nth-child(even)+{
++++background-color:+white;
}|code-block|syntax|javascript|5445194|应该是|5445195|.specialTable+tr:nth-child(even)+{
++++background-color:+white;
}|5445196|aslso背景颜色:无不是有效的css，maybee背景颜色:透明|5445197|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

you have a type in your css, but im not sure if that is the problem

<pre><code>specialTable tr:nth-child(even) {
 background-color: white;
}
</code></pre>

should be

<pre><code>.specialTable tr:nth-child(even) {
 background-color: white;
}
</code></pre>

aslso background-color:none is not valid css , maybee background-color:transparent

blocks|key|5927486|text|您可以根据background:none;使用background-color:transparent;或|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5927487|.specialTable+td+{
++background-color:transparent;
}|code-block|syntax|javascript|5927488|entityMap^0|5|G|N|T|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

You can use <code>background-color:transparent;</code> or depending on <code>background:none;</code>:

<pre><code>.specialTable td {
 background-color:transparent;
}
</code></pre>

blocks|key|5445269|text|none不是背景色的有效属性。试试这个：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5445270|.specialTable+tr+{
++++background-color:+black;
}

.specialTable+tr:nth-child(even)+{
++++background-color:+white;
}|code-block|syntax|javascript|5445271|或者您可以在示例中仅使用|5445272|.specialTable+td
{
++++background-color:+transparent;
}|5445273|这应该会让白色光芒穿透。|5445274|entityMap^0|0|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<code>none</code> is not a valid property for the background color. Try this:

<pre><code>.specialTable tr {
 background-color: black;
}

.specialTable tr:nth-child(even) {
 background-color: white;
}
</code></pre>

Or you might use in your example just 

<pre><code>.specialTable td
{
 background-color: transparent;
}
</code></pre>

This should let the white shine through.

blocks|key|5445327|text|你可以通过使用基本的CSS覆盖来简化事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5445328|假设你有这个：|5445329|<table+class="specialTable">
++++<tr>
++++++++<td>This+is+an+odd+row</td>
++++</tr>
++++<tr>
++++++++<td>This+is+an+even+row</td>
++++</tr>
++++<tr>
++++++++<td>This+is+an+odd+row</td>
++++</tr>
++++<tr>
++++++++<td>This+is+an+even+row</td>
++++</tr>
</table>|code-block|syntax|javascript|5445330|默认的<td>样式是这样的：|offset|length|style|CODE|5445331|td+{+
++++background-color:black;
++++color:+#FFF;
}|5445332|要对.specialTable设置交替(斑纹)样式，只需执行以下操作：|5445333|.specialTable+tr:nth-child(even)+td+{
++++background-color:+blue;
}|5445334|这将覆盖even+<tr>标签中所有<td>标签的<td>的原始CSS定义。|5445335|在这里查看一个可用的示例：http://jsfiddle.net/rh5vV/|5445336|需要注意的是，nth-child+sudo选择器在IE8及更低版本中不起作用，因此您可能希望将一个.even类应用于您的even+<tr>标记。|5445337|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rh5vV/^0|0|0|0|3|4|0|0|2|D|0|0|9|4|I|4|P|4|0|D|Q|0|0|7|9|1D|5|1T|4|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1B|8|@$K|1C|L|1D|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1F|8|@$K|1G|L|1H|M|N]]|9|@]|A|$]]|$1|S|3|T|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1J|8|@$K|1K|L|1L|M|N]|$K|1M|L|1N|M|N]|$K|1O|L|1P|M|N]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1Q|8|@]|9|@$K|1R|L|1S|1|1T]]|A|$]]|$1|Y|3|Z|5|6|7|1U|8|@$K|1V|L|1W|M|N]|$K|1X|L|1Y|M|N]|$K|1Z|L|20|M|N]]|9|@]|A|$]]|$1|10|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

You could simplify things, by using basic CSS overriding.

Let's say you have this:

<pre><code>&lt;table class="specialTable"&gt;
 &lt;tr&gt;
 &lt;td&gt;This is an odd row&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;This is an even row&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;This is an odd row&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;This is an even row&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

And your default <code>&lt;td&gt;</code> style is this:

<pre><code>td { 
 background-color:black;
 color: #FFF;
}
</code></pre>

To make alternating (zebra) styling to <code>.specialTable</code>, you can simply do this:

<pre><code>.specialTable tr:nth-child(even) td {
 background-color: blue;
}
</code></pre>

This will override the original CSS defintion for <code>&lt;td&gt;</code> for all <code>&lt;td&gt;</code> tags within an even <code>&lt;tr&gt;</code> tag.

Check out a working example here: <a href="http://jsfiddle.net/rh5vV/" rel="nofollow">http://jsfiddle.net/rh5vV/</a>

It's important to note that the <code>nth-child</code> sudo selector does not work in versions of IE8 and lower, so you may want to apply a class of <code>.even</code> to your even <code>&lt;tr&gt;</code> tags.

blocks|key|5927549|text|试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5927550|+.specialTable+tr+td+{
+++++++++background-color:transparent;
++++}|code-block|syntax|javascript|5927551|使用背景无是不正确的，请改用透明|5927552|http://jsfiddle.net/RBY2v/1/|offset|length|5927553|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

Try this out

<pre><code> .specialTable tr td {
 background-color:transparent;
 }
</code></pre>

using background none is incorrect, use transparent instead

<a href="http://jsfiddle.net/RBY2v/1/" rel="nofollow">http://jsfiddle.net/RBY2v/1/</a>

I have two styles, one which is at element level 'td' and another which is at class level '.specialTable td'. And I've run into some problems as the class level style is inheriting all the 'td' style properties if I have not specified them again.

I have a CSS style

<pre><code>td
{
 background-color:black;
}
</code></pre>

and then I have 

<pre><code>.specialTable tr:nth-child(even) {
 background-color: white;
}
</code></pre>

and

<pre><code>.specialTable td
{
 background-color:none;
}
</code></pre>

What happens here is that even though I've asked.specialTable td to have no background, it inherits the black background from element style 'td' and this causes my element style 'tr' to be blocked out, because cells are on top of rows.

I am trying to set alternating row style to my table. Please help me with how I can stop the original 'td' element style from getting in the way.

Here is the fiddle:
<a href="http://jsfiddle.net/PIyer/phADs/1/" rel="nofollow noreferrer">http://jsfiddle.net/PIyer/phADs/1/</a>

How to stop CSS element style from getting into my class style?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有两种风格，一种是元素级别的'td‘，另一种是类级别的'.specialTable td’。我遇到了一些问题，因为如果我没有再次指定'td‘样式属性，类级样式将继承所有的’td‘样式属性。我有一个CSS样式td{  background-color:black;}然后我就有了.specialTable tr:nth-...

问如何阻止CSS元素样式进入我的类样式？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何阻止CSS元素样式进入我的类样式？EN