css 针对大型 HTML 网页中的特定 div 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4924906/
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
css targeting specific div tags in a large HTML web page
提问by kacalapy
In relation to my previous question here. If I am using the below HTML code as part of my web page, where there will likely be many more div tags, how can I target these particular divs in my CSS ? The sample I think works best is [This Answer][2].
关于我之前的问题。如果我使用下面的 HTML 代码作为我的网页的一部分，其中可能会有更多的 div 标签，我如何在我的 CSS 中定位这些特定的 div？我认为效果最好的示例是 [This Answer][2]。
I added Id attributes to make the divs more selectable in a large HTML DOM... I don't know how else to make them more distinguishable. If there is a better method for doing so please let me know. The goal is to apply the CSS design to about 6 div tag elements inside a large share point portal website. If there is a more generic way that would be cool so I can easily add more sections and use this format in the future... I can add a class attribute to each element I want the formatting applied to, but I don't know the syntax.
我添加了 Id 属性以使 div 在大型 HTML DOM 中更具选择性...我不知道还有什么方法可以使它们更易于区分。如果有更好的方法，请告诉我。目标是将 CSS 设计应用于大型共享点门户网站内的大约 6 个 div 标签元素。如果有一种更通用的方式会很酷，这样我就可以轻松添加更多部分并在将来使用这种格式......我可以为我想要应用格式的每个元素添加一个类属性，但我不知道语法。
What's the designer professional web way of getting this done?
完成此任务的设计师专业网络方式是什么？
<div id="projectName">
Realtime Account Activiation
</div>
<div id="divAnnounce">
Announcements
</div>
I have http://jsfiddle.net/eW532/1/
我有 http://jsfiddle.net/eW532/1/
I am using the code below but getting bad results where the entire horizontal length is blue but not the first letter. I'm trying to have an html element use two classes together.
我正在使用下面的代码，但得到了糟糕的结果，其中整个水平长度是蓝色但不是第一个字母。我试图让一个 html 元素一起使用两个类。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.even_spacing { color: purple;
background-color: #d8da3d }
.first_letter { background:blue;
color:white;
padding:4px 0px 4px 5px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="first_letter even_spacing">
Realtime Account Activiation
</div>
<div class="first_letter even_spacing">
Announcements
</div>
</form>
</body>
</html>
回答by Bill
in the HTML file put
<LINK REL=StyleSheet HREF="Path/to/your/stylesheet.css" TYPE="text/css" MEDIA=screen>at the top of the page to reference the new style sheet.
在 HTML 文件中放置
<LINK REL=StyleSheet HREF="Path/to/your/stylesheet.css" TYPE="text/css" MEDIA=screen>在页面顶部以引用新样式表。
in your CSS File put:
在你的 CSS 文件中输入：
#projectName{
style:value;
}
#divAnnounce{
}
The # targets things with ID's if you use a . before it will target the class names,
如果您使用 . 在它以类名为目标之前，
You can also use both if you need to get specific such as
如果您需要获得特定信息，也可以同时使用两者，例如
#idname.classname{
}
If you have another div inside of the divAnnounce you can do
如果你在 divAnnounce 里面有另一个 div 你可以做
#divAnnounce #yournewdiv{
}
OR
或者
#divAnnounce div{
}
OR
或者
#newdivid{
}
Notice the space inbetween the two targets saying that they are a parent and child
注意两个目标之间的空格，表示它们是父子对象
回答by josh.trow
<style>
.class1 {
style: value;
}
.class2 {
style:value;
}
</style>
<div class="class1" id="projectName">
Realtime Account Activiation
</div>
<div class="class2" id="divAnnounce">
Announcements
</div>
More info: Class vs ID selectors
更多信息：类与 ID 选择器
回答by Myles Gray
You need to use .classNamenotations for classes and #IDNamenotations for ID's:
您需要使用.className类的#IDName符号和 ID 的符号：
.className {
style:value;
}
#IDName {
style:value;
}
<div class="className">Test</div>
<div id="IDName">Test</div>
回答by SLaks
You should use CSS classesand selectors.
回答by Slavik Meltser
I wrote an answer about similar issue.
我写了一个关于类似问题的答案。
Load an external CSS for a specific DIV
I believe this should help you.
我相信这应该对你有所帮助。
Make sure to verify that the CSS file will always return "Access-Control-Allow-Origin" in the response header for loading external files.
确保验证 CSS 文件将始终在响应标头中返回“Access-Control-Allow-Origin”以加载外部文件。
If you load CSS data using some other way you can just use the applyCSSToHTML()function.
如果您使用其他方式加载 CSS 数据，则可以使用该applyCSSToHTML()功能。
Good luck!
祝你好运！
回答by Zuul
IDs are unique, they serve the purpose of identifying a specific page element. So it's really the best way to accomplish what you're seeking!
ID 是唯一的，它们用于识别特定的页面元素。因此，这确实是实现您所寻求的最佳方式！
Example setting a style:
设置样式的示例：
#projectName {width:100%;}
Example setting a Jquery Event:
设置 Jquery 事件的示例：
$("#projectName").click(function() { alert('Clicked'); });
