CSS：定义div内输入元素的样式

Question

我有一个名为 "divContainer" 的 div，其中包含一些输入元素，如文本框、单选按钮等。如何在 CSS 中定义它们的样式？我想要为这个特定的 div 内部的元素指定样式，而不是整个表单。

例如：对于文本框，我需要将宽度设置为 150px；对于单选按钮，我需要将宽度设置为 20px。

- Shyju

Answer 1

你可以这样定义仅适用于你具有id为divContainer的

内特定元素的样式规则：

#divContainer input { ... }
#divContainer input[type="radio"] { ... }
#divContainer input[type="text"] { ... }
/* etc */

- David Underhill

---

很好的建议，Mike；我已经修改了代码示例以使用CSS3选择器。谢谢。 - David Underhill

如果您没有使用CSS3，您应该在此处包含JavaScript以使其正常工作：http://www.dustindiaz.com/input-element-css-woes-are-over/ - Swift

Answer 2

CSS 3

divContainer input[type="text"] {
    width:150px;
}

CSS2 在文本输入框中添加一个类名为“text”的类，然后在你的CSS文件中进行样式设置。

.divContainer.text{
    width:150px;
}

- µBio

---

你可以使用上面链接的 JavaScript 来消除添加类。 - Swift

是的，但是当JavaScript被评估并更改CSS时，您可能会得到“屏幕弹出”。对于涉及尺寸的样式更改，我个人喜欢在可能的情况下避免使用JS。但这只是我的个人偏好 :) - µBio

.divContainer.text 应该改为 .divContainer input.text。 - zvone

Answer 3

像这样。

.divContainer input[type="text"] {
  width:150px;
}
.divContainer input[type="radio"] {
  width:20px;
}

- Dagg Nabbit

---

这并不一定向后兼容不支持CSS3的浏览器。 - Swift

http://www.quirksmode.org/css/contents.html 可以兼容IE 6，对于大多数人来说已经足够好了。 - Austin Fitzpatrick

Answer 4

当你说“called”时，我会假设你指的是ID标记。

为了实现跨浏览器功能，我建议不要使用CSS3的[]，虽然这是一种选择。话虽如此，你可以给每个文本框都添加一个类，比如“tb”，还可以给单选按钮添加一个类，比如“rb”。

然后:

#divContainer .tb { width: 150px }
#divContainer .rb { width: 20px }

假设您已在其他地方使用相同的类，则此代码将适用：

假设您已在其他地方使用相同的类，则此代码将适用：

.tb { width: 150px }
.rb { width: 20px }

如 @David 所提到的，要访问部门内的任何内容：

#divContainer [element] { ... }

其中 [element] 是您需要的任何 HTML 元素。

- Kerry Jones