HTML与CSS无法关联？内嵌CSS仍不生效问题求助

嘿，我帮你找出几个导致样式不生效的关键问题啦，咱们一个个拆解：

• CSS类选择器语法错误：你在<style>里写的colors和top_header是类选择器，但类选择器必须以.开头，否则浏览器会把它们当成HTML标签（比如<p>、<div>这类），自然无法匹配到你设置了对应类名的元素。正确的写法应该是.colors和.top_header。

• HTML中的引号格式错误：你代码里的class=鈥渃olors鈥�这类写法用了中文全角引号（显示成乱码是因为编码问题），浏览器无法正确识别类名，必须换成英文半角的双引号""。

修正后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Portfolio Site</title> 
    <meta name="description" content="A site built to showcase what I learned in the full stack Udacity course."> 
    <style> 
        .colors { 
            background-color: blue; 
            display: inline-block; 
            width: 30%; 
        } 
        .top_header { 
            background-color: yellow; 
            display: inline-block; 
            width: 70%; 
        } 
    </style> 
</head> 
<body> 
    <aside class="colors"> 
        <section class="gray">gray</section> 
        <section class="black">black</section> 
        <section class="blue">blue</section> 
    </aside> 
    <section class="top_header"> 
        <section id="logo">logo</section> 
    </section> 
</body> 
</html>

额外小提示 #

用inline-block做左右布局时，元素之间的换行或空格会产生额外间距，可能导致30%+70%的总宽度超过100%，从而出现换行。如果想避免这个问题，可以试试：

• 把两个元素的代码写在同一行
• 给父元素（这里是<body>）设置font-size: 0，然后给子元素重新设置字体大小
• 改用Flex布局（更推荐，现代布局方式更灵活）

内容的提问来源于stack exchange，提问作者Advokaten01