关于前端:CSS-选择器总结

43次阅读

共计 2390 个字符,预计需要花费 6 分钟才能阅读完成。

CSS 是用于网页设计可用的最弱小的工具之一。应用它咱们能够在几分钟内扭转一个网站的界面,而不必扭转页面的标签。

好一段时间不必 CSS,有一些基础知识的记忆有点含糊了,明天再做一次总结记录,不便日后回顾温习。

选择器分类

在 CSS 中,选择器可分为以下几类:

  • 根本选择器(通配选择器、元素选择器、类选择器、ID 选择器、群组选择器)
  • 档次选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素

根本选择器比拟好记,这里就不节约篇幅,次要是记录一下后三、几种选择器。

档次选择器

选择器 类型 性能形容
E F 后辈选择器(蕴含选择器) 抉择匹配的 F 元素,且匹配的 F 元素被蕴含在匹配的 E 元素内
E>F 子元素选择器 抉择匹配的 F 元素,且匹配的 F 元素所匹配的 E 元素的子元素
E+F 相邻兄弟选择器 抉择匹配的 F 元素,且匹配的 F 元素紧位于匹配的 E 元素的前面
E~F 通用选择器 抉择匹配的 F 元素,且位于匹配的 E 元素后的所有匹配的 F 元素
  • 在后辈选择器中,规定右边的选择器一端包含两个或多个用空格分隔的选择器。选择器之间的空格是一种联合符(combinator)。每个空格联合符能够解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后辈”,然而要求必须从右向左读选择器。
  • 如果不心愿抉择任意的后辈元素,而是心愿放大范畴,只抉择某个元素的 间接子元素,请应用子元素选择器(Child selector)。
  • 如果须要抉择紧接在另一个元素后的元素,而且二者有雷同的父元素,能够应用相邻兄弟选择器(Adjacent sibling selector)。

属性选择器

选择器 性能形容
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中蕴含指定词汇的元素。
[attribute\ =value] 用于选取带有以指定值结尾的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值结尾的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute=value*] 匹配属性值中蕴含指定值的每个元素。

如果心愿抉择有某个属性的元素,而不管属性值是什么,能够应用简略属性选择器:

a[href] {}

还能够依据多个属性进行抉择,只需将属性选择器链接在一起即可:

a[href][title] {}

除了抉择领有某些属性的元素,还能够进一步放大抉择范畴,只抉择有特定属性值的元素:

a[href='www.abc.com'] {}

也能够把多个属性 - 值选择器链接在一起来抉择一个文档:

a[href="www.abc.com"][title="abc"] {}

伪类选择器

动静伪类选择器

选择器 类型 性能形容
E:link 链接伪类选择器 抉择匹配的 E 元素,而且匹配元素被定义了超链接并未被拜访过。罕用于链接锚点上
E:visited 链接伪类选择器 抉择匹配的 E 元素,而且匹配元素被定义了超链接并已被拜访过。罕用于链接锚点上
E:active 用户行为选择器 抉择匹配的 E 元素,且匹配元素被激活。罕用于链接锚点和按钮上
E:hover 用户行为选择器 抉择匹配的 E 元素,且用户鼠标停留在元素 E 上。
E:focus 用户行为选择器 抉择匹配的 E 元素,而且匹配元素获取焦点

指标伪类选择器

选择器 性能形容
E:target 抉择匹配 E 的所有元素,且匹配元素被相干 URL 指向

UI 元素状态伪类选择器

选择器 类型 性能形容
E:checked 选中状态伪类选择器 匹配选中的复选按钮或者单选按钮表单元素
E:enabled 启用状态伪类选择器 匹配所有启用的表单元素
E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素

构造伪类选择器

选择器 性能形容
E:first-child 作为父元素的第一个子元素的元素 E。与 E:nth-child(1)等同
E:last-child 作为父元素的最初一个子元素的元素 E。与 E:nth-last-child(1)等同
E:root 抉择匹配元素 E 所在文档的根元素。在 HTML 文档中,根元素始终是 html,此时该选择器与 html 类型选择器匹配的内容雷同
E F:nth-child(n) 抉择父元素 E 的第 n 个子元素 F。其中 n 能够是整数(1,2,3)、关键字(even,odd)、能够是公式(2n+1), 而且 n 值起始值为 1,而不是 0.
E F:nth-last-child(n) 抉择父元素 E 的倒数第 n 个子元素 F。此选择器与 E:nth-child(n)选择器计算程序刚好相同,但应用办法都是一样的,其中:nth-last-child(1)始终匹配最初一个元素,与 last-child 等同
E:nth-of-type(n) 抉择父元素内具备指定类型的第 n 个 E 元素
E:nth-last-of-type(n) 抉择父元素内具备指定类型的倒数第 n 个 E 元素
E:first-of-type 抉择父元素内具备指定类型的第一个 E 元素,与 E:nth-of-type(1)等同
E:last-of-type 抉择父元素内具备指定类型的最初一个 E 元素,与 E:nth-last-of-type(1)等同
E:only-child 抉择父元素只蕴含一个子元素,且该子元素匹配 E 元素
E:only-of-type 抉择父元素只蕴含一个同类型子元素,且该子元素匹配 E 元素
E:empty 抉择没有子元素的元素,而且该元素也不蕴含任何文本节点

否定伪类选择器

选择器 性能形容
E:not(F) 匹配所有除元素 F 外的 E 元素

总结

CSS 能够说是前端的基本技能,心愿咱们都可能通过 CSS 为本人绘制色彩缤纷的前端生涯!

~

~

~ 本文完

学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!

大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!

常识与技能并重,内力和外功兼修,实践和实际两手都要抓、两手都要硬!

正文完
 0