*选择器的分组和嵌套
分组的意思:多个元素公用一套样式,且选择可以任意搭配
h1,button,span{
color: red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>分组和嵌套</title>
<style>
/*
h1{
color: red;
}
button{
color: red;
}
span{
color: red;
}
*/
/*使用分组的写法*/
h1,button,span{
color: red;
}
</style>
</head>
<body>
<h1>分组</h1>
<button>按钮</button>
<span>span标签</span>
</body>
</html>
嵌套选择器的意思: 给匹配器做区分,主要是区分,比如menu有很多种
嵌套:
button.menu{
border: 1px solid red;
}
button#menu{
border: 1px solid red;
}
子父元素选择器
空格选择器: 指匹配当前元素的所有子元素(所有后代元素)
>选择器: 匹配的是当前元素的直接子元素
.menu>li{
border: 1px solid red;
}
.menu li{
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>分组和嵌套</title>
<style>
/*
空格选择器
>选择器
*/
.menu li{
border: 1px solid red;
}
/*button里面的menu*/
button#menu{
border: 1px solid red;
}
</style>
</head>
<body>
<ul class="menu">
<li>
蔬菜
<ul>
<li>黄瓜</li>
<li>西红柿</li>
</ul>
</li>
</ul>
<button class="menu">按钮</button>
<button class="menu">按钮</button>
<button id="menu">按钮</button>
<div class="menu">区块元素</div>
</body>
</html>