css伪类和伪元素在项目中的使用-红色*显示
CSS使用伪类给表单添加星号
<style type="text/css">
.form-item label::before {
content: '*';
color: #e54d42;
}
</style>
<form>
<div class="form-item">
<label for="requestlabel">必填项:</label>
<input type="text" id="requestlabel" />
</div>
</form>
什么是伪类？
伪类用于:定义元素的【特殊状态】。
例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
什么是伪元素？
CSS 伪元素用于:设置元素指定【部分的样式】。
例如，它可用于：
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容 [运用在label标签的*号变红色]
display: inline-block;
使用伪元素向文本的首行添加特殊样式
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
<p>您可以使用 ::first-line 伪元素将特殊效您可以使用 ::first-line 伪元素将特殊效您可以使用 ::first-line 伪元素将特殊效</p>
注意点
ps==>::first-line 伪元素只能应用于块级元素。
伪元素和为伪类的区别
请注意双冒号表示法 - ::first-line 对比 :first-line
在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。
也就是说：伪元素和为伪类的区别并不大。
只是W3C 试图区分伪类和伪元素的尝试。
你使用单双冒号都可以实现同样的效果！
给第一个字添加上特殊的状态
<body>
<p>您——可以使用伪元素【::first-letter】为文本的第一个字符添加特殊效果！</p>
</body>
<style>
p::first-letter {
color: red;
font-size: 18px;
}
</style>
使用伪元素在文本上添加图片
<style>
h1::before {
content: url('./vue.png');
}
</style>
<h1>这是一个标题</h1>
<p>::before 伪元素在一个元素的内容之前插入内容。</p>
<h1>这是一个标题</h1>
选中的字符变色
<style>
::-moz-selection { /* 针对 Firefox 的代码 */
color: red;
background: pink;
}
::selection {
color: red;
background: pink;
}
</style>
<h1>请选择本页中的文本：</h1>
<p>这是一个段落。</p>
<div>这是 div 元素中的文本。</div>
<p>注释：Firefox 支持可供替代的 ::-moz-selection 属性。</p>
css伪类和伪元素在项目中的使用-红色*显示的更多相关文章
- 深入学习css伪类和伪元素及其用法
前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
- 详解 CSS 属性 - 伪类和伪元素的区别[转]
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- CSS的伪类和伪元素
伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...
- 详解 CSS 属性 - 伪类和伪元素的区别（再也不用概念盲了！！！）
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 《转载》详解 CSS 属性 - 伪类和伪元素的区别
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
随机推荐
- 【CVPR2022】用于域适应语义分割的域无关先验
摘要:本文给大家分享一篇我们在CVPR 2022 上发表的paper:Domain-Agnostic Prior for Transfer Semantic Segmentation.文章提出了一种图 ...
- 如何通过appuploader把ipa文件上传到App Store教程步骤
iOS APP上架App Store其中一个步骤就是要把ipa文件上传到App Store! 下面进行步骤介绍! 利用Appuploader这个软件,可以在Windows.Linux或Mac系统中 ...
- SEAL 0.3 正式发布：国内首个全链路软件供应链安全管理平台
12月1日,软件供应链安全管理平台 SEAL 0.3 正式发布(以下简称"SEAL"),这是国内首个以全链路视角保护软件供应链的安全管理平台.两个月前 SEAL 0.2 发布,该版 ...
- 差点错过！火山引擎VeDI帮这家企业成功挖掘200余条商机
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 与个体消费市场临时性需求大.决策参与人少等情况不同,企业消费市场往往因为长线需求复杂.商品/服务的价格高.参与决策 ...
- 网页“悼念模式”全站变灰/黑白色CSS代码
<style> html { filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(1 ...
- 【短道速滑六】古老的视频去噪算法（FLT_GradualNoise）解析并优化，可实现1920*1080 YUV数据400fps的处理能力。
这个好像没有啥对应的论文可以找到,在百度上搜索也能找到一些相关的资料,不过就直接是代码,可以看到其实来自于一个叫做DScaler的项目,在github上目前还能找到该项目的完整资料. 详见:https ...
- 深挖 Python 元组 pt.2
哈喽大家好,我是咸鱼 在<深挖 Python 元组 pt.1>中我们了解 Python 元组的一些概念(索引和切片等),以及如何创建元组,最重要的是我们还介绍了元组的不可变特性 那么今天我 ...
- vue配置proxy实现跨域
- P5731
https://www.luogu.com.cn/problem/P5731 这道题被标为红题,真实难度应该介于红题和橙题之间,问题在于我高估了它的难度,以为至少有橙题的难度,一般不打表的我毫不犹豫选 ...
- jmeter+badboy软件安装与使用
目录: 一.软件下载安装 1.软件下载 2.安装过程 3.安装完成后界面,默认是已经开启录制模式 二.操作使用 1.访问sougou 2.搜索:mrwhite2020 3.选择导出jmx格式 4.使用 ...