Question

CSS

#header #site_title_section {
float: left;
width: 300px;   
margin-left: 30px;
text-align: center;

 #site_title_section #site_title {
margin-top: 30px;
padding: 10px 0;
font-size: 40px; 
color: #4379ab;
font-weight: bold;
    }

 #site_title_section #salogon {
 font-size: 14px;
 margin-left: 20px;
 color: #333333;
  }

HTML

    <div id="site_title_section">

        <div id="site_title">
          Professional
        </div>

        <div id="salogon">
            New Media Company</div>
        <div class="cleaner">&nbsp;</div>

    </div>

有人可以帮我理解这个

从CSS代码“site_title_section”出现了三次，所以当用html代码调用哪一个会被执行？

Answer 1

首先请注意您的代码中存在一个小错误：

#header #site_title_section {
   float: left;
   width: 300px;   
   margin-left: 30px;
   text-align: center;
} /* <-- You forgot this */

现在看看如何读取CSS，它是这样的：

[parent] [child1] [child of child1] ... { .. }

因此，例如将其视为进入HTML代码中的元素。例如：

<div id="site_title_section"> <!-- #site_title_section part -->

    <div id="site_title"> <!-- #site_title_section #site_title -->
      Professional
    </div>

    <div id="salogon"> <!-- #site_title_section #salogon -->
        New Media Company</div>
    <div class="cleaner">&nbsp;</div>

</div>

对于#header #site_title_section，至少从显示的代码开始。甚至知道我们内部有#site_title_section。没有标识为#header的父级，因此不执行任何操作。但是假设有（你可能只是忘了粘贴它）。然后它会影响整个#site_title_section div。

<强> Here is a fiddle with all your CSS affects (including an added header)

哪个选择器会被执行？

1 个答案: