CSS 你如何在css中选择一个单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1002579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you select a radio button in css?
提问by Brettski
How do you select a radio button in CSS? The HTML I am working with is generated so I cannot add class or other attributes to it.
你如何在 CSS 中选择一个单选按钮？我正在使用的 HTML 已生成，因此我无法向其中添加类或其他属性。
I found input[type="radio"] on the internet, but I don't know if this is regular CSS and supported by most browsers.
我在互联网上找到 input[type="radio"] ，但我不知道这是不是大多数浏览器支持的常规 CSS。
Is there any other ways to select a radio button?
还有其他方法可以选择单选按钮吗？
Thank you,
谢谢，
Brett
布雷特
回答by Evan Meagher
input[type="radio"]is an example of an attribute selector. It's part of the CSS3 spec and is perfectly legal. The only browser that doesn't support them is IE6. If supporting IE6 is important to the project, then you should look into adding classes to the radio buttons in question.
input[type="radio"]是一个属性选择器的例子。它是 CSS3 规范的一部分，完全合法。唯一不支持它们的浏览器是 IE6。如果支持 IE6 对项目很重要，那么您应该考虑向有问题的单选按钮添加类。
Here's an articlewith an example of how to effectively use attribute selectors. Check out this articlefor more info on CSS3 goodies.
回答by annakata
The attribute selector (input[type="radio"]) is the correct solution, widely supported by everything but IE6 :)
属性选择器 (input[type="radio"]) 是正确的解决方案，除 IE6 之外的所有东西都广泛支持:)
If you have no ability to modify the HTML to inject classname support (or access to javascript to accomplish this) then your options are:
如果您无法修改 HTML 以注入类名支持（或访问 javascript 来完成此操作），那么您的选择是：
A). to make sure your site doesn't depend on this, and allow IE6 to degrade gracefully.
一种）。确保您的站点不依赖于此，并允许 IE6 优雅地降级。
B). live without it
B)。没有它就活
回答by Josh
you could use jQueryto select the input and add a class dynamically.
您可以使用jQuery来选择输入并动态添加一个类。
Example (source: http://docs.jquery.com/Attributes/addClass#class):
示例（来源：http: //docs.jquery.com/Attributes/addClass#class）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p:last").addClass("selected highlight");
});
</script>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
</body>
</html>
[Edit]
[编辑]
an alternative to jQuery is to use http://code.google.com/p/ie7-js/
jQuery 的替代方法是使用 http://code.google.com/p/ie7-js/
it fixes loads of issues with ie versions lower than 7 the fix that will interest you most is illustrated here:
它修复了 ie 版本低于 7 的大量问题，您最感兴趣的修复如下所示：
回答by PatrikAkerstrand
The one you mention above is the correct way to target it by CSS. It's called an attribute selector. It is not supported by IE6 and below however. They can be simulated by adding a conditional behaviour script for IE6. (Just search on google, the file ending is usually .htc).
您上面提到的是通过 CSS 定位它的正确方法。它被称为属性选择器。但是 IE6 及以下不支持它。可以通过为 IE6 添加条件行为脚本来模拟它们。（只需在 google 上搜索，文件结尾通常是 .htc）。
It should probably be noted that .htc-files usually result in horrendous performance and should only be used sparingly and be thoroughly tested to ensure that the performance hit is acceptable.
可能应该注意的是，.htc 文件通常会导致糟糕的性能，只能谨慎使用并进行彻底测试以确保性能下降是可以接受的。
回答by edeverett
Your solution is the correct one and will work in all modern browsers apart from IE6. For IE6 you'll have to either find way of selecting them, modify the HTML or use Javascript.
您的解决方案是正确的，并且适用于除 IE6 之外的所有现代浏览器。对于 IE6，您必须找到选择它们的方法、修改 HTML 或使用 Javascript。
回答by Tom
You could use jQuery to find all the radio buttons on the page, then add some CSS classes to it.
您可以使用 jQuery 查找页面上的所有单选按钮，然后向其中添加一些 CSS 类。
