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中已经定义好的伪元素使用的选择器，在CSS中主要有如下四个伪元素选择器：

(1)first-line伪元素选择器

p:first-line{color:#0000FF};

</style>

(2)first-letter伪元素选择器

向某个元素中的文字的首字母（欧美文字）或第一个字（中日等汉字）使用样式。

p:first-letter{color:#0000FF};

</style>

(3)before伪元素选择器

before伪元素选择器拥有在某个元素之前插入一些内容，使用方法如下：

元素:before{

content:""

}

li:before{content:"hello"}

</style>

(4)after伪元素选择器

li:after{

content:"hello";

font-size:12px;

color:red;

}

</style>

转载于:https://www.cnblogs.com/wyaocn/p/5836445.html

CSS中伪类选择器及伪元素相关推荐

web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
伪类选择器和伪元素选择器详解
来自up主老橘长 "浪漫的不是海,是吹海风的我们" 结构伪类选择器和伪元素选择器结构伪类选择器关于E:nth-child(n) 伪元素选择器伪类就是假的类伪元素来一个来链 ...
伪类选择器和伪元素选择器
我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下: 伪类选择器: 伪类选择器很简单的理解就是在某种特殊的状态下的样式,比如说&quo ...
理解伪类选择器与伪元素选择器
1. 两个选择器的异同: 伪类选择器是用来向某些选择器来添加效果.不修改DOM内容,通过一些特定的选择器根据特定的状态.特定条件来修改元素的杨氏.比如:悬停(hover).点击(active)以及文档 ...
伪类选择器与伪元素选择器的区别
Hello,小可爱们,今天我们一起来区分一下伪类选择器跟伪元素选择器吧! 伪类选择器与伪元素选择器在名字上很相似,所以对于初学者来说,很容易混淆它们,区别不开,其实两者在作用上还是有本质的区别的,只要 ...
html中结构伪类选择器,结构伪类选择器
属性选择器元素的属性,我们都知道是什么.例如下面代码中type和value就是input元素的属性.属性选择器,顾名思义,就是通过属性来选择元素的一种方式. 属性选择器说明 E[attr^=&qu ...
属性选择器、结构伪类选择器、伪元素选择器
选择器一.属性选择器 1.E[att] 作用为:选择具有att属性的E元素. 2.E[att= "val"] 作用为:选择具有att属性,且属性值等于val的E元素:属性等于值. ...

CSS中伪类选择器及伪元素

CSS中伪类选择器及伪元素相关推荐

最新文章

热门文章