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伪元素选择器

<style type=text/css>

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

</style>

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

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

<style type=text/css>

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

</style>

(3)before伪元素选择器

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

元素:before{

content:""

}

<style type="text/css">

li:before{content:"hello"}

</style>

(4)after伪元素选择器

<style type="text/css">

li:after{

content:"hello";

font-size:12px;

color:red;

}

</style>

CSS中伪类选择器及伪元素的更多相关文章

  1. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  2. css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  3. CSS选择器之伪类选择器(伪元素)

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  4. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  5. 如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...

  6. 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  7. python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)

    11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...

  8. CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  9. a标签伪类选择器以及伪元素:hover的案例

    1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...

随机推荐

  1. 【MySQL】查看字符集对应的校对规则show collation like 'gbk%';

  2. loadrunner设置分压机 压力测试

    压力机设置分压机使用场景: 当本地主机内存较小,运行速度较慢,压力较大等多种需求场景下,可以使用分压机. 一.将另一台机器设置为压力机 1,开始菜单找到HP LoadRunner-->Advan ...

  3. C图形库Easyx的使用

    学习Eaxy X图形库后我的成果: 花了一周时间做出并完善了Flappy Bird,目前功能如下: 1. 背景的显示 2. 加入小鸟image 3. 小鸟自由下落,按空格键/鼠标右键后上升 4. 加入 ...

  4. 一些常用的vim编辑器快捷键:

    一些常用的vim编辑器快捷键: h」.「j」.「k」.「l」,分别控制光标左.下.上.右移一格. 按「ctrl」+「b」:屏幕往“后”移动一页. 按「ctrl」+「f」:屏幕往“前”移动一页. 按「c ...

  5. UWP 应用通知Notifications

    之前说UWP 使用OneDrive云存储2.x api(二)[全网首发],微识别实现了上传下载的功能,那么为了给用户更上一层楼的体验,那就是在上传下载完成之后,弹出一通知Notifications. ...

  6. Another option for file sharing(转)

    原文地址  https://security.googleblog.com/2017/02/another-option-for-file-sharing.html Another option fo ...

  7. Centos7上安装使用locate

    centos7上默认没有locate命令,需先安装locate yum install mlocate 注意是mlocate,如果是yum install locate系统会提示没有安装包 安装完成后 ...

  8. OA常见问题和解决方案

    本文档:主要用来记录OA常见的问题和解决方案. (一)更新问题(登陆不了,或者登陆出错) 由于很多用户使用的是XP系统,导致每次进行OA进行升级的时候,他们都不支持自动升级.如果不支持自动升级的话,那 ...

  9. Python学习_03_列表、元组、字符串

    列表.元组.字符串这些通过顺序访问的对象统称为序列. 序列的标准操作符 对于一般的序列对象,包括列表.元组.字符串,都具有以下的标准操作: 1. element [not] in seq判断一个元素是 ...

  10. Zabbix 单位换算

    直接举一例子,然后再举一反三: 如图: 单位B 则基数为1024(倍数) 我性能参数为KB单位,我们则把单位转换成和我们计数器 保持一致的单位即可,一致后,zabbix 后面会自己准换成自己想要的显示 ...