CSS 3 中的伪类选择器

伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择。

选择器:伪元素{属性:值}

选择器.类名:伪元素{属性:值}

在CSS中，主要有如下四个伪元素选择器

1.first-line伪元素选择器用于向某个元素中的第一行使用样式。

2.first-letter伪元素选择器用于向某个元素中的文字的首字母或第一个中字使用样式。

3.before伪元素选择器用于在某个元素之前插入一些内容。

4.after伪元素选择器用于在某个元素之后插入一些内容。

时间： 2024-12-19 17:12:40

CSS 3 中的伪类选择器的相关文章

CSS3中的伪类选择器详解

类选择器和伪类选择器区别类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素我们把它放到这里 p.aaas{ text-align: left; color: red; } 它同样的会被选择最常见的伪类选择器未被访问的链接 a:link{ color: #ff6600 } /* 未被访问的链接 */ 我们来测试一下,我们给它添加一个超链接. 伪类选择器我们给这个伪类选择器,选定样式,第一种 a:link{ color: #000

HTML学习笔记 CSS块元素加伪类选择器第三节（原创）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> div { border: 1px solid red; width: 400px; height: 150px; font-size: 35px; } .temple2 { /*隐藏超出的区域*/ ove

CSS3中结构伪类选择器——root、not、empty、target选择器

1.root选择器将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="text/css"> :root{ background:yellow; } body{ background:green; } </style> 注意:不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面就全部变成了绿色. 2.not选择器如果想

CSS3中only-child伪类选择器

<body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ background:yellow; } </style> <h2>列表1</h2> <ul> <li>li1</li> </ul> <h2>列表2</h2> <ul> <li>

Wx-小程序中使用伪类选择器实现border-1px

.borders::before{ position: absolute; left: 0; top: 0; content: " "; width: 100%; height: 1px; border-top: 1px solid #ECECF0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);/*缩放*/ } 原

H5与CS3权威下.19 选择器（2）结构性伪类选择器

1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器:伪元素{属性:值} 选择器.类名:伪元素{属性:值} 2.css中常用的伪元素选择器 (1)first-line:向某元素中的第一行文字使用样式. eg: 1 <p>伪元素选择器 <br>类选择器</p> 1 p:first-line{background: pink;}

css3 :enabled与:disabled伪类选择器

css :enabled和:disabled伪类选择器在Web表单中,有些表单元素(如输入框.密码框.复选框等)有"可用"和"不可用"这2种状态.默认情况下,这些表单元素都处在可用状态. 在CSS3中,我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式. 语法: :disabled { style properties } :enabled { style properties } 如:我们为&quo

CSS中伪类选择器及伪元素

1.伪类选择器在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{color:#FF0000;text-decoration:none} a:active{color:#FF0000;text-decoration:none} 2.伪元素选择器伪元素选择器不是针对真

css中的伪类与伪元素选择器

伪类一.链接伪类(又叫锚点伪类) (1) :link:用于给a标签设置点击前的样式,:visited:用于给a标签设置鼠标点击后的样式,:hover:给a标签设置当鼠标移入时显示的样式,:active:给a标签设置当鼠标摁下时显示的样式由于a标签的:link和:visited可以覆盖a标签的所有状态,所以当:link,:visited,:hover,:active同时出现在a标签身上时,为了不让样式失效,:link和:visited只能放在:hover,:active之前. :link和:v