CSS之伪类
1.
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:hover 当鼠标悬浮在元素上方时,向元素添加样式
:active 向被激活的元素添加样式(被点击)
以上四种伪类应用于超链接时,a:hover必须在a:link和a:visited之后,a:active必须在a:hover之后,a:link和a:visited两者的顺序没有规定
1.1 超链接:
<style> a:link{ color:red; } a:visited{ color:green; } a:hover{ color:blue; } a:active{ color:yellow; } </style> <a href="#">pmx-cnblogs</a>
1.2 div
<style> div{ width:100px; height:100px; background-color:red; border:3px solid blue; overflow:hidden; transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s; line-height:100px; text-align:center; } div:hover{ background-color:green; width:300px; height:300px; line-height:300px; font-size:2em } div:active{ color:yellow; } </style> <div>This is div</div>
正常状态:
鼠标移到div上时的样子:
鼠标左键按下后得样子:
2. :first-child
p:first-child选择作为某个元素的第一个子元素的p元素,而不是选择p元素的第一个子元素
<style> #myDiv > p:first-child{ background-color:#3C6; } </style> <body> <p>p8</p> <div id='myDiv' style='width:300px;height:300px;overflow:auto'> <p>p1</p> <p>p2</p> <p>p3</p> <div> <p>p4</p> <p>p5</p> </div> </div> <p>p6</p> <p>p7</p> </body>
P1作为myDiv的第一个子元素被选中
向获得焦点的元素添加特殊样式,比如按钮被点击后,文本框输入文本
<style> input:focus{ background-color:yellow; } </style> <input type='text' value=""/>
4. :lang
向带有指定lang属性的元素添加样式
<style> :lang(zh){ color:red; } </style> <p lang="zh">p7</p>
5. :target
:target伪类和超链接有关,当我们希望打开页面或者单击按钮定位到页面中某个元素时,常常是这样的
<a href="#jump>jump</a> <!--必须是ID号--> <p id="#jump">This is paragraph</p>
:target就是捕获点击超链接后,定位到的元素,在:target里面的CSS代码都是控制这个捕获到的元素的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> :target{ background-color:red; } </style> </head> <body> <a href="#jump1">jump To 1</a> <a href="#jump2">jump To 2</a> <p id="jump1">This is paragraph1</p> <p id="jump2">This is paragraph2</p> </body> </html>
点击jump to 1时,paragraph1变红。
点击jump to 2时,paragraph2变红
:target表示所有被定位到的元素,背景色改变。如果我们想让paragraph1单独变红,可以这样:
<style> #jump1:target{ background-color:red; } </style>
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tab_list{ position: relative; margin:50px; min-height: 200px; } .tab_content{ position: absolute; width:600px; height:170px; padding:15px; border:1px solid #91a7b4; border-radius:3px; box-shadow:0 2px 3px rgba(0,0,0,0.1); font-size:1.2em; line-height:1.5em; color:#666; background-color: #fff; overflow: hidden; } .tab_menu{ position: absolute; top:100%; list-style-type: none; margin:0; padding:0; } .tab_menu li{ display:inline-block; } .tab_menu a{ text-decoration: none; display:block; padding:5px; font-size:12px; font-family:"楷体"; color:#333; border:1px solid #91a7b4; border-radius: 0 0 5px 5px; background-color:#e3f1f8; margin-right:10px; } :target{ z-index:10; } </style> </head> <body> <div class="tab_list"> <ul class="tab_menu"> <li><a href="#tab1">标签一</a></li> <li><a href="#tab2">标签二</a></li> <li><a href="#tab3">标签三</a></li> </ul> <div id="tab1" class="tab_content">欢迎加设计达人Q群:50063010<br/> 设计达人以原创和分享一些高质量的设计文章为主,希望喜欢! </div> <div id="tab2" class="tab_content"> <p>本Tab切换效果纯CSS3制作,无任何JavaScript</p> 最新Q群:50063010<br/> 爱设计,爱分享——设计达人(<a href="http://www.shejidaren.com">http://www.shejidaren.com</a>) </div> <div id="tab3" class="tab_content"> <p>高质量设计文章分享平台</p> <p>欢迎加设计达人Q群:50063010<br /><a href="http://www.shejidaren.com/">设计达人</a>以原创和分享一些高质量的设计文章为主,希望喜欢</p> </div> </div> </body> </html>
6.:not(selector)匹配不是selector的元素或者选择器,注意selectro并不是字符串
6.1 p:not(.info)----选择除了class='info'之外的所有p元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .info{ color:red; } .foo{ color:blue; } p:not(.info){ background-color:green; } </style> </head> <body> <p class="info">p1</p> <p>p2</p> <p class='foo'>p3</p> <p>p4</p> </body> </html>
6.2 :not(p) 选择除p以外的所有元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red; } :not(p){ color:blue; } </style> </head> <body> <p class="info">p1</p> <p>p2</p> <p class='foo'>p3</p> <p id="pp">p4</p> <div>sdf</div> </body> </html>
注意:
1.当使用类选择符或者id选择符时,not前面要跟元素名作限制 p:not(.foo)或者p:not(#pp)不能是:not(.foo)
2.当使用元素标签作为选择器是,要给该元素设置样式,然后用:not(selector)来设置非selector的样式,而且它们设置的样式要一致
CSS之伪类的更多相关文章
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS :first-child 伪类
CSS :first-child 伪类 向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...
- CSS :focus 伪类
:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...
- 二.CSS的伪类
CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CS ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 关于css的伪类和伪元素
现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...
- CSS锚伪类顺序需注意的几点
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- HTML&CSS基础-伪类选择器
HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
随机推荐
- Revit 自定义RibbonPanel到Revit中
项目下找到TheApplication.cs,更改内容: class TheApplication : IExternalApplication { public Result O ...
- NetApp 监控
http://support.ipmonitor.com/mibs/network-appliance-mib/tree.aspx http://www.360doc.com/content/10/1 ...
- 与你相遇好幸运,Sailsjs查询
sailsjs 原生查询 ------------------------------------- Lands.native(function(err, collection) { if (err) ...
- Power BI for Office 365(四)Power View第一部分
Power View是一种可以创建动态的交互式报表的工具,并且支持丰富多样的图表类型,在Power View中创建的报表可以很容易地进行分享,以及供查看报表的用户对Power View报表进行交互.从 ...
- sd卡脱机烧写系统的方法(测试成功)
一.sd卡烧写系统的基本思路: (1)把uboot.bin烧写到sd卡 (2)把image整个文件夹复制到sd卡 (3)开发板从sd卡启动,就开始自动烧写到nandflash中了. 二.烧写uboot ...
- 浏览器-03 WebKit 渲染1
WebKit是一个渲染引擎,而不是一个浏览器; DOM是对HTML或者XML等文档的一种结构化表示方法,通过这种方式,用户可以通过提供标准的接口来访问页面中的任何元素的相关属性,并可对DOM进行相应的 ...
- python 线程之 threading(四)
python 线程之 threading(三) http://www.cnblogs.com/someoneHan/p/6213100.html中对Event做了简单的介绍. 但是如果线程打算一遍一遍 ...
- 逗号分割符--字段中含逗号等情况的解析方法Java实现
最近在处理文本字符串时,没一行数据都是按照逗号分割的,每个字段值一般情况是带有双引号的,但是有的字段值里面还包含逗号,甚至有的字段就没有双引号,这个分割起来就有点麻烦了 下面说一下我解决方法,如果谁有 ...
- JavaScript变量和作用域
认识JavaScript中的变量 JavaScript中的变量有两种类型,一种是基本类型.一种是引用类型. 基本数据类型:Defined,Null,Boolean,Number,String.注意St ...
- Linux CentOS中使用SQL*Plus启动和关闭数据库
启动和关闭数据库的常用工具有三个 一.SQL*Plus 在SQL*Plus环境中,用户以SYSDBA身份连接到Oracle后,可以通过命令行方式启动或关闭数据库. 二.OEM(企业管理器) 利用OEM ...