css伪类和伪元素在项目中的使用-红色*显示

编程之家收集整理的这篇文章主要介绍了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伪类和伪元素在项目中的使用-红色*显示所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的CSS相关文章

有时,你需要修改第三方组件的CSS; 然而你直接修改是不可以的, 但是我们非要去修改第三方的组件; 此时可以使用==》深层选择器 &gt;&gt;&gt; /deep/ ::v-deep 可以帮助你。
CSS使用伪类给表单添加星号 &lt;style type=&quot;text/css&quot;&gt; .form-item label::before { content: &#39;*&#3
1.display的常见现象 我们很多人都知道,display可以让元素实现隐藏或者显示。 或者让行级元素变成块级元素。 对它的认识也是比较准确的。 如果一个元素使用了display:none; 那么
1.visibility: hidden/visible与dispaly:none 有些人简单的认为display: none;和visibility: hidden; 这两个属性的区别在于前者隐藏后
在hover时,i元素变成了块级元素; 导致这两个元素各自占了一行; 最终导致样式错乱; &lt;div class=&quot;demo&quot;&gt; &lt;!-- 添加图标 和 编辑图标
``` 保存 //按钮的字体色是白色.save-btn /deep/ span{ color: #fff;}.save-btn:hover{ background: #409EFF;}.save-bt
今天大家在浏览B站,腾讯视频,等网站时,有没有发现一个现象,网站变成灰色的了。 是不是跟平常不一样了呢,这是因为今天(2020.4.4)是全国哀悼日, 所以网站这些就变成灰色的呢。 我去看了一下腾讯的
重绘:当元素的一部分属性发生改变, 如背景、颜色等不会引起布局变化, 只需要浏览器根据元素的新属性重新绘制, 使元素呈现新的外观叫做重绘。 重排(回流):当render树中的一部分或者全部因为大小边距
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注