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标签的伪类选择器是专门用来修 ...
随机推荐
- DotNetCore跨平台~System.DrawingCore部署Linux需要注意的
回到目录 你在windows上使用图像组件没有任务问题,但部署到linux之后,将注意以下几点: 安装nuget包ZKWeb.System.Drawing 项目里还是引用System.DrawingC ...
- 嵌套查询别名必须性示例。HAVING用法
HAVING的一个重要作用: SELECT子句有统计函数嵌套时SELECT子句不能出现GROUP BY列,如果需要显示此列可以把嵌套的统计函数写成子查询放在HAVING子句中. 可用HAVING简化语 ...
- Html中行内元素有哪些?块级元素有哪些?
1.关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...
- Data Base mongodb driver2.5环境注意事项
mongodb driver2.5环境注意事项 一.问题: 如果使用vs2012开发就会报这个错误: 未能加载文件或程序集“System.Runtime.InteropServices.Runtime ...
- ionic环境配置及问题
ionic是什么? 其实就是一款用于开发web app的开源免费框架,和国产的MUI差不多. 官网:https://ionicframework.com/ 必备条件: 安装Node.js 安装Java ...
- Java用代码获取classes目录下的文件的方式
假设我们有个Maven的Web项目,其中有src/main/java和src/main/resources两个输出目录(注意这两个目录下的内容运行后都会输出到classes目录下), 而在src/ma ...
- mac上虚拟机安装旧版本的macosx 10.8
前言 由于测试的需要,需要10.8的macosx,但又不想降级自己mac版本,所以还是装虚拟机,Parallels Desktop试验了安装不了osx,就换VMware Fusion,发现是可以的. ...
- Linux下防火墙配置
查看防火墙的状态:/etc/init.d/iptables status 或 service iptables status 1) 临时生效,重启后复原 开启: service iptab ...
- 冲顶大会APP技术选型及架构设计
我在1月4日看到虎嗅推送"王思聪撒币"的消息,然后开始推敲背后技术.其中涉及直播流.实时弹幕.OAuth2.0开放授权.SMS api.Push网关.支付接口等业务,其技术实现并不 ...
- VMware_ubuntu设置共享文件夹
1. 点击安装VMware tools 2.将/media/vmtool的压缩包复制到/home/pc/vm_tool下,应为原路径在root权限下竟然也是只读的,并且无法更改. 3.进入/home/ ...