内嵌样式的分组和嵌套_样式嵌套-CSDN博客

本文链接：https://blog.csdn.net/weixin_38945490/article/details/128839589

*选择器的分组和嵌套
分组的意思：多个元素公用一套样式，且选择可以任意搭配

   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>