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>
