css常用选择器总结

css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到css选择器。

常用选择器：

1. 标签选择器（针对页面中所有当前类型标签生效）

   例如：div{
   width:1100px;
   height:200px;
   }

2. class选择器 – 样式中（css）定义好后，在结构中（html）可以多次重复使用。

   例如：
   结构中：`<div`  class=”class名”>`</div>`
   样式中：.class名{ 样式 }
   

3. id选择器 – 样式（css）定义好后，在结构中（html）中使用，通常用于JavaScript。具有唯一性
   例如：
   结构中：<div id=”id名”></div>
   样式中：#id名{ 样式 }

4. 群组选择器：可以对多个不同的选择器设置相同的样式
   格式：选择器1，选择器2，选择器3 { 样式 }
   使用时可以任意组合不同的选择器

5. 后代选择器 格式 ：父选择器 子选择器{ 样式 }
   在a选择器区域内的所有b选择器都会生效

6. 通配符选择器：
   *{ margin：0; padding:0; }

7. 伪类选择器： a:hover{ 鼠标悬停时显示的样式 }
   a:link{ 默认的链接样式 }
   a:visited{ 已访问过的链接样式 }
   a:hover{ 鼠标悬停时的样式 }
   a:active{ 鼠标按住时的样式 }
   注意书写顺序：l – v – h – a 爱恨原则：love and hate

8. 父子选择器：只选中直接为子辈的元素

   .box>h1{样式}

选择器的命名规则：
1、 一定注意不能使用数字开头，必须使用字母开头，起名尽量起有意义的与页面相关的名字
2、 特殊的符合的使用，减号（-）和下划线（_）,不能使用其他符号
3、 起名可以根据（内容，位置，大小）去命名

选择器的优先级（权重关系）
条件1：当有不同选择器对同一个对象进行样式指定时；
条件2：并且两个选择器有相同的属性被赋予不同的值时；
这样就得出一个结论：优先级由小到大
标签选择器-Class选择器- Id选择器-行内样式
！important； 最高级别，提高样式权重，拥有最高的优先级