css选择器

lable标签
作用:与input标签结合,点击lable包裹的文字,input框自动对焦
实现: lable标签for属性和input标签id属性名一致
eg:

<label for="text">用户名:</label> <input type="text" id="text">

css选择器
作用: 根据不同需求选择不同的标签添加css样式
注意: 选对人,做对事(选对标签,添加正确样式)
分类: 基础选择器和复合选择器
基础选择器: 标签/id/类选择器/通配符
复合选择器: 后代选择器/子选择器/并集选择器/伪类选择器

后代选择器(包含孙子)
 <div>
      <a href="http://" target="_blank" rel="noopener noreferrer">123</a>
      <span><a href="http://" target="_blank" rel="noopener noreferrer">456</a></span>
</div>

<style>       
     /* div span a {
            color: red;
      } */
      	div a {
            color: green;
        }
</style>

子选择器(亲儿子)
<div>
      <a href="http://" target="_blank" rel="noopener noreferrer">123</a>
      <span><a href="http://" target="_blank" rel="noopener noreferrer">456</a></span>
</div>
<style>       
      div>a {
          color: red;
      }
</style>

并集选择器




补充: 交集选择器

如果有元素选择器,必须以元素选择器开头
<div>
     <span class="ce">123</span>
     <span>456</span>
</div>
<style>       
      div .ce {
          color: red;
      }
</style>