前端面试题-CSS选择器

mingzhong 发布于2019-08-01 18:41 / 649人阅读

摘要：一选择器作用选择器用于定位我们想要给予样式的元素，但不只是在中，对的选择器也是支持的，比如。在选被元素后插入内容其用法和特性与相似。所有伪元素选择器在前端面试题伪类和伪元素扩展阅读前端面试题清除浮动前端面试题块格式化上下文

一、CSS选择器作用

CSS 选择器用于定位我们想要给予样式的 HTML 元素，但不只是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，比如 document.document.querySelectorAll。

二、选择器类型

基本选择器

组合选择器

属性选择器

伪类选择器

伪元素选择器

三、基本选择器

选择器	含义	作用	CSS
.class	类选择器	匹配 class 包含(不是等于)特定类的元素	1
#id	id选择器	匹配特定 id 的元素	1
*	通用元素选择器	匹配页面任何元素（这也就决定了我们很少使用）	2
element	元素选择器	选择HTML元素	1

四、组合选择器

选择器	含义	作用	CSS
E,F	多元素选择器	同时匹配元素E或元素F	1
E F	后代选择器	匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F	1
E>F	子元素选择器	匹配E元素的所有直接子元素	2
E+F	直接相邻选择器	匹配E元素之后的相邻的同级元素F	2
E~F	普通相邻选择器（弟弟选择器）	匹配E元素之后的同级元素F（无论直接相邻与否）	3

五、属性选择器

选择器	示例	示例说明	CSS
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute ^= language]	[lang ^= en]	选择一个lang属性的起始值="EN"的所有元素	2
[attribute $= language]	[lang $= en]	选择一个lang属性的结尾值="EN"的所有元素	2
[attribute *= language]	[lang *= en]	选择一个lang属性的包含"EN"的所有元素	2

六、伪类选择器

选择器	示例	示例说明	CSS
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:hover	a:hover	把鼠标放在链接上的状态	1
:active	a:active	选择正在活动链接	1
:focus	input:focus	选择元素输入后具有焦点	2

所有伪类选择器在前端面试题-伪类和伪元素

七、伪元素选择器

选择器	作用	说明	CSS
::before/:before	在被选元素前插入内容。	需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。	2
::after/:after	在选被元素后插入内容	其用法和特性与:before相似。	2
::first-letter/:first-letter	匹配元素中文本的首字母。	被修饰的首字母不在文档树中。	1
::first-line/:first-line	匹配元素中第一行的文本。	这个伪元素只能用在块元素中，不能用在内联元素中。	1

所有伪元素选择器在前端面试题-伪类和伪元素

扩展阅读

前端面试题-clearfix（清除浮动）

前端面试题-BFC(块格式化上下文)

云服务器 GPU云服务器 css选择器基础选择器css 面试题栈面试题

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

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

前端面试题-CSS选择器

摘要：一选择器作用选择器用于定位我们想要给予样式的元素，但不只是在中，对的选择器也是支持的，比如。在选被元素后插入内容其用法和特性与相似。所有伪元素选择器在前端面试题伪类和伪元素扩展阅读前端面试题清除浮动前端面试题块格式化上下文一、CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素，但不只是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，比如 ...

leanote 2019-08-30 14:09 评论0 收藏0
前端面试题-CSS选择器

摘要：一选择器作用选择器用于定位我们想要给予样式的元素，但不只是在中，对的选择器也是支持的，比如。在选被元素后插入内容其用法和特性与相似。所有伪元素选择器在前端面试题伪类和伪元素扩展阅读前端面试题清除浮动前端面试题块格式化上下文一、CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素，但不只是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，比如 ...

h9911 2019-08-22 15:25 评论0 收藏0
前端面试题-CSS选择器性能优化

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

Scott 2019-08-30 14:08 评论0 收藏0
前端面试题-CSS选择器性能优化

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

XGBCCC 2019-08-01 18:42 评论0 收藏0
前端面试题-CSS优先级

摘要：优先级是基于不同种类选择器组成的匹配规则。但是，在内部声明的选择器是会影响优先级。当两条相互冲突的带有规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。扩展阅读前端面试题选择器一、选择器优先级浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。二、优先级计算优先级就是分配给指定的CSS声明...

余学文 2019-08-30 14:09 评论0 收藏0