前端学习_01.css选择器

CSS 选择器

CSS 选择器

• a)基本选择器
  i.通配符选择器

  (1)*{property:value;}

  ii.标签选择器

  (1)标签名{property:value;}

  iii.id选择器

  (1)#ID名{property:value;}

  iv.class选择器

  (1).CLASS名{property:value;}

• b)复杂选择器
  i.后代选择器（以空格分隔）

  (1)E F{property:value;}
  (2).container .center{width: 1024px;height: 100%;}

  ii.交集选择器（直接相连）

  (1)EF{property:value;}
  (2)div.desc {text-align: center;}

  iii.并集选择器/群组选择器（以逗号分隔）

  (1)E,F,G{property:value;}
  (2).box1, .box2, .box3 {width: 200px;height: 250px;}

四大基本选择器

• a)通配符选择器
  i.一般用于取消全局的默认样式中的margin和padding:*{margin: 0;padding: 0;}
  ii.当然你在练习的时候使用这个没问题，但是不建议在生产环境中使用，会给浏览器添加不必要的负担。推荐使用并集选择器的实现。
• b)标签选择器
  i.优点：在使用标签选择器之前，不需要修改具体的文档标记，标签选择器也可以正常选择和添加样式。
  ii.缺点：对页面多个标签中某一的部分的选择和添加样式比较困难。
• c)id选择器
  在使用id选择器之前，需要修改具体的文档标记，以便id选择器正常工作。
  i.优点：id唯一，可以轻松对页面标有特定id的部分进行选择和添加样式。
  ii.缺点：id唯一，不能重复使用，id一般在js中使用。（css也可以用id来选择，但不建议）
• d)class选择器
  在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。
  i.优点：可以为多个元素指定同一个class，也可以为一个元素指定多个class。

三大复杂选择器
将基本选择器以几种方式灵活组合起来，就有了5种或6种复杂选择器了，一般常用的就是这三种后代/交集/并集选择器。

• a)复杂选择器的优势
  i.ID选择器严格且只能出现一次，但是ID选择器组合派生的复杂选择器可以被多次复用。
  ii.标签选择器对于多个同样标签中的几个标签的选中和添加样式比较困难，但是复杂选择器可以更好的定位。
• b)后代选择器
  后代选择器匹配所有指定元素的后代元素
  i.E F{property:value;}，其中E 为指定元素，F为后代元素
  ii.当li、td、dd 等大量连续出现且样式相同或者相似的标签，就应用后代选择器
• c)并集选择器
  i.E,F,G{property:value;}
  ii.可以用于取消全局的默认样式中的margin和padding(将页面中你使用的所有标签并列)