Question

与我之前的question here相关。如果我使用下面的HTML代码作为我的网页的一部分，那里可能会有更多的div标签，我如何在CSS中定位这些特定的div？我认为效果最好的样本是[本答案] [2]。

我添加了Id属性以使div在大型HTML DOM中更易于选择...我不知道如何使它们更具可辨性。如果有更好的方法，请告诉我。目标是将CSS设计应用于大型共享点门户网站内的大约6个div标签元素。如果有一个更通用的方式很酷，那么我可以轻松添加更多的部分并在将来使用这种格式...我可以为我希望格式化应用的每个元素添加一个类属性，但我不知道语法。

完成这项工作的设计师专业网络方式是什么？

<div id="projectName">
       Realtime Account Activiation
</div>

<div id="divAnnounce">
        Announcements
</div>

我有 http://jsfiddle.net/eW532/1/

我正在使用下面的代码，但是在整个水平长度为蓝色但不是第一个字母的情况下会得到不好的结果。我正在尝试让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>

Answer 1

放在HTML文件中的

页面顶部的<LINK REL=StyleSheet HREF="Path/to/your/stylesheet.css" TYPE="text/css" MEDIA=screen>引用新样式表。

你的CSS文件中的

：

#projectName{
style:value;
}

#divAnnounce{

}

如果您使用的话，＃会使用ID定位。在它定位类名之前，

如果您需要具体如

，也可以同时使用这两种方式

#idname.classname{

}

如果divAnnounce中有另一个div，你可以

#divAnnounce #yournewdiv{

}

OR

#divAnnounce div{

}

OR

#newdivid{

}

注意两个目标之间的空间，表示他们是父母和孩子

Answer 2

<style>
.class1 {
style: value;
}

.class2 {
style:value;
}
</style>

<div class="class1" id="projectName">
       Realtime Account Activiation
</div>

<div class="class2" id="divAnnounce">
        Announcements
</div>

更多信息：Class vs ID selectors

Answer 3

我写了一个关于类似问题的答案。

Load an external CSS for a specific DIV

我相信这对你有所帮助。

确保验证CSS文件将始终在响应标头中返回“Access-Control-Allow-Origin”以加载外部文件。

如果您使用其他方式加载CSS数据，则可以使用applyCSSToHTML()函数。

祝你好运！

Answer 4

您应该使用CSS classes和selectors。

Answer 5

您需要对类使用.className符号，并为ID使用#IDName符号：

.className {
style:value;
}

#IDName {
style:value;
}

<div class="className">Test</div>

<div id="IDName">Test</div>

Answer 6

ID是唯一的，它们用于识别特定页面元素。所以这真的是实现你所寻求的最佳方式！

设置样式的示例：

#projectName {width:100%;}

设置Jquery事件的示例：

$("#projectName").click(function() { alert('Clicked'); });

css在大型HTML网页中定位特定的div标签

6 个答案: