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标签的伪类选择器是专门用来修 ...
随机推荐
- Javascript之模拟文字高亮
在我们平时浏览网页的时候,我们常常会用到Ctrl+F(搜索)功能,被搜索到的文字就是高亮显示.那么,如何在Javascript中模拟文字高亮显示这一功能呢? 以下为笔者写的样例代码: <!DOC ...
- 【java】io流之字节输入流:java.io.InputStream类及子类java.io.FileInputStream
package 文件操作; import java.io.File; import java.io.FileInputStream; import java.io.IOException; impor ...
- iOS SVN出现的问题,在mac使用Cornerstone中无法提交提交失败处理。。。
问题一: Description : An error occurred while contacting the repository. Suggestion : The server may be ...
- 【Zookeeper】源码分析之服务器(一)
一.前言 前面已经介绍了Zookeeper中Leader选举的具体流程,接着来学习Zookeeper中的各种服务器. 二.总体框架图 对于服务器,其框架图如下图所示 说明: ZooKeeperServ ...
- 4.sass的分支结构、循环结构、函数
分支结构 在sass里,可以使用@if让我们根据一些条件来应用特定的样式 结构: @if 条件 { } 如果条件为真的话,括号里的代码就会释放出来 例如: $use-refixes:true; .ro ...
- Dubbo(一) 开始认识Dubbo,分布式服务框架
引言: 以前的车马很慢,一生只够爱一个人以前的网站人很少,一个单应用服务着一个人--------------------现在,动不动就谈什么高并发,千万级访问.单应用?BOOM!分分钟爆炸.于是,技术 ...
- 解决openssh漏洞,升级openssh版本
关于解决漏洞的问题我就不详说了,主要就是升级版本.这里我们就直接简单记录下步骤: 1.升级 使用root用户登录系统进入到/home/guankong ,上传openssh-6.6p1.tar.gz到 ...
- PHP Session的优化使用
前言 首先说一下,原版session实际并不是很烂,如果你的项目不是高并发项目,完全可以使用原版session. PHP默认的session是以文件形式保存在本地磁盘上的,每次访问实际就是一次io操作 ...
- mysql change master导致gtid丢失
change master导致gtid丢失从innobackupex恢复导致binlog的拉取位置会导致主备gtid不一致.此类错误通过构造空事务方式无法修复.此时就需要change master 方 ...
- java inputstream to string
https://stackoverflow.com/questions/309424/read-convert-an-inputstream-to-a-string 过千赞的答案