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标签的伪类选择器是专门用来修 ...
随机推荐
- 4.python迭代器生成器装饰器
容器(container) 容器是一种把多个元素组织在一起的数据结构,容器中的元素可以逐个地迭代获取,可以用in, not in关键字判断元素是否包含在容器中.通常这类数据结构把所有的元素存储在内存中 ...
- 【批处理】IF ERRORLEVER语句顺序注意
@echo off dir d:\dddddd if errorlevel 1 goto 1 if errorlevel 0 goto 0 rem 两行if语句不可交换位置,否则失败了也会显示成功. ...
- Panel控件的使用
我们对控件进行分组的原因不外乎三个: 1.为了获得清晰的用户界面而将相关的窗体元素进行可视化分组. 2.编程分组,如对单选按钮进行分组. 3.为了在设计时将多个控件作为一个单元来移动. 在vb.net ...
- HTML基本功之文档结构
项目名 首页 命名为 index.html 样式文件夹 命名为 css /*用来放样式文件*/ base.css /*基本样式*/ index.css /*首页样式*/ global.css /* ...
- SVN添加用户权限
点击properties
- JavaScript的DOM编程--09--节点的替换
节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,o ...
- MySQL数据库学习: 02 —— 数据库的安装与配置
MySQL安装图解 一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行“setup. ...
- NOI 2005维护数列
题目描述 请写一个程序,要求维护一个数列,支持以下 6 种操作:(请注意,格式栏 中的下划线‘ _ ’表示实际输入文件中的空格) 输入输出格式 输入格式: 输入文件的第 1 行包含两个数 N 和 M, ...
- 房上的猫:经典排序算法 - 冒泡排序Bubble sort
原理是临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换,这样一趟过去后,最大或最小的数字被交换到了最后一位,然后再从头开始进行两两比较交换,直到倒数第二位时结束,以此类推例子为从小到大排 ...
- 前端学习_01_css网页布局
引子 之前也自己陆陆续续地学了一些web方面的知识,包括前段和后端都有涉及到,自己也比较感兴趣,感谢peter老师,愿意无偿提供从零开始的教学,之前也看过peter老师的一些视频,节奏非常适合我,决心 ...