2天驾驭div+css_老婆竟然只知道几个css伪类,不行得惩罚她了
最近在教我老婆学习前端,她说想要学习前端,自己在家赚点外快,自己赚点家用。我也拗不过她,而且其实我也挺佩服的。所以就教她了。最近我想考一考她对css中伪类的了解,所以就问了她了解css多少个伪类,伪类是什么?
她说css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。
我点了点头,答得不错继续。
然后她慢慢的说了几个常用的伪类元素,答得还不错,但是她掌握的伪类还是太少了。所以我让她将接下来我说的css伪类给我写99遍,加上例子。
::first-line
| 选择文本的第一行
::first-line
伪元素在某块级元素的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。
::first-line
伪元素只能在块容器中,所以,::first-line
伪元素只能在一个display
值为block
, inline-block
, table-cell
或者 table-caption
中有用。在其他的类型中,::first-line
是不起作用的。
用法如下:
p:first-line {color: lightcoral;}
::first-letter | 选择这一行的第一字
CSS 伪元素 ::first-letter
会选中某块级元素第一行的第一个字母。用法如下:
<style>p::first-letter{color: red;font-size: 2em;}</style><p>老婆,好好学。加油!,我永远在你身边</p>
::selection
| 被用户高亮的部分
::selection
伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。
div::selection {color: #409EFF;}
:root
| 根元素
:root
伪类匹配文档树的根元素。对于 HTML 来说,:root
表示 ``元素,除了优先级更高之外,与 html 选择器相同。
在声明全局 CSS 变量时 :root
会很有用:
:root {--main-color: hotpink;--pane-padding: 5px 42px;}
:empty
| 仅当子项为空时才有作用
:empty
伪类代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格),注释或处理指令都不会产生影响。
div:empty {border: 2px solid orange;margin-bottom: 10px;}<div></div><div></div><div></div>
只有第一个和第二个div
有作用,因为它们确实是空的,第三个 div
没有作用,因为它有一个换行。
:only-child
| 只有一个子元素才有作用
:only-child
匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child
或者:nth-child(1):nth-last-child(1)
,当然,前者的权重会低一点。
p:only-child{background: #409EFF;}<div><p>第一个没有任何兄弟元素的元素</p></div><div><p>第二个</p><p>第二个</p></div>
:first-of-type
| 选择指定类型的第一个子元素
:first-of-type
表示一组兄弟元素中其类型的第一个元素。
.innerDiv p:first-of-type {color: orangered;}
上面表示将 .innerDiv
内的第一个元素为 p
的颜色设置为橘色。
<div class="innerDiv"><div>Div1</div><p>These are the necessary steps</p><p>hiya</p><p>Do <em>not</em> push the brake at the same time as the accelerator.</p><div>Div2</div></div>
:last-of-type
| 选择指定类型的最后一个子元素
:last-of-type
CSS 伪类 表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。当代码类似Parent tagName:last-of-type
的作用区域包含父元素的所有子元素中的最后一个选定元素,也包括子元素的最后一个子元素并以此类推。
.innerDiv p:last-of-type {color: orangered;}
上面表示将 .innerDiv
内的的最后一个元素为 p
的颜色设置为橘色。
nth-of-type()
| 选择指定类型的子元素
:nth-of-type()
这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n
来筛选出在一组兄弟节点的位置。
.innerDiv p:nth-of-type(1) {color: orangered;}<div class="innerDiv"><div>Div1</div><p>These are the necessary steps</p><p>hiya</p><p>Do <em>not</em> push the brake at the same time as the accelerator.</p><div>Div2</div></div>
:nth-last-of-type()
| 在列表末尾选择类型的子元素
:nth-last-of-type(an+b)
这个 CSS 伪类 匹配那些在它之后有 an+b-1
个相同类型兄弟节点的元素,其中 n
为正值或零值。它基本上和 :nth-of-type
一样,只是它从结尾处反序计数,而不是从开头处。
.innerDiv p:nth-last-of-type(1) {color: orangered;}
这会选择innerDiv
元素中包含的类型为p
元素的列表中的最后一个子元素。
<div class="innerDiv"><p>These are the necessary steps</p><p>hiya</p><div>Div1</div><p>Do the same.</p><div>Div2</div></div>
:link
| 选择一个未访问的超链接
:link
伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接,包括那些已经给定了其他伪类选择器的链接(例如:hover
选择器,:active
选择器,:visited
选择器)。
为了可以正确地渲染链接元素的样式,:link
伪类选择器应当放在其他伪类选择器的前面,并且遵循LVHA的先后顺序,即::link
— :visited
— :hover
— :active
。:focus
伪类选择器常伴随在:hover伪
类选择器左右,需要根据你想要实现的效果确定它们的顺序。
a:link {color: orangered;}<a href="/login">Login<a>
:checked
| 选择一个选中的复选框
:checked
CSS 伪类选择器表示任何处于选中状态的radio(), **checkbox** (
) 或("select") 元素中的option HTML元素("option")。
input:checked {box-shadow: 0 0 0 3px hotpink;}<input type="checkbox" />
:valid
| 选择一个有效的元素
:valid
CSS 伪类表示内容验证正确的或其他
元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
input:valid {box-shadow: 0 0 0 3px hotpink;}
:invalid
| 选择一个无效的元素
:invalid
CSS 伪类 表示任意内容未通过验证的或其他
元素。
input[type="text"]:invalid {border-color: red;}
:lang()
| 通过指定的lang
值选择一个元素
:lang()
CSS 伪类基于元素语言来匹配页面元素。
/* 选取任意的英文(en)段落 */p:lang(en) {quotes: '201C' '201D' '2018' '2019';}
:not()
| 用来匹配不符合一组选择器的元素
CSS 伪类 :not()
用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。
来看一个例子:
.innerDiv :not(p) {color: lightcoral;}<div class="innerDiv"><p>Paragraph 1</p><p>Paragraph 2</p><div>Div 1</div><p>Paragraph 3</p><div>Div 2</div></div>
Div 1
和 Div 2
会被选中,p
不会被选 中。
终于说完了,其实在说到一半的时候,我也不想说了,因为太累了,我也还有自己的工作没有做完。但是看到老婆这么认真的听着,记笔记。我还是继续说了下去,并且最后还是让她抄了99遍,她也义无反顾的去抄了。我的天,竟然这么听话,我太感动了。总感觉对她太苛刻了,大家觉得我做的对么?
如果你觉得这篇文章不错,请别忘记点个赞
跟关注
哦~,也谢谢大家对我的支持与帮助。我会继续努力创作好的文章的
2天驾驭div+css_老婆竟然只知道几个css伪类,不行得惩罚她了相关推荐
- 面试了一个2年程序员,竟然只会curd,网友神回复!
要说现在热门的编程语言,大多数程序员都会说Java,Python,JS,PHP等,但Java应该是这其中应用最广泛的.但从各招聘信息上来看,Java程序员的薪资也是从最低4k月薪到高达百万年薪不等,从 ...
- 测试相机的软件叫什么,我们测试了6款自拍软件,B612竟然只排第二?
原标题:我们测试了6款自拍软件,B612竟然只排第二? #百科全输# 在好奇心面前,探究一切 看着朋友圈里的端午摄影大赛,T酱发现了放假的终极意义:换个地方自拍. 尽管小长假已经过去了两天,希望接下来 ...
- 推荐一本前端学习的好书-《2天驾驭DIV+CSS》
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53410299 本文出自[我是干勾鱼的博客] 一位前端开发的同事推荐了一本不错的书 ...
- css表格表头对角线,用div+css模拟类excel表格对角线(斜线)
我们先看html代码吧 用div+css模拟类excel表格对角线(斜线) 科目 姓名 数学 语文 张三 92 62 李四 91 67 第一种写法 css如下 * { padding: 0; marg ...
- CSS_伪元素_伪类
版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/twilight_karl/article/details/55804090 伪类 link 未访问的链接 ...
- html新增伪类,CSS3新增的伪类有哪些 与 居中div的多种方法
CSS3新增伪类有那些? p:first-of-type:选择属于其父元素的首个 元素 p:last-of-type:选择属于其父元素的最后 元素 p:only-of-type:属于父元素的特定类型的 ...
- html盒子在始终在左侧,div盒子在一行方法(左中右结构 CSS布局)
div盒子在一行的css布局方法 默认情况下div盒子是独占一行的,设置css宽度依然div盒子也独占一行,那么如何使用css让div盒子在一行呢? div排成一排方法有二,第一种采用css floa ...
- WEB安全之DIV CSS基础(二):文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性 文字属性 文本属性 列表样式和伪类超链接 项目符号列举 设置列表项标记 超链接 文字和文本的属性 文字 ...
- css_复合选择器_border_css层叠性与覆盖性_background_多标记构图法_行高_文本修饰属性_超链接的伪类_导航制作_Unit_4;
Topic 1 : 复合选择器: 后代选择器: 一个空格表示包含(嵌套)关系,不管空格前后是哪种基础选择器,只要有空格就是后代选择器 1 /*ul li{ background:gre ...
最新文章
- Android - 下载别人的android demo 运行的时候加载很久问题处理
- SVG配电站接线系统绘制
- YOLOv2/YOLO9000 《YOLO9000: Better, Faster, Stronger》论文笔记
- RS485数据光端机产品特点及技术参数介绍
- selenium+chromeheadless爬取网站
- android gridview行分割线,Android中控件GridView实现设置行列分割线的方法示例
- mysql中find_in_set()函数的使用(转载)
- 向量自回归模型(VAR)及其R语言实现
- 港口信息化、智能化、自动化产品设计想法---5
- 学计算机物理去戴维斯还是伦斯勒理工学院好,为什么伦斯勒理工学院评价那么高?...
- 不服来试试,Excel中被吹上天的Ctrl+E,到底有多厉害?
- 从zotero文献集中批量导出PDF的方法
- 【MindMapper2008】选中文字自动生成节点
- Netty in Action 读书
- centos7开机启动进入紧急模式emergency mode
- 量子计算机与易经,易经卦象的演化过程,就是一个量子计算机模型
- Docker也被禁了,Oracle还远吗?
- java计算自己从出生到现在过了多少天
- 后台框架--HUI 的学习跟使用1
- 安全删除Windows XP SP2的四种方法(转)
热门文章
- [luogu2286][HNOI2004]宠物收养场【平衡树】
- 【.NET】SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM之间
- js正则表达式匹配字符串与优化过程
- 手写一个机器学习的入门算法-感知器算法
- 选择 Java 编写 iOS 与 安卓 App的八大理由
- Clay:易塑的c#动态对象——第一部分:为什么我们需要它
- 招聘ASP.net高级Web开发工程师
- 多线程编程(14) - 多线程同步之 WaitableTimer (等待定时器对象)
- 52 -算法 -数据结构类 Leetcode26 删除有序数组中的重复项
- Python中真的是能使用元组的地方尽量不使用列表吗?