资讯专栏INFORMATION COLUMN

CSS 选择器

Coding01 / 410人阅读

摘要:选择器分类标签选择选择器选择器后代选择子代选择相邻选择通配符选择否定选择器属性选择器伪类选择器伪元素选择器属性选择器选择器描述用于选取带有指定属性的元素。在元素之后添加内容选择器匹配每个已启用的元素大多用在表单元素上。

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);
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/60619.html

相关文章

  • WEB前端 CSS

    摘要:后代选择器,儿子选择器,毗邻选择器,弟弟选择器。后代选择器后代选择器标签选择器后跟标签后代,无论直属还是间接直属,直接后代毗邻后代中最近的一个弟弟,找到和自己同级的标签如通过多个选择器好到具体的标签。目录 WEB前端 CSS WEB前端 CSS TOC CSS简介 CSS引入方式 CSS结构 CSS选择器 标签选择...

    darry 评论0 收藏0
  • 编写高效的 CSS 选择CSS魔法

    摘要:最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方,哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候,关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在工作之时,所感兴趣的,关注已久的话题。 有很多人都忘记了,或在简单的说没有意识...

    forrest23 评论0 收藏0
  • 编写高效的 CSS 选择CSS魔法

    摘要:最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方,哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候,关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在工作之时,所感兴趣的,关注已久的话题。 有很多人都忘记了,或在简单的说没有意识...

    hyuan 评论0 收藏0
  • 前端面试题-CSS选择性能优化

    摘要:不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换,减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话,他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CS...

    Scott 评论0 收藏0
  • 前端面试题-CSS选择性能优化

    摘要:不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换,减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话,他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CS...

    XGBCCC 评论0 收藏0
  • 关于css选择的小归纳(一)

    摘要:关于中选择器的小归纳一基本选择器基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器类似于,,,,类选择器我们在标签里面为其添加的,选择器与类选择器类似,普遍选择器,并且选择器类似的写法和并列选择器类似的写法元素选择器范例你 关于css中选择器的小归纳 一、基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul...

    kbyyd24 评论0 收藏0

发表评论

0条评论

Coding01

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<