使用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 页面中的内容 ...
使用css伪类选择器,css的伪类选择器的使用相关推荐
- CSS复合选择器(后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器 后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
- CSS选择器(id选择器,包含选择器,标签名选择器,类选择器,属性选择器,通配符选择器,伪类选择器,相邻选择器,选择器的优先级,子选择器)
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
- css复合选择器(后代选择器、子代选择器、并集选择器、链接伪类选择器、:focus选择器)
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
- HTML/CSS: 浅谈a标签及伪类选择器
1.基础知识 "超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分." -HTML链接 而对于超文本,简单的说便是 ...
- CSS回顾总结(二)——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录 伪类 伪元素 子元素和后代元素选择器 盒子模型 边距 边框 边框样式 内联元素盒子模型 伪类 伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...
- css 伪类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器)
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
最新文章
- oracle 优化器 失效,oracle 优化器 不走索引原因
- Socket(套字节)编程,客户端 服务器端的发送消息
- android volley 上传图片 和参数,Android使用Volley实现上传文件功能
- 管理软件实施(5)——实施先了解下售前工作的特点(上)
- 如何将同一云服务下的虚拟机从经典部署模型迁移到 Azure Resource Manager
- 新装WIN7 UPDATE 无法更新
- androidstudio 评论栏_android-studio 添加没有菜单栏和actionBar的模板
- Spring Boot之发送HTTP请求(RestTemplate详解)
- android数据绑定_Android RecyclerView数据绑定
- 【js与jquery】导航下拉菜单效果
- c语言上机题库徐州工程学院,徐州工程学院 C语言上机实验报告.docx
- 教师资格证科目一的法律重点总结
- libtorch显存管理示例
- 新手小坑:sql表int字段自动填0
- 统计学---总体与样本
- PPT2016内嵌Excel的动态图表
- 图文结合带你搞懂InnoDB MVCC
- c语言撩妹小程序,撩妹简单的web小程序!分享给大家~~~~~~
- error:重装系统后,office办公软件成网页版
- 多人交友+私密相亲,红娘相亲直播源码
热门文章
- 蓝牙耳机哪款性价比高音质好?性价比高的无线蓝牙耳机
- 利用vim 对每行行首增加相同的字符串
- c++实验3--个人所得税计算器
- web2.0及其相关技术
- GeoTools简介
- Xposed hook原理
- 部编版是什么版本_部编版和人教版的区别是什么
- c语言软件市场价,[转载]KMV模型中求解资产市场价值和资产价值波动性(C语言)...
- DELL电脑window10系统怎么关闭F11和F12调整亮度功能
- ITK——1. 初步认识和配置编译