CSS：为 div 中的输入元素定义样式答案

【问题标题】：CSS:Defining Styles for input elements inside a divCSS：为 div 中的输入元素定义样式
【发布时间】：2021-08-29 21:27:52
【问题描述】：

我有一个名为“divContainer”的 div，里面有几个输入元素，如文本框、单选按钮等。如何在 CSS 中定义 then 的样式？我想提一下这个特殊 div 中元素的样式，而不是整个表单。

例如：对于文本框，我需要宽度为 150 像素；对于单选按钮，我需要 20px 的宽度；

【问题讨论】：

标签： css

【解决方案1】：

您可以定义样式规则，这些规则仅适用于您的 div 中的特定元素，id 为 divContainer，如下所示：

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

【讨论】：

好点迈克；我已经修改了代码示例以使用 CSS3 选择器。谢谢。
如果您不使用 CSS3，您应该在此处包含 javascript 以使其正常工作：dustindiaz.com/input-element-css-woes-are-over

【解决方案2】：

CSS 3

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

CSS2 将一个类“文本”添加到文本输入中，然后在你的 CSS 中

.divContainer.text{
    width:150px;
}

【讨论】：

您可以使用上面链接的javascript来消除添加类。
true，但是在评估 javascript 并对 css 进行更改时，您可能会收到“屏幕弹出”。对于涉及尺寸的样式更改，我个人喜欢尽可能避免在它们上使用 js。但那是我:)
.divContainer.text 应该是.divContainer input.text

【解决方案3】：

像这样。

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

【讨论】：

【解决方案4】：

当你说“被调用”时，我会假设你的意思是一个 ID 标签。

为了使其跨浏览器，我不建议使用 CSS3 []，尽管它是一个选项。话虽这么说，给每个文本框一个类，如“tb”和单选按钮“rb”。

然后：

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

这假设您在其他地方使用相同的类，如果没有，这就足够了：

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

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

#divContainer [element] { ... }

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

【讨论】：