嗨，我包含的选择器选择了不在我选择的类中的其他元素，有人可以解释为什么会发生这种情况。这里是代码....请注意我如何将 p 标签放在类之外，它仍然选择它。
<!DOCTYPE html>
<html>
<head>
<style>
.one_one h1, p{
display:inline-block;
background-color:pink;
width:100px;
}
.one_two h1, p{
display:inline-block;
background-color:blue;
width:100px;
}
.one_three h1, p{
background-color:orange;
width:100px;
display:inline-block;
}
</style>
</head>
<body>
<div class="webdesign_info">
<section class="one_one">
<h1>A wide variety of choices</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua ut enim ad minim veniam.</p>
</section>
<section class="one_two">
<h1>Easy to search Through</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua ut enim ad minim veniam.</p>
</section>
<section class="one_three">
<h1>1170px wide content area</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua ut enim ad minim veniam.</p>
<section>
</div>
<p>Chrisk is sm</p>
</body>
</html>
最佳答案
CSS 选择器中的逗号分隔具有相同样式的多个选择器。所以，你的 CSS
.one_three h1, p
被浏览器读取为:
apply following styles to all (<h1>) in all of class (one_three), as well as all (<p>)
结果是 <p>由样式表中选择 p(在本例中为 .one_three h1, p)的最后一个样式设置样式
作为对您评论的回应，您可以选择 <p>和 <h1>在 .one_three像这样:
.one_three h1, .one_three p
它被浏览器读取为:
apply following styles to all (<h1>) in all of class (one_three), as well as all (<p>) in all of class (one_three)
如果你想要一个更短的类型版本，你可以使用 SCSS:
.one_three{
h1, p{
//Styles
}
}
但是，在编译时，它会输出与上面发布的相同的 CSS，只是更容易阅读和跟踪开发
关于html - 为什么 html 在我选择的范围之外使用选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33375745/