CSS的选择器——逗号、空格分隔和连写的区别
1.问题描述
最近在写HTML页⾯的时候，CSS选择器中逗号、空格分隔和连写的区别，傻傻分不清楚了。于是写下这篇博客，记录⼀下。
2.问题情况
（1）连写 ：表⽰当前元素需要同时具备才会出现效果
<!DOCTYPE html>
<html>
<head>
<style>
.one.two
{
background-color:yellow;
}
</style>
</head>
<body>
<p class="one two">
aaaaaa
<span class="three">
你好啊
</span>
</p>
<p class="four">bbbbbbb</p>
<p class="one">
aaaaaa
</p>
</body>
</html>
（2）逗号分隔：表⽰当前元素具备其中⼀个就会出现效果，即并列关系，⼆者之间并没有什么关系
<!DOCTYPE html>
<html>
<head>
<style>
.one,.two
{
background-color:yellow;
}
</style>
</head>
<body>
<p class="one two">
aaaaaa
<span class="three">
你好啊
</span>
</p>
html中的5种空格表示<p class="four">bbbbbbb</p>
<p class="one">
aaaaaa
</p>
</body>
</html>
（3）空格分隔：表⽰从属包含关系，是当前的元素⼦元素才会出现效果，即⽗⼦关系
<!DOCTYPE html>
<html>
<head>
<style>
.one .two
{
background-color:yellow;
}
</style>
</head>
<body>
<p class="one two">
aaaaaa
<span class="three">
你好啊
</span>
<span class="two">我是two</span>
</p>
<p class="four">bbbbbbb</p>
<p class="one">
aaaaaa
</p>
</body>
</html>
3.问题总结
1. 连写：就是需要同时具备才会出现效果
2. 逗号分隔：就是只需要具备其中之⼀即可出现效果，⼆者是并列关系
3. 空格分隔：就是⼆者是⽗⼦关系，是当前的元素⼦元素才会出现效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。