HTML/CSS选择器_下面那个选择器能同时匹配div2与div3中的h2标签,不是h2标签不匹配。-CSDN博客

本文链接：https://blog.csdn.net/giserhfbuie/article/details/114780529

HTML/CSS选择器分类：

1.标签选择器，同时对div两个标签都调整

2.id选择器

3.类选择器

4.分组选择器(用逗号隔开的多个选择器组成分组选择器)

5.后代选择器：父子选择器构成的一种选择器

6.*选择器：全选择器

为什么要用选择器？

使用style标签属性可以为html标签添加样式，但这种方式与html标签会耦合，不便于后期维护。样式和标签分开，对后期的修改维护有很大好处，而且代码简洁明了，增加可读性。浏览器可以选择为哪些标签添加样式标识符。

<html>
    <head>
       <style>   
        div{/*1.标签选择器，同时对div两个标签都调整*/
            letter-spacing: 10px;/*字间距*/
        }
        .text-size{/*2.类选择器*/
           font-size:36px;
        }
          #indent{/*3.id选择器*/
           text-indent: 20px;/*indent是缩行，比如说输入内容时，这个内容离边框太近，体验感不好，这是可以用indent来调正距离*/
          }
          .text-size,#indent{/*4.分组选择器(用逗号隔开的多个选择器组成分组选择器)*/
                   font-size: 50px;
          }
          html body span{/*5.后代选择器：父子选择器构成的一种选择器*/
                  color: blue;
          }
       </style>
    </head>
    <body>
        <!--
            为什么要用选择器？
            使用style标签属性可以为html标签添加样式，但这种方式与html标签会耦合，不便于后期维护。
            样式和标签分开，对后期的修改维护有很大好处，而且代码简洁明了，增加可读性。
            浏览器可以选择为哪些标签添加样式标识符。
        -->
        <div>你好，中国</div>
        <div class="text-size">Hello world</div><!--块级元素-->
        <span>唐伯虎</span>
        <i class="text-size">张三丰</i>
        <input id="indent"/>
        <a href="http://www.baidu.com" target="_blank">百度</a><!--超链接自带有下划线-->
    </body>
</html>