摘要：选择器分类标签选择选择器选择器后代选择子代选择相邻选择通配符选择否定选择器属性选择器伪类选择器伪元素选择器属性选择器选择器描述用于选取带有指定属性的元素。在元素之后添加内容选择器匹配每个已启用的元素大多用在表单元素上。
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] | 匹配属性值中包含指定值的每个元素。 |
伪类 | 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选择器 > (类选择器 | 属性选择器 | 伪类选择器 )> 元素选择器
.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);
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117364.html
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
阅读 897·2021-10-13 09:48
阅读 3808·2021-09-22 10:53
阅读 3080·2021-08-30 09:41
阅读 1924·2019-08-30 15:55
阅读 2900·2019-08-30 15:55
阅读 1808·2019-08-30 14:11
阅读 2149·2019-08-29 13:44
阅读 740·2019-08-26 12:23
