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伪元素选择器
<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中伪类选择器及伪元素的更多相关文章
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- CSS选择器之伪类选择器(伪元素)
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- 如何使用CSS3中的结构伪类选择器和伪元素选择器
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...
- CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...
随机推荐
- redis集群配置,spring整合jedis,缓存同步
前台的商品数据(图片等加载缓慢)查询,先从redis缓存查询数据. redis是一个nosql数据库,内存版数据库,读取速度11w/s.本身具有内存淘汰机制,是单线程服务器(分时操作系统),线程安全. ...
- nginx日常维护常用命令
http://www.jb51.net/article/47750.htm 一.简明nginx常用命令 1. 启动 Nginx poechant@ubuntu:sudo ./sbin/nginx 2. ...
- Python3 将txt数据转换成列表,进行排序,筛选
Python 程序员需要知道的 30 个技巧 首先是数据: 将上边的四个数据分别写在新建的txt文件中 1.将txt数据转为列表 with open('james.txt') as jaf: data ...
- iOS 获取当前应用的信息以及用户信息:版本号手机号手机型号
NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; CFShow(infoDictionary); // ap ...
- hibernate核心API使用
1.Configuration 加载核心配置文件,核心配置文件名称和位置固定,否则会找不到 2.SessionFactory对象一个项目只创建一个,大家公用 根据配置文件和映射关系创建表 由于要创建表 ...
- Expression Blend4安装破解
先在官网上下载Expression Blend4试用版 首先进入微软下载中心,http://www.microsoft.com/zh-cn/download/default.aspx: 搜索Expre ...
- date 命令详解
date - print or set the system date and time Display the current time in the given FORMAT, or set th ...
- ln 命令详解
ln 命令 作用:它的功能是为某一个文件在另外一个位置建立一个同步的链接 参数:必要参数: -b 删除,覆盖以前建立的链接 -d 允许超级用户制作目录的硬链接 -f 强制执行 -i 交互模式, ...
- shell 踩坑记
变量赋值时,等号两边不能有空格: 在判断表达式中,不论是 [ -n "$1" ] 还是 [ -f "$1" ] 都要在变量两侧加上双引号: 在使用与或非判断式 ...
- MySQL小抄
以下是MySQL5.7中的一些tips&tricks(持续更新中): Use of an unqualified * with other items in the select list m ...