02 - CSS基础选择器(重点)

1.  CSS选择器作用

   1. 

   2. 作用：找到特定的HTML页面元素 （选择标签用的，把想要的标签选择出来）

   3. <style>
      h3 {
          color:red
      }
      /*把h3选择出来 然后把他的颜色变成红色  */
      </style>

2. 基础选择器
   1. 标签选择器
      1. 概念：标签选择器是指用 HTML标签名 作为选择器，按标签名分类，为页面中某一类标签指定统一的css样式
      2. 语法

         1. 标签名 { 属性：属性值 }

      3. 作用：
         1. 可以把某一类标签 全部选择出来
      4. 优缺点
         1. 能快速为页面同类型的标签统一样式(优点)
         2. 不能设计差异化样式(缺点)
   2. 类选择器

       

      1. 语法

         1. <div class = ' box'> 类选择器 </div>
            
            .box {
            属性：属性值;
            }

      2. 优点：为元素对象定义单独或相同的样式。
      3. 注意：
         1. 类选择器使用 ’ . ‘英文点号进行标识
         2. 长名称库使用横线来为选择器命名
         3. 不能纯数字、中文等命名，尽量使用字母 
      4. 案例
      5. 
   3. id选择器
      1. #后面跟id名
      2. 语法

         1. <p id = 'xzq'>id选择器<p>
            #xzq {
            属性：属性值
            }

      3. 元素的id是唯一的，用法和类选择器相同
      4. 和类选择器的区别
         1. 类选择器 好比人的名 可以多次重复使用
         2. id选择器  好比人的身份证号码，是全国唯一的，不能重复
   4. 复合选择器
      1. 后代选择器

          

         1. 用来选择元素或者元素的子孙后代
         2. 语法 ： 父级 子级 {  }
         3. 
      2.  子元素选择器

          

         1. 亲儿子的元素
         2. 语法 .class>h3{} 
         3. 
      3. 交集选择器
         1. 其中一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
         2. p.one 选择的是： 类名为 .one 的 段落标签
         3. 比较少用

         4. 

      4. 并集选择器（重点）
         1. 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
         2. 
         3. 任何形式的选择器，都可以作为并集选择器的一部分

          

总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	p{color:red}
类选择器	可以选出一个或者多个标签	可以根据需求选择	非常多	.nav {color:red}
id选择器	一次只能选择一个标签	只能使用一次	不推荐使用	#nav{color:red}
通配符选择器	选择所有的标签	选择的太多，有些不需要	不推荐使用	*{color:red}