Question

这是一个三部分问题。我现在正在使用HTML和CSS创建网站一段时间，用户创建特定的标签以匹配我的类或ID，例如

<div id="test">
    <div id="blah"></div>
</div>

这样做我最终会选择#test和#blah的css选择器。

最近我开始看到有人使用#test＆gt; #blah表明#blah位于#test。

之内

我已尝试适应使用此格式，但我在尝试选择某些元素方面遇到了麻烦。

问题Pt1。 在下面的代码中，我将如何定位每个跨度，而不必为每个跨度类为中性的

创建样式

我需要为我的部分JavaScript定位保留范围ID。我已尝试过以下几行以及其他一些方法，但似乎无法做到正确。

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc #.neutral{

#wrapper > #content_wrapper > #content_middle > #content_text > #signup_required > .sr > .sc > #.neutral{

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc .neutral{

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc span.neutral{

我的代码可帮助显示我的布局，其中大部分内容已从div中删除：

    <div id="content_wrapper">
    <div id="content_top"></div><!-- #content_top -->
    <div id="content_middle">
        <div id="content_text">
            <div id="benefits"></div>
            <div id="signup">
            <form name="signup_required" id="signup_required" onsubmit="return false;">
                <div class="sr">
                    <div class="sc">
                        <label>First Name<br />
                        <input id="first_name" type="text" onblur="addtick('first_name')"></label>
                        <span id="first_nametick" class="neutral">d</span>
                    </div>

                    <div class="sc">    
                        <label>Surname<br />
                        <input id="surname" type="text" onblur="addtick('surname')"></label>
                        <span id="surnametick" class="neutral"></span>
                    </div>

                    <div class="sc">
                        <label>Gender<br />
                        <select id="gender" onblur="addtick('gender')">
                            <option value="m">Male</option>
                            <option value="f">Female</option>
                        </select></label>
                        <span id="gendertick" class="neutral"></span>
                    </div>
                 </div>
             </form>

问题Pt2。使用CSS的正确的行业标准格式是什么，它是显示元素如何相互嵌套的格式，或者我认为只是针对每个div的整洁系统的格式元素名称。

问题Pt3。使用显示元素如何嵌套的格式，对下载速度有不利影响，因为经常重复的额外字符和代码行肯定会增加文件大小。

Answer 1

在这里找到Q1的答案：

<强> What does the ">" (greater-than sign) CSS selector mean?

您似乎对儿童组合器有误解。

其余问题与最佳做法有关。我建议您使用尽可能少的代码来实现您期望的结果。

例如......

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc span.neutral{

。。。是没有必要的。。

.sc span.neutral{

。。。将使用更少的代码实现相同的结果，更易读/可管理，将导致更小的文件大小，并且将更容易移动元素。

如何正确地使用CSS定位嵌套元素？

1 个答案: