在设计一个页面的HTML和CSS，我应该使用
img.className
与
.className
与
#idName
或者一些其他的变种？
是否有指引或建议？
从答案汇总
谢谢所有回答者 - 这里存在一些优秀的东西！
使CSS尽可能具体
使用面向对象方法
顺序：#ID，标签，tag.className，.className
当使用每个选择器 ，也类/ ID比较
给选择基于用途的名称，而不是他们的样子
采用先进的选择较小的代码，CSS留类例外/只覆盖
管理ASP.NET改写(munging)ID
Answer 1:
一般来说，你应该尽可能具体的项目需求 。
没有一般规则，它取决于问题的风格。
很多人会建议你保持与理论的特异性最低，这使得最大级联重用，但是这是在你有多个开发商所有的工作稍有不同版本的什么是真正的世界的情况绝对有毒.foo可能看起来像。 从继承污染你不想在试图本地或时间损失撤销，在重构导致大规模的膨胀。
最好的指导原则，我总是提供的是尝试和思考CSS的OO术语：类选择映射到接口的更多或更少，标签映射到类和ID选择映射到实例。 因此决定是否要应用的样式确实适用于那个东西，喜欢它所有的东西，或任何其想要它。
我也强烈建议您做出包装元素使用高级别ID，这样就可以以类似的方式命名空间写选择(即#foo .bar ， #foo .baz其中#foo是唯一的一个页面或设置页面设计的)它允许你既特异性的水平，这降低了交叉污染的设计和通用的水平，它可以让您充分利用CSS层叠重用。
两全其美。
Answer 2:
这取决于预期的语义，正如有人说，要尽可能具体。
#idName网页上的独特元素。 最好的例子就是#header和#footer
TAGNAME通用页面样式。
TAG.classname和.classname例外情况/覆盖上述规则。
而且不要忘了利用先进的选择。 一个坏榜样：
H1{ font-size: 200%; color: #008; }
#mainMenu { color: #800; }
.in_the_menu { color: #800; font-size: 150%; }
Hello World!
My Menu
同样可能已经获得了：
H1{ font-size: 200%; color: #008; }
#mainMenu { color: #800; }
#mainMenu H1 { color: #800; font-size: 150%; }
Hello World!
My Menu
第二个例子被在“MAINMENU” DIV摆脱H1元素的superflous“类”属性。 这有两个重要的好处：
HTML代码是更小的，更清洁
你是不太可能忘记添加类属性
如果你照顾好你的CSS，并使用正确的先进的选择，你可以几乎完全离开了CSS类。 并让他们只对例外情况/覆盖。
拿这个例子得出箱页眉：
#content H2{
border: 1px solid #008789;
padding: 0em 1em;
margin: 0.2em 0em;
margin-bottom: 1em;
font-size: 100%;
background: #cccb79
}
#content H2 + DIV{
margin-top: -1em;
border-left: 1px solid #008789;
border-right: 1px solid #008789;
border-bottom: 1px solid #008789;
margin-bottom: 1em;
}
现在，只要你遵循H2用DIV在#content元素，你有一个漂亮的盒子。 其他DIVs和H2 s的单独留在家中：
Hello Box!
And another title
如果你得到这些规则的权利，你几乎不需要类，可以单独标识和标签名称的工作。 而作为额外的奖励，你的HTML将是一个要好很多，阅读和维护。
Answer 3:
最好的描述你的规则，你应该使用选择
ID：当你要选择一个单一的元素
.classname：当你想要的风格元素，无论他们的标签
tag.classname：当你想样式仅与给定的类标签
标签标签标签：当你想要的风格标签的所有子元素
Answer 4:
您应优先，以便从最高到最低：
ID
标签
tag.className
。班级名称
ID选择快。 标签选择器是相当快的。 纯类选择是缓慢的，因为浏览器基本上是有来询问每一个元素，看看每个人都有这个类。 通过ID或标签名称获取元素是从浏览器的上下文中，“原生”的操作。
另外，我觉得是个好习惯让你的CSS选择器尽可能严格，否则它只是变成一个烂摊子，你最终得到各种意想不到的后果，其中CSS规则，你没想到，否则，这往往迫使你创建一个类似但不同的选择只是让没有任何关于第一不适用(转换成更多的混乱)的规则。
基本上，如果你知道，如果你只使用在div元素类，然后做到这一点
div.className
不
.className
如果你申请一个类来几个元素只列出它们：
h1.selected, h2.selected, h3.selected
代替
.selected
在实践中我发现，你需要使用“裸”类选择或者最好是这样做的情形是很少见。
Answer 5:
类选择
.className
这是用来当你有，你想在同一样式应用到页面上的多个元素。 它可以是任何标记元素。 因此，在下面都将使用相同的样式载列由.className 。
但你也可以限制它像这样：
img.className
通过将标签的风格定义一起，你说，这种风格只用于当它是由特定的标签使用的类，在这种情况下，图像。
HTML代码如下所示：
如果您在使用同一类风格的页面上的其他元素，但均是相同标签的没有，再列在这个样式不会被应用，如在第一个例子中提到他们将采取在更宽泛的版本。
所以重复上面的例子：
只有图像将在风格设定了由img.className而所有其余的将在设定的样式规则.className 。
ID选择
#idName
这是当只有一个你希望的样式应用到特定元素的情况下使用。
您还可以强制它，你用前面的类定义必须在一定的条件下标签只适用。
p#idName
这个例子将只适用于标有编号的段落块：
如果你把那个id另一元件上，如下所示：
然后，它不会采取设定出来，被忽略的风格。
Answer 6:
关于你提到的两个第一选择，第一两者将覆盖第二，因为它是更具体。 你可以计算选择的特异性 。
Answer 7:
有一点值得注意的是，一些服务器端脚本技术(主要是ASP.NET)不使用标识为您的造型打好。 如果你的设计将这样的技术中使用的机会，我建议忘记了#id选择和使用tag.className代替。
其原因在于，ASP.NET实际上改变，基于许多标准的HTML结束的ID，如果标签是输出由服务器侧控制。
Answer 8:
我知道这是一个很老的问题，但所有这些谁刚才正在读这篇文章...有4个类别的规则一般：ID规则，班规，标签规则，通用规则。 它一提的是类选择比 标签选择快是很重要的。 所以，你总是应该按以下顺序使用它们
1. ID选择
2.类选择
3.标记选择
4.通用选择器
在你的情况，你不应该的类名前使用标签名。
你可以在这里找到更多的信息： 编写高效的CSS
Answer 9:
这真的要看具体情况：
.error{
color:red;
}
p.error{
background-color:yellow;
}
div.error{
background-color:grey;
}
始终用C SS的层叠效果，你的优势。
Answer 10:
它的使用可以最少的具体规则为每个规则很好的做法。
如何构造的CSS将取决于设计的特定需求。
Answer 11:
是。 您可能需要使用相同的类名在未来的两个元素。 要明确和清晰。 这也将防止重叠到非预期的元件类的规则。
h1.title { font-size:18px; } /* My h1's are big */
p.title { font-size:16px; } /* My p's are smaller */
.title { color:#336699; } /* All titles are blue */
使用的ID只在必要时，且每页只有一次。
Answer 12:
什么时候使用什么取决于你要选择如何。 img.className ( 类型选择 + 类选择 ) 仅选择IMG元素是在类“的className”，而.className (只是类选择器)，选择这在该类和任何元件#idName ( id选择 )与ID“idName 任何元件”。
但除此之外，选择都有differente 特异性影响在其中的属性规则改写别人的一个顺序。
所以，如果你有ID为“idName”这是在类“的className” IMG元素：
规则的属性将在下面的顺序进行施加(特异性从最高到最低)：
#idName
img.className
.className
但是，当你使用特定的类只针对一种特定类型的元素(如“类名”只为IMG元素)，你可以只去.className 。
文章来源: Use HTML tag names, classes or IDs in CSS?
扫一扫
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
