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伪类和伪元素在项目中的使用-红色*显示的更多相关文章

  1. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  2. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  3. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  4. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  5. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  6. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  7. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  8. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  9. 详解 CSS 属性 - 伪类和伪元素的区别（再也不用概念盲了！！！）

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  10. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

随机推荐

  1. VEGA：诺亚AutoML高性能开源算法集简介

    摘要:VEGA是华为诺亚方舟实验室自研的全流程AutoML算法集合,提供架构搜索.超参优化.数据增强.模型压缩等全流程机器学习自动化基础能力. 本文分享自华为云社区<VEGA:诺亚AutoML高 ...

  2. JS的深浅复制，原来如此！

    摘要:之所以会出现深浅拷贝的问题,实质上是由于JS对基本类型和引用类型的处理不同. 本文分享自华为云社区<js的深浅复制,一看就明白>,作者: 鑫2020. 浅复制的意思 浅复制是仅仅对数 ...

  3. 从java到JavaScript(2)：对比Java/Go/Swift/Rust看Dart

    Dart与Java的一些直观区别 Dart和java以及C#都差不多,基本上不用学习可以直接使用,从这里可以你可以了解Dart有些特别之处.其实对于Java开发人员来说Dart,还是相对好理解的 基本 ...

  4. 从 Uber 数据泄露事件我们可以学到什么？

    Uber 数据泄露始于一名黑客从暗网市场购买属于一名 Uber 员工的被盗凭证.最初尝试使用这些凭据连接到 Uber 的网络失败,因为该帐户受 MFA 保护.为了克服这一安全障碍,黑客通过 What' ...

  5. 10亿数据、查询<10s，论基于OLAP搭建广告系统的正确姿势

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   由于流量红利逐渐消退,越来越多的广告企业和从业者开始探索精细化营销的新路径,取代以往的全流量.粗放式的广告轰炸 ...

  6. 火山引擎 VeDI 推出这款产品 助力企业实现以“人”为中心的数据洞察

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 CDP(Customer Data Platform,客户数据平台)市场将迎来新一轮的高速增长. 国际数据公司(以 ...

  7. 火山引擎ByteHouse助力中国地震台网中心，快速构建一站式实时数仓

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 近日,中国地震台网中心与火山引擎达成合作,双方将围绕 ByteHouse 实时数仓展开合作. 中国地震台网中心为中国地震局 ...

  8. NOKOV动作捕捉系统使多场协同无人机自主建造成为可能

    近年来,工业机器人的兴起使得建造的效率和安全性得以提升,但由于机器人由于大小与活动范围的限制,在大型建筑上难以施展拳脚.上海同济大学建筑系的无人机自主建造小组,正在进行以无人机取代工业机器人进行空中建 ...

  9. 悲报， GIF 之父因新冠去世

    今天下午二狗子照常上班摸鱼的时候,突然看到了一则消息,消息说 GIF 的发明人因新冠去世了.作为一个自诩理性的互联网人,二狗子第一反应是看到了一个离谱谣言,可是查看了多方消息后,二狗子难过地发现这是真 ...

  10. CSS Sticky Footer 几种实现方式

    项目里,有个需求,登录页,信息,需要使用到sticky footer布局,刚好,巩固下这个技术: 核心代码: 播客: https://www.jb51.net/css/676798.html 视频:h ...