【CSS】伪类与伪元素
一伪类
语法:
selector : pseudo-class {property: value}
提示:伪类名称对大小写不敏感。
与 CSS类搭配使用
selector.class : pseudo-class {property: value}
例子:a:link{color: #FF0000} /* 未访问的链接 */a:visited{color: #00FF00} /* 已访问的链接 */a:hover{color: #FF00FF} /* 鼠标移动到链接上 */a:active{color: #0000FF} /* 选定的链接 */ 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪类们:
:visited 伪类 - 向已被访问的链接添加样式。
:link 伪类 - 向未被访问的链接添加样式。
:hover 伪类 - 当鼠标悬浮在元素上方时,向元素添加样式。
:active 伪类 - 向被激活的元素添加样式。
:first-child 伪类 - 选择元素的第一个子元素。
:focus伪类 - 向拥有键盘输入焦点的元素添加样式。
:lang 伪类 - 为不同的语言定义特殊的规则。
二 伪元素
语法:
selector:pseudo-element {property:value;}
提示:伪类名称对大小写不敏感。
与 CSS类搭配使用:
selector.class :pseudo-element{property: value}
例子:
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line{
color:#0000ff;
font-variant:small-caps;
}
:first-letter 伪元素 - 向文本的第一个字母添加特殊样式。
:first-line 伪元素 - 向文本的首行添加特殊样式。
:before 伪元素 - 在元素之前添加内容。
:after 伪元素 - 在元素之后添加内容。
【CSS】伪类与伪元素的更多相关文章
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
- 详解 CSS 属性 - 伪类和伪元素的区别[转]
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- CSS的伪类和伪元素
伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...
- 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 《转载》详解 CSS 属性 - 伪类和伪元素的区别
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
随机推荐
- SQL Server Alwayson读写分离配置
标签:MSSQL/只读路由 概述 Alwayson相对于数据库镜像最大的优势就是可读副本,带来可读副本的同时还添加了一个新的功能就是配置只读路由实现读写分离:当然这里的读写分离稍微夸张了一点,只能称之 ...
- 【javascript】Promise/A+ 规范简单实现 异步流程控制思想
——基于es6:Promise/A+ 规范简单实现 异步流程控制思想 前言: nodejs强大的异步处理能力使得它在服务器端大放异彩,基于它的应用不断的增加,但是异步随之带来的嵌套.难以理解的代码让 ...
- Linux命令 查看文件内容
cat [功能说明] 查看文件的内容 #cat本身是一个串接命令,把指定一个或多个源文件的内容,利用>符号重定向到目标文件中,如果不指定重定向文件,则默认在标准输出设备上显示.此时,可以利用c ...
- jQuery时间日期插件laydate,兼容bootstrap
解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...
- 【Python3之socket编程】
一.socket的定义 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后 ...
- php隔行换色输出表格
<?php header("Content-type:text/html;charset=utf-8"); $str=''; $str.='<table border= ...
- js脚本中try与cache捕获异常处理
<script type="text/javascript"> function add_reason(elm){ try{ var pp=$('.pp').val() ...
- golang中defer的使用规则
转自个人博客chinazt.cc 在golang当中,defer代码块会在函数调用链表中增加一个函数调用.这个函数调用不是普通的函数调用,而是会在函数正常返回,也就是return之后添加一个函数调用. ...
- 处理浏览器兼容 各个浏览器的标识 hack
Firefox 浏览器 @-moz-document url-prefix() { .selector { property: value; } } 支持所有Gecko内核的浏览器 (包括Firefo ...
- angularLoad(用以异步加载js文件)
angularLoad(用以异步加载js文件) 使用方法: 1.执行命令 下载 lib npm install angular-load --save 2.index.html引用js <scr ...