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 |
选择属于父元素的第一个子元素的每个 <p> 元素。 |
|
:before |
P:before |
P元素之前插入信息 |
|
:after |
P:after |
P元素之后插入信息 |
|
:lang(langugae) |
P:lang(it) |
选择以it开头的所有p元素 |
|
:first-of-type |
P:first-of-type |
选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
|
:last-of-type |
P:last-of-type |
选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
|
:only-of-type |
P:only-of-type |
选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
|
:only-child |
P:only-child |
选择属于其父元素唯一子元素的所有p元素 |
|
:nth-child(n) |
P:nth-child(2) |
选择属于其父元素的第二个子元素的每个 <p> 元素。 |
|
:nth-last-child(n) |
P:nth-last-child(2) |
从最后一个元素开始计数,选择属于其父元素的第二个子元素的每个 <p> 元素。 |
|
: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; }
<p id="p1">你好,我是p1元素。</p> <p id="p2">你好,我是p2元素。</p> <p id="p3">你好,我是p3元素。</p>
你好,我是p1元素。
你好,我是p2元素。
你好,我是p3元素。
p:first-child{
color: #b82929;
}
<div id="div1">
<p>你好!</p>
<p>你好!</p>
</div>

css的伪类选择器的使用的更多相关文章
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- HTML&CSS基础-伪类选择器
HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <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 ...
随机推荐
- unity3d WebPlayer版本号音效无声音问题
unity web player,其是一款浏览器执行unity3d游戏引擎公布的游戏的插件,和Flash Player非常像,安全无毒应该是你玩某款网页游戏安装的.假设以后不玩了就能够卸载 Unity ...
- Python基础之模块2
如何导入多个模块? import re #单行导入多个模块 '''多行导入多个模块''' import re import sys import os 如何给模块起别名? import my_modu ...
- [译]NeHe教程 - 添加颜色
原文: Adding Colour 上一节我讲解了如何在屏幕显示三角形和四边形.本节会讲解如何上色.单色(Flat)顾名思义就是只能涂一种实心的颜色.平滑颜色(Smooth)可以在各个顶点混合三种颜色 ...
- Linux 查看tomcat占用的端口号
第一步:先查看tomcat占用的进程号 ps -ef|grep tomcat 第二步:根据进程号,查看进程所占用的端口 netstat -apn 由此得知,tomcat的进程号是21845,并得到端口 ...
- k8s部署nginx集群
环境: 两台虚拟机, 10.10.20.203 部署docker.etcd.flannel.kube-apiserver.kube-controller-manager.kube-scheduler ...
- c_str()方法使用
语法: const char *c_str(); c_str()函数返回一个指向正规C字符串的指针常量, 内容与本string串相同. 这是为了与c语言兼容,在c语言中没有string类型,故必须通过 ...
- 【BZOJ1038】[ZJOI2008]瞭望塔 半平面交
[BZOJ1038][ZJOI2008]瞭望塔 Description 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安.我们将H村抽象为一维的轮廓.如 ...
- 【BZOJ4542】[Hnoi2016]大数 莫队
[BZOJ4542][Hnoi2016]大数 Description 小 B 有一个很大的数 S,长度达到了 N 位:这个数可以看成是一个串,它可能有前导 0,例如00009312345.小B还有一个 ...
- SQLite支持的并发访问数
SQLite objects created in a thread can only be used in that same thread.The object was created in th ...
- [luogu4755]Beautiful Pair
[luogu4755]Beautiful Pair luogu 第一次写最大值分治感觉有点丑 每次找到最大值mid,扫小的一边,主席树查大的一边小于等于\(\frac{a[mid]}{a[i]}\)的 ...