CSS 的这些语法有何不同？ [关闭]答案

【问题标题】：Differences in these syntaxes for CSS? [closed]CSS 的这些语法有何不同？ [关闭]
【发布时间】：2012-02-28 18:12:21
【问题描述】：

我想知道你们是否可以帮助我了解这些实际语法结构在 CSS 中的作用，因为我真的很难了解它们。

A.所有输入元素的通用样式

#input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

B. ??????

 .input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

C.表格元素中的表单输入

table input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

D. ???

table .input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

E. ??????????

table input[type="text"] 
{
   width:100%;
   border: 1px solid #000;
   font-size: 14px;
   padding: none;
}

关于设置“输入”元素，我认为这些都达到相同的结果是否正确？

每个对应的 html 代码是什么？

"class" 或 "id" 何时适用于这些？

很抱歉，这似乎是一个基本问题，但我正在努力了解 CSS 的最佳实践，当我看到所有这些不同的 CSS 符号时，学习 960 Grid Square 有点困难。

感谢您的宝贵时间！

【问题讨论】：

你需要阅读一些关于 CSS 选择器的教程。
所以不是教程，最好在这里试试：-www.w3schools.com/css/
@Pranav 参考：w3fools.com
网络上有很多关于这方面的信息，自己读一下也不会花很长时间。
我不同意，每个人都说他们的方式是正确的方式。

标签： html css class

【解决方案1】：

# 符号表示它是一个 ID 选择器，因此它仅适用于页面上具有该特定 ID 的单个元素。您对示例 A 不正确 - 这实际上是 ID 为 input 的元素的选择器，而不是所有输入的通用选择器。

. 符号表示它是一个类选择器，因此它将应用于所有具有该类的元素。

[type="text"] 是一个属性选择器，因此它只会选择 type 属性的值等于 text 的输入元素。

【讨论】：

关于“语法”的实际答案，干得好，先生！

【解决方案2】：

一个。带有id="input"的元素

#input

B。带有class="input"的元素

.input

C。表格元素中的表单输入

table input

D。表格中带有class="input" 的元素

table .input

E。表格内具有type="text" 属性的输入元素

table input[type="text"]

所有CSS selectors 都由 w3 解释，或者在tutplus 上更容易阅读。

什么是最好的？

这里没有一般最好的。这取决于你想做什么。如果您有一个包含一些您想要样式的输入的表单，您可以使用#formid input。但是您可能有不同的输入元素，您的默认样式不起作用。 type="radio" 可能需要与 type="text" 不同的样式。

【讨论】：

A 不正确 - 这是 ID 为 input 的元素的 ID 选择器。
选择器和来自 C++ 背景的类有什么区别？
在这里忘记你的 C++。 HTML 中的类是像这样的元素的属性。 CSS 中的选择器描述了哪些元素受您的样式影响。类可帮助您将样式应用于许多元素。例如，您为用户做错事的每个表单元素添加一个错误类。然后你可以使用 CSS 将所有错误字段变为红色。

【解决方案3】：

A => id 为“输入”的元素

b => 具有“输入”类的元素

c => 表格中的输入字段

d => 表中具有“输入”类的元素

e => 表格中的文本字段/s

【讨论】：

【解决方案4】：

这些是 CSS 中的不同选择器

"#input" ---------- 表示您正在选择 id = "input" 的元素

".input" ------------你正在选择 class= "input"

“table input”------表示你选择了table标签中的每个输入标签

等等……

是的，看看一些教程

【讨论】：

【解决方案5】：

它们是 CSS 中的不同选择器。

.表示可以分配给许多元素的类。 # 指的是一个 Id，这意味着为了维护有效的 HTML，它只能用于一个元素。您可以使用 html 标记的 ID 部分访问一组属性。

使用 # 有其局限性，因此没有被广泛使用。

【讨论】：

【解决方案6】：

一个。按 ID 设置元素样式
乙。按类设置元素样式
c。样式化任何嵌套在任何表单元素中的输入元素
d.使用任何表单中的“输入”类为任何元素设置样式
e.在表单中使用“文本”类型为输入设置样式

【讨论】：

【解决方案7】：

#input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

Ans : id=input 的元素

.input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

Ans：class=input 的元素

table input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

Ans：表格元素中的输入元素

table .input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

Ans：具有 class=input 的元素在表格元素中

table input[type="text"] 
{
   width:100%;
   border: 1px solid #000;
   font-size: 14px;
   padding: none;
}

Ans：输入元素在表格元素中的 type=text

【讨论】：

【解决方案8】：

答：您的目标是一个 ID 为“input”的元素，即<input id="input" /> B：和以前一样，现在是一个类，即<input class="input" /> C：表格元素内的表单输入 D：表中具有“输入”类的元素 E：表格内“文本”类型的输入元素，即<input type="text" />（表格内）。

我真的建议您阅读一些有关基本 HTML 和 CSS 的书籍。

【讨论】：

也许我已经这样做了，但是由于许多在线教程相互冲突，很难找出最好的方法。

【解决方案9】：

查看此链接w3schools.com/css/css_id_class.asp 你的css是不正确的情况A：它应该只是输入而不是#input。 # 表示您通过 id 选择。 B 表示您按班级选择

【讨论】：