根本选择器
标签选择器
应用HTML标签增加款式
标签名{ 款式名:款式值;}<div></div>div{ width: 100px; height: 100px;}
id选择器
- 给HTML标签增加一个id属性
id属性的特点：每人id名在一个页面中只容许呈现一次，这叫做id的唯一性
#id名{ 款式名:款式值;}<div id="box"></div>#box{ width: 100px; height: 100px;}
class选择器
- 给HTML标签增加一个class属性
一个class名在页面中可呈现多个，每个标签能够有多个class名
#class名{ 款式名:款式值;}<div class="box"></div>.box{ width: 100px; height: 100px;}
通配符
通配符是指所有标签都能够应用款式
*{ padding:0; margin:0;}
群组选择器
多个标签共用一个款式时，可将多个选择器同时设置雷同款式，打消代码冗余
选择器1,选择器2,选择器3,选择器4{ 款式名:款式值;}div,#id,.class,*{ width: 100px; height: 100px;}
选择器命名标准
- 不能应用特殊字符
- 尽量应用小写字母结尾
- 多个单词应用下划线（_）、连字符（-）、前面单词首字母大写形式命名
- 不能应用中文命名
- 语义化命名
选择器命名办法
- 下划线命名法：container_left
- 连字符命名法：container-left
- 驼峰式命名法：containerLeft
层级选择器
后辈选择器
抉择父选择器下所有合乎子选择器的子孙元素
父选择器 子选择器{ 款式名:款式值;}ul li{ width:100px; height:100px;}
父子选择器
抉择父选择器下所有合乎子选择器的子元素
父选择器 > 子选择器{ 款式名:款式值;}ul > li{ width:100px; height:100px;}
兄弟选择器
抉择雷同的父元素下符合条件的所有兄弟元素
选择器1 ~ 选择器2{ 款式名:款式值;}div ~ p{ width:100px; height:100px;}
相邻选择器
抉择雷同的父元素下符合条件的第一个元素
选择器1 + 选择器2{ 款式名:款式值;}div + p{ width:100px; height:100px;}
伪类选择器
同一个标签，依据其不同的种状态，有不同的款式，须要应用伪类选择器进行设置
选择器:伪类选择器{ 款式名:款式值;}鼠标点击之前的状态(只能设置给 a 元素)
选择器:link{ 款式名:款式值;}鼠标点击时的状态(只能设置给 a 元素)
选择器:visited{ 款式名:款式值;}鼠标划入标签状态
选择器:hover{ 款式名:款式值;}鼠标按下的状态
选择器:active{ 款式名:款式值;}在元素之前增加或删除内容
选择器::after{ 款式名:款式值;}在元素之后增加或删除内容
选择器::before{ 款式名:款式值;}匹配表单元素禁用
选择器::disabled{ 款式名:款式值;}匹配表单元素禁用
选择器:disabled{ 款式名:款式值;}匹配表单元素选中
选择器:checked{ 款式名:款式值;}匹配获取焦点元素
选择器:fous{ 款式名:款式值;}
属性选择器
- 应用元素的属性和属性值进行抉择元素
通过属性名进行抉择元素
选择器[属性名]{ 款式名:款式值;}<div class="box1">1</div><div>2</div>div[class]{ width: 100px; height: 100px; background: red; margin: 10px;}只有第一个div满足条件，所以第一个div款式失效通过属性名和属性值同时满足进行抉择元素
选择器[属性名="属性值"]{ 款式名:款式值;}<div class="box1">1</div><div class="box2">2</div>div[class="box1"]{ width: 100px; height: 100px; background: red; margin: 10px;}只有第一个div满足条件，所以第一个div款式失效通过属性名和属性值满足其中一项进行抉择元素
选择器[属性名*="属性值"]{ 款式名:款式值;}<div class="box1">1</div><div class="box2">2</div>div[class*="box1"]{ width: 100px; height: 100px; background: red; margin: 10px;}两个div都满足其中一个条件，所有都失效满足最后面的属性名和属性值进行抉择元素
选择器[属性名^="属性值"]{ 款式名:款式值;}<div class="box box1">1</div><div class="box1 box2">2</div>div[class^="box1"]{ width: 100px; height: 100px; background: red; margin: 10px;}只有第二个div的第一个class="box1"满足条件，所以只对第二个div失效满足最初面的属性名和属性值进行抉择元素
选择器[属性名$="属性值"]{ 款式名:款式值;}<div class="box box1">1</div><div class="box1 box2">2</div>div[class$="box1"]{ width: 100px; height: 100px; background: red; margin: 10px;}只有第一个div的最初一个class="box1"满足条件，所以只对第一个div失效属性组合匹配选择器：多个条件同时满足
构造伪类选择器（角标从0开始）
类型选择器
选择器:nth-of-type(角标){ 款式名:款式值;}孩子选择器
选择器:nth-of-child(角标){ 款式名:款式值;}第一个选择器（角标从0开始）
选择器:first-of-type{ 款式名:款式值;}最初一个选择器（角标从0开始）
选择器:last-of-type{ 款式名:款式值;}惟一选择器（角标从0开始）
选择器:only-of-type{ 款式名:款式值;}选择器权重关系
- !important > 行内款式(1000) > id选择器(100) > class选择器(10) > 标签选择器(1) > 通配符
- 群组选择器不扭转选择器的权重
- 应用 !important 能够晋升款式的权重
- 层级选择器应用相加法或者约分法进行表权重关系
款式继承
- 继承父级款式，文字相干款式能够继承，布局款式不能被继承（设置inherit后可继承）