使用css伪类选择器,css的伪类选择器的使用

伪类选择器，在不同情况下显示的css，伪类选择器在处理页面的美观是很大帮助。其实很多美丽的按钮或者页面都是有这些基础的知识实现的，掌握好基础很重要。

名字

实例

说明

:link

a:link

选择所有未被访问的链接

:visited

a:visited

被访问的链接

:active

a:active

所有活动的链接

:hover

a:hover

鼠标所在的链接

:focus

Input:focus

获得焦点的input的css

:first-letter

P:first-letter

P元素的首字母样式

:first-line

P:first-line

P元素的首行样式

:first-child

P:first-child

选择属于父元素的第一个子元素的每个

元素。

:before

P:before

P元素之前插入信息

:after

P:after

P元素之后插入信息

:lang(langugae)

P:lang(it)

选择以it开头的所有p元素

:first-of-type

P:first-of-type

选择属于其父元素的首个  

元素的每个

元素。

:last-of-type

P:last-of-type

选择属于其父元素的最后  

元素的每个

元素。

:only-of-type

P:only-of-type

选择属于其父元素唯一的  

元素的每个

元素。

:only-child

P:only-child

选择属于其父元素唯一子元素的所有p元素

:nth-child(n)

P:nth-child(2)

选择属于其父元素的第二个子元素的每个

元素。

:nth-last-child(n)

P:nth-last-child(2)

从最后一个元素开始计数，选择属于其父元素的第二个子元素的每个

元素。

:nth-of-type(n)

P:nth-of-type(2)

选择属于其父元素的第二个p元素的每个p元素

:nth-last-of-type(n)

P:nth-last-of-type(2)

从最后开始计数的选择属于器父元素第二个p元素的每个p元素

:last-child

P:last-child

选择其父元素的最后一个元素的每个p元素

:root

:root

根元素的css

:empty

P:empty

选择没有子元素的每个p元素，包含文本信息

:target

#new:target

当前活动的#new元素

:enabled

Input:enabled

选择每个启用的input元素

:disabled

Input:disabled

选择每个禁用的input元素

:checked

Input:checked

选择被选择的input元素

:not(selector)

:not(p)

选择非p元素的元素

::selection

::selection

选择被用户选取的部分元素

列举实例：

/* 未被访问时，正常情况下*/

a:link{color: #ff3324;}

/*点击后时的状态*/

a:visited{color: #1E7DB9;}

/*活动的链接*/

a:active{color: #24d432;}

/*鼠标所在的链接*/

a:hover{color:#fcc100;}

#p1:before,#p2:before,#p3:before{

content: '我是p元素的前方！';

color:#b82929;

}

#p1:after,#p2:after,#p3:after{

content: '我是p元素的后方！';

color: #5eac6e;

}

-->

#p1:before,#p2:before,#p3:before{ content: '我是p元素的前方！'; color:#b82929; }

#p1:after,#p2:after,#p3:after{ content: '我是p元素的后方！'; color: #5eac6e; }

你好，我是p1元素。

你好，我是p2元素。

你好，我是p3元素。

你好，我是p1元素。

你好，我是p2元素。

你好，我是p3元素。

p:first-child{

color: #b82929;

}

你好！

你好！

css hover伪类选择器与JQuery hover()方法

css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

HTML&CSS基础-伪类选择器

HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 & ...

CSS动态伪类选择器温故-3

动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

CSS中伪类选择器及伪元素

1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

CSS动态伪类选择器温故

动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

前端开发HTML&css入门——伪类选择器和一些特殊的选择器

伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

css之伪类选择器:before :after(::before ::after)

一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before  :after的区别:css3中修订后的伪元素使用:: ...

关于CSS伪类选择器

#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

CSS伪类选择器和伪元素选择器

CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

随机推荐

将HTML特殊转义为实体字符的两种实现方式

前端开发工作中,经常需要将HTML的左右尖括号等转义成实体形式.我们不能把,&等直接显示在最终看到的网页里.需要将其转义后才能在网页上显示. 转义字符(Escape Sequ ...

Expect安装方法

Expect安装方法 http://bluethink.iteye.com/blog/1079044 Tcl脚本SSHITeyeUnix  Expect是基于Tcl语言的一种脚本语言,其实无论是交互还 ...

Linux文件锁定保护命令chattr介绍

chattr命令的用法:chattr [ -RV ] [ -v version ] [ mode ] files- 最关键的是在[mode]部分,[mode]部分是由+-=和[ASacDdIijsTt ...

Linux Oracle服务启动&停止脚本与开机自启动[转]

在CentOS 6.3下安装完Oracle 10g R2,重开机之后,你会发现Oracle没有自行启动,这是正常的,因为在Linux下安装Oracle的确不会自行启动,必须要自行设定相关参数,首先先介 ...

Memcache在.Net中的使用

一.Memcache基本概念(socket服务器) 本质:是一个在内存上存储的hash表,key的最大值是255字符,最长过期时间为30天 特点:惰性删除,没有监控数据过期的机制,实现最基本的key- ...

Java语法基础学习DayTwelve(泛型)

一.泛型(Generic)在集合中的使用 1.作用 (1)解决元素存储的安全问题 (2)解决获取数据元素时,需要类型强转的问题 2.代码案例 //在集合没有使用泛型的情况下 List list = n ...

SOA&微服务&服务网格&高可用

SOA 架构 SOA 全称是:Service Oriented Architecture,“面向服务的架构”. 它是一种设计理念,其中包含多个服务,服务之间通过相互依赖最终提供一系列完整的功能. 各个 ...

[转帖]Ubuntu 安装VNC的一个方法

来源: https://blog.csdn.net/CSDN_duomaomao/article/details/75270271 Ubuntu 16.04 LTS 安装VNC,在百度和谷歌找了很多教 ...

FreeBSD NTP 简单使用

FreeBSD NTP 简单使用 来源 https://blog.csdn.net/stevexk/article/details/1349506 1.ntptrace xxx.xxx.xxx.xxx ...

Confluence 6 找到未使用的空间

有时候,你希望找到你系统中没有使用的内容.有时候你也希望能够对这些内容进行更多的关注,但是如何找到一些有关长期不更新的页面,或者长期不使用的空间? View Space Activity 页面中的内容 ...