CSS 选择器

CSS 选择器分类

• 标签选择
• id选择器
• class选择器
• 后代选择 （div a）
• 子代选择 （div > p）
• 相邻选择 （div + p）
• 通配符选择 （*）
• 否定选择器 :not(.link){}
• 属性选择器
• 伪类选择器
• 伪元素选择器 ::before{}

CSS3属性选择器

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute l=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

CSS3伪类选择器

伪类 | MDN
常用：

• :hover
• :focus
• :after 在元素之前添加内容,也可以用来做清除浮动。
• :before 在元素之后添加内容
• :enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。
• :disabled 控制表单控件的禁用状态。
• :checked 单选框或复选框被选中
• ::selection 用户选中的区域
• :empty 一般用来隐藏内部什么都没有的元素
• :not(selecter)
• p:first-of-type
• p:last-of-type
• p:only-of-type
• p:nth-of-type(n)
• p:nth-last-of-type(n)
• :nth-child(n)
• :nth-last-child(n)
• p:only-child

伪类和伪元素区别

• 伪类值一种状态 比如:hover
• 伪元素是一个真实存在的元素，他可以有样式有内容

iconfont原理

• 利用编码让图标编为一个字符
• 引入字体
• 利用before伪元素向页面中插入一个文字

css 定义的权重

• !important 优先级最高，但也会被权重高的important所覆盖
• 行内样式总会覆盖外部样式表的任何样式(除了!important)
• 单独使用一个选择器的时候，不能跨等级使css规则生效
• 如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效
• 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则
• 权重相同时，与元素距离近的选择器生

一句话总结：
!important > 行内样式 > ID选择器 > (类选择器 | 属性选择器 | 伪类选择器 )> 元素选择器

浏览器解析CSS

.wrapper div > p CSS中，浏览器查找元素是通过选择权从后往前找的， 这样做的目的是加快CSS解析速度，从后往前，排除法

浏览器解析css选择器的规则

怎样美化一个checkbox ?

• 让原本的勾选框隐藏
• input + label 背景图没选中
• input:checked + label 背景图选中

.checkbox input{
  display: none;
}
.checkbox input + label{
  background:url(./没选中.png) left center no-repeat;
  background-size:20px 20px;
  padding-left:20px;
}
.checkbox input:checked + label{
  background-image:url(./选中.png);
}

<div class="checkbox">
  <input type="checkbox" id="handsome"/>
  <label for="handsome">我很帅</label>
</div>