小李带你玩转html—02

基础选择器

选择器：指的是我们需要添加样式的标签元素的模式。

• 标签选择器：直接对标签内容进行改变样式。
  
  ！！！！轻易不要使用，因为它会改变全部的p和h2
  
  清除样式之前，各个标签之间是有间隔
  但是，清除之后
  
  
  各个标签之间间隔完全消失

id选择器

通过标签的id属性值来选相应的标签。

• 选择器书写：#开头，后面紧跟id名。
  由于id页面唯一，所以Id选择器只能选中一个元素
  
  根据id单独设置属性，But它有自己的命名规则：
  必须以字母开头（严格区分大小写，A和a表示的不一样），后面可以是数字，下划线或者横线。一个页面不可用同一个id
  你以为id选择器只有好处？那就错了，id选择器只能选中一个元素，会造成很麻烦的局面。
  而且id选择器主要是为了js

类选择器

通过标签的class属性来选择这个标签

• 选择器写法：.开头，后面class属性值。中间不能有空格
• class属性，值不可以唯一，类选择器选中的是所有相同的class
  
  我想大家也可以发现，类选择器比id选择器的优点是可以修改多个元素的属性。
  一个标签的class可以有多个属性值

---

类上样式，id上行为

---

通配符

可以选中body在内的所有标签

高级选择器

基础选择器并不能满足我们所有的需求，在基础选择器上进行了一些延展。
三种：后代选择器，交集选择器，并集选择器

• 后代选择器又名包含选择器——通过标签之间的嵌套关系、层级关系，限定我们大体范围，在范围内具体查找相关元素。

后代选择器：根据嵌套关系，空格左侧是右侧的祖先元素。大大解决了之前的各种缺点。后代选择器空格俩边只要是后代关系就可，简单理解为不用写成.box ul li。。一般的开始的祖先元素一般不使用标签选择器。


.box后面的所有one都可变色，只限于.box

交集选择器

定义：既满足条件1也满足条件2

• 俩种或以上种选择器同时存在一个标签上。
• 写法：选择器之间直接连接，没有任何符号
  
  ！！！！交集使用的基础选择器，可以都是类选择器，可以使标签和类的混写
  如果遇到class命名有空格，定义样式时空格位置用.来替换

并集选择器

有很多元素可能都有相同的 css样式，我们可以通过并集选择器将这些标签写在一起，统一设置css样式

***其中并集选择器最重要的作用之一是清空初始样式 ***