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> & ...
随机推荐
- iOS - 使用自定义字体-苹方字体
苹方提供了六个字重,font-family 定义如下:苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;苹方-简 极细体font-family: ...
- PHP的两种表单数据提交方式
1 通过隐藏表单提交 //通过隐藏表单提交 if ($_POST['action'] == 'register'){ echo '你提交了数据'; exit(); } ?> <!DOCTY ...
- 最小生成树的Kruskal算法实现
最近在复习数据结构,所以想起了之前做的一个最小生成树算法.用Kruskal算法实现的,结合堆排序可以复习回顾数据结构.现在写出来与大家分享. 最小生成树算法思想:书上说的是在一给定的无向图G = (V ...
- HTML行为元素和块级元素及语义化
块级元素 div - dl - form 交互表单h1 - h6 标题 hr 水平分割线p 段落ul 非排序列表table 表格 行内元素 a 链接br 换行em 强调i 斜体img 图片input ...
- 模板函数(template function)出现编译链接错误(link error)之解析
总的结论: 将template function 或者 template class的完整定义直接放在.h文件中,然后加到要使用这些template function的.cpp文件中. 1. 现 ...
- [工作中的设计模式]装饰模式decorator
一.模式解析 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式的要点主要是: 1.需要对已有对象扩展新的功能,又不希望改变原有对 ...
- 【Oracle】oracle之listagg分析函数
oracle分析函数——listagg篇 (1)使用listagg将多行数据合并到一行 例表: select deptno, ename from emp order by deptno, ename ...
- 【BZOJ】3561: DZY Loves Math VI
题意 求\(\sum_{i=1}^{n} \sum_{j=1}^{m} lcm(i, j)^{gcd(i, j)}\)(\(n, m<=500000\)) 分析 很显然要死推莫比乌斯 题解 设\ ...
- Android -- 自定义控件(ImageButton)
1. 效果图
- Odoo Email Template Problem
Odoo 8.0 的邮件模板是运行自jiajin2沙盒中的阉割版mako,像自定义及 <%%>等功能都无法正常使用. 且for-loop %for %endfor不能嵌套在table中使用 ...