Comments (17)
CSS3 中规定伪类使用一个 :
来表示;伪元素则使用 ::
来表示。
CSS3 中新增的伪元素有以下这些:
:first-child / :last-child
表示子元素结构关系的:nth-child() / nth-last-child()
用来控制奇数、偶数行的(控制表单奇数、偶数行的样式):first-of-type / :last-of-type
表示一组兄弟元素中其类型的第一个元素 MDN:nth-of-type() / :nth-last-of-type()
这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN:root
html 根元素:not()
否定选择器,用的比较多:only-child
只有一个子元素时才会生效:empty
选择连空格都没有的元素
from fe-interview.
CSS3伪类 | 作用 |
---|---|
:root | 文档根元素,总是返回html |
:last-child, :only-child, :only-of-type | 文本的最后一个 / 唯一一个 / 指定类型的唯一一个 子元素 |
:nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), | 第n个 / 倒数第n个 / 指定类型的第n个 / 指定类型的倒数第n个 子元素 |
:enabled, :disabled | 启用 / 禁用 |
:checked | 已勾选 |
:default | 默认,例如radio group中默认选中的radio |
:valid, :invalid, :required, :optional, :in-range, :out-of-range | 校验有效 / 校验无效 / 必填 / 非必填 / 限定范围内 / 限定范围外的 input |
:not() | 括号内条件取反 |
:empty | 没有子元素的元素 |
:target | URL片段标识符指向的元素 |
from fe-interview.
from fe-interview.
CSS3 中规定伪类使用一个 : 来表示;伪元素则使用 :: 来表示。
CSS3 中新增的伪类有以下这些:
:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的(控制表单奇数、偶数行的样式)
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器,用的比较多
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素
from fe-interview.
CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态
伪类 | 作用 |
---|---|
:target | 代表一个唯一的页面元素(目标元素),其id 与当前URL片段匹配 |
:root | 匹配文档树的根元素。对于 HTML 来说,:root 表示 元素,除了优先级更高之外,与 html 选择器相同 |
:nth-child() | 首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序, 选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...) |
:nth-last-child() | 从兄弟节点中从后往前匹配处于某些位置的元素 和 :nth-child 基本一致, 但它是从结尾计数, 而不是从开始计数 |
:nth-of-type() | 针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置 |
:nth-last-of-type() | 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素,其中 n 为正值或零值 基本上和 :nth-of-type 一样,只是它从结尾处反序计数,而不是从开头处 |
:last-child | 代表父元素的最后一个子元素 |
:first-of-type | 表示一组兄弟元素中其类型的第一个元素 |
:last-of-type | 表示了在(它父元素的)子元素列表中,最后一个给定类型的元素 |
:only-child | 匹配没有任何兄弟元素的元素 |
:only-of-type | 代表了任意一个元素,这个元素没有其他相同类型的兄弟元素 |
:empty | 代表没有子元素的元素,子元素只可以是元素节点或文本(包括空格),注释或处理指令都不会产生影响。 |
:not() | 用来匹配不符合一组选择器的元素,由于它的作用是防止特定的元素被选中,它也被称为反选伪类 |
:enabled | 表示任何被启用的(如选择、点击或接受文本输入,或者能够获取焦点)元素 |
:disabled | 表示任何被禁用(不能被激活,如选择、点击或接受文本输入,或获取焦点)的元素 |
:checked | 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) |
:indeterminate | 表示状态不确定的表单元素 |
from fe-interview.
伪类 | 作用 |
---|---|
:root | 选择文档的根元素 |
:empty | 选择没有子元素的元素 |
:target | 选择当前活动的目标元素 |
:not(selector) | 选择除selector以外的元素 |
:enable | 选择可用的表单元素 |
:disable | 选择禁用的表单元素 |
:checked | 选择被选中的表单元素 |
:after | 在元素内部最后面添加内容 |
:before | 在元素内部最后面添加内容 |
:nth-child(n) | 匹配父元素指定子元素,所有子元素中排序第n |
:nth-last-child | 匹配父元素指定子元素,所有子元素中排序第n,从后向前 |
:nth-child(odd) | 匹配父元素指定子元素,所有奇数 |
:nth-child(even) | 匹配父元素指定子元素,所有偶数 |
:first-child | 匹配父元素的首个子元素 |
:last-child | 匹配父元素的最后一个子元素 |
:only-child | 匹配属于父元素中唯一子元素 |
:nth-of-type(n) | 匹配父元素下指定子元素,在同类子元素中排序第n |
:nth-last-of-type(n) | 匹配父元素下指定子元素,在同类子元素中排序第n,从后向前数 |
:selection | 选择被用户选取的元素部分 |
:first-line | 选择元素中的第一行 |
:first-letter | 选择元素中的第一个字符 |
from fe-interview.
目标元素
url种锚指向文档内某个具体的元素,这个被链接的元素就是目标元素
from fe-interview.
:not
:nth-child()
:first-child
:last-child
:disabled
:checked
:empty
:only-child
from fe-interview.
我用的不太多,常用的:last-child,:first-child,取最后一个元素和第一个元素,如果排除他们就用:not();
奇数列:nth-child(2n+1),偶数列:nth-child(2n);上面好多没用过的哈哈 学习了
from fe-interview.
first-of-type
last-of-type
only-of-type
only-child
nth-child()
nth-last-child()
nth-of-type()
nth-last-of-type()
last-child
empty
target
not
enabled
disabled
cheked
from fe-interview.
:first-of-type
选择属于其父元素的首个指定元素的每个指定元素。
:last-of-type
选择属于其父元素的最后指定元素的每个指定元素。
:only-of-type
选择属于其父元素唯一的指定元素的每个指定元素。
:only-child
选择属于其父元素的唯一子元素的每个指定元素。
:nth-child(2)
选择属于其父元素的第二个子元素的每个指定元素。
:enabled
、:disabled
控制表单控件的禁用状态。
:checked
单选框或复选框被选中。
from fe-interview.
目标元素
url种锚指向文档内某个具体的元素,这个被链接的元素就是目标元素
你是不走错片场了
from fe-interview.
CSS3 中新增的伪元素有以下这些:
:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的(控制表单奇数、偶数行的样式)
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器,用的比较多
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素
from fe-interview.
:root -- 选择文档的根元素,等同于html元素
:empty -- 选择没有子元素的元素
:target -- 选择当前活动的目标元素
:not(selector) -- 选择除selector元素以外的元素
:enabled -- 选择可用的表单元素
:disabled -- 选择禁用的表单元素
:checked -- 选择被选中的表单元素
:after -- 在元素内容最后面添加内容
:before -- 在元素内容最前面添加内容
:nth-child(n) -- 匹配父元素的第n个子元素
:nth-last-child(n), :nth-child(odd), :nth-child(even)
:first-child, :last-child
:nth-of-type(n) -- 匹配父元素下指定子元素,在同类子元素中排第n. :nth-last-of-type(n)
from fe-interview.
:not
:nth-child()
:first-child
:last-child
:disabled
:checked
:empty
:only-child
from fe-interview.
:nth-child(n) 选中父元素下的第n个子元素,n可以接受具体的数值,也可以是函数
:nth-last-child(n) 选中父元素下的第n个子元素,从后开始查找
:last-child 选中最有一个子元素
:only-child 选中父元素下唯一的子元素
:nth-of-type(n) 查找第n个标签的元素,可以为一个函数
:first-of-type 选中父元素下第一个类型的元素
:last-of-type 选中父元素下最后一个类型的元素
:only-of-type 选中父元素下只有一个类型的元素
:empty 选中不包含子元素和内容的元素
:target 选中当前活动的元素
:not 选中非这个元素的每一个元素
:enabled 控制表单控件的禁用状态
:disabled 控制表单的禁用状态
:checked 单选框和复选框被选中
from fe-interview.
:nth-child(n)和:nth-of-type(n)
这两个伪类可以使我们选择某个元素的第n个子元素或同类型元素,可用于实现页面布局或样式控制。
:not(selector)
:not伪类可以用来排除某些元素,只选择不符合条件的元素。
:checked
:checked可用于表单元素上,选择被选中的元素,常用于复选框和单选框上。
:target
:target可以选择当前活动的锚点,使其具有特殊的样式特效。
:first-child和:last-child
:first-child用于选择当前元素的第一个子元素,:last-child用于选择当前元素的最后一个子元素。
:before和:after伪类
:before和:after伪类可以在元素内容之前或之后插入内容。这些伪类通常用于添加一些特殊的视觉效果,如箭头,图标等等。使用时必须设置content属性,它可以包含纯文本或在before和after伪类内嵌套其他元素。
from fe-interview.
Related Issues (20)
- [angular] 第1803天 请说说在Angular中什么是服务和依赖注入(DI)?
- [angular] 第1804天 请说说路由和导航在Angular中如何工作的?
- [angular] 第1805天 请说说在Angular中如何实现表单验证?
- [angular] 第1806天 请说说观察者模式和RxJS在Angular中的应用
- [angular] 第1807天 请说说在Angular中的双向数据绑定是如何工作的?
- [angular] 第1808天 请说说在Angular中如何实现国际化(i18n)?
- [angular] 第1809天 如何在Angular中实现懒加载?
- [angular] 第1810天 如何在Angular中实现导航的控制和保护?
- [angular] 第1811天 请说说在Angular中什么是RxJS?
- [angular] 第1812天 请说说在Angular中的ngFor是什么?有哪些用途? HOT 1
- [angular] 第1813天 请说说在Angular中的路由器是什么?
- [angular] 第1814天 请说说在Angular中的ngSwitch是什么?有哪些用途?
- [angular] 第1815天 请说说在Angular中的组件是什么?
- [angular] 第1816天 请说说在Angular中什么是指令?有哪些类型的指令?
- [angular] 第1817天 请说说在Angular中的依赖注入是什么?
- [angular] 第1818天 请说说在Angular中的NgModule是什么?
- [angular] 第1819天 请说说在Angular中的可观察对象是什么?
- [angular] 第1820天 请说说在Angular中的路由器守卫是什么?它有哪些类型?
- [angular] 第1821天 请说说在Angular中的服务是什么?如何创建一个服务?
- [angular] 第1822天 请说说在Angular中的模板语法是什么?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.