Html css id未应用于内部元素_Html_Css

Html css id未应用于内部元素

html css

Html css id未应用于内部元素,html,css,Html,Css,我的css代码： #header { width:900px; border:dashed 1px; margin:5px; padding:2px; } #header .fl_left { float:left; display:block; width:260px; } #header .fl_left h1 { float:left; background-color:#666633; color:#0033CC; font-family:Verdana, Arial, Helvetic

我的css代码：

#header
{
width:900px;
border:dashed 1px;
margin:5px;
padding:2px;
}
#header .fl_left
{
float:left;
display:block;
width:260px;
}
#header .fl_left h1
{
float:left;
background-color:#666633;
color:#0033CC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:oblique;
}

我的html代码：

<body>
<div id="header"><div class="fl_left"> <h1>hello all</h1> </div></div>
</body>
</html>


大家好

我在标题外部获得输出“hello all”。我的意图是将h1元素文本放在标题中

为什么header id规则不应用于my h1元素。

header选择器仅应用于header元素本身，而不应用于其子元素，并且子元素不会继承任何样式

文本结束于页眉之外的原因是页眉仅包含不占用空间的浮动元素，因此它们不会影响页眉的高度

您可以将

overflow:hidden

添加到标题中，使其包含其子项：

#标题{
宽度：900px；
边框：虚线1px；
保证金：5px；
填充：2px；
溢出：隐藏；}

您需要添加

溢出：隐藏到您的#标题
样式声明
另外，
元素是否真的需要向左浮动，因为它的父元素。fl_left
已经浮动了？如果是，则.fl\u left
将需要溢出：隐藏
也是。
您正在h1
标记中使用float
，该标记将文本从h1
中解除绑定。如果需要使用float
，则使用选择器
将此代码添加到您的CSS文件中（添加之前，请通过上面的链接）
移除fl\u left
div和class，然后将float:left
从h1移动到div#头

HTML:
结果：
我建议如下：
CSS:
HTML:

以下是我所做的：-

标题及其父div向左浮动，浮动div就足够了
浮动元素不占用空间，这就是为什么标题文本显示在带边框的div之外
此外，还修复了打字错误并改进了格式

要看到这一点，请看这个


HTML代码
来源：
清除：两者都有样式”不会使浮动项出现在任何一侧，因此它们会出现在标题周围，而不是在标题下方。
代码的目标是什么？您希望您的h1
标题在标题框中浮动吗？此外，还可以在不同的位置两次声明某些属性。所以请详细解释。我已经从我的#标题中删除了float:left。fl#u left h1。现在我已经把我的float:left放在了我的fl_left类中。我尝试了溢出：隐藏在#header中，但它不起作用。它似乎对我有效-。我误解了什么吗？我已经从我的#标题中删除了float:left。fl#u left h1。现在我已经把我的float:left放在了我的fl_left类中。我尝试了溢出：隐藏在#header中，但没有work@crazyvi：那么您的代码中可能还有其他东西阻止ir工作。在这里，我获取了您的代码并添加了overflow：
#header .fl_left h1
{
  content:".";
  visibility:hidden;
  clear:both;
}

<div id="header"><h1>hello all</h1></div>

#header
{
float: left;
width:900px;
border:dashed 1px;
margin:5px;
padding:2px;
}
#header h1
{
background-color:#666633;
color:#0033CC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:oblique;
}

#header{width:900px; border:dashed 1px; margin:5px; padding:2px;}
#headerTitle{float:left; background-color:#666633; width:260px; }
#headerTitle h1{color:#0033CC; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:oblique;}

<div id="header">
    <div id="headerTitle>
        <h1>hello all</h1>
    </div>
</div>

<div id="header">
    <div class="spacer">
        &nbsp;
    </div>

    <div id="header-title">
        <h1>hello all</h1>
    </div>

    <div class="spacer">
        &nbsp;
    </div>
</div>