共计 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 为本人绘制色彩缤纷的前端生涯!
~
~
~ 本文完
学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!
大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!
常识与技能并重,内力和外功兼修,实践和实际两手都要抓、两手都要硬!
正文完