CSS 选择器

CSS 选择器分类

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

CSS3属性选择器

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=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 背景图选中
1
2
3
4
5
6
7
8
9
10
11
.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);
}
1
2
3
4
<div class="checkbox">
  <input type="checkbox" id="handsome"/>
  <label for="handsome">我很帅</label>
</div>