CSS3初学篇章_2(伪类选择符)
id与class选择符
id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用。
id选择符以"#"定义
class选择符以"."定义
#id{
color:red;
}
.class{
color:blue;
} <p id="id">id选择符</p>
<p class="class">class选择符</p>
伪类选择符
/*设置超链接a在未被访问前的样式*/
a:link{
color:black;
}
/*设置超链接a在其连接地址已被访问过时的样式*/
a:visited{
color: #ccc;
}
/*设置鼠标悬停在元素上时的样式*/
a:hover{
color:red;
}
/*设置元素在被用户激活时的样式(在鼠标点击后不释放时)*/
a:active{
color: blue;
}
.s{
color:red;
}
/*匹配不含有s选择符的元素p*/
p:not(s){
color:blue;
} <p class="s">111</p>
<p>222</p>
效果图:
/*匹配父元素的第一个*/
ul li:first-child{
color: red;
}
/*匹配父元素的最后一个*/
ul li:last-child{
color: blue;
}
/*匹配父元素的倒数第二个*/
ul li:nth-last-child(2){
color:green;
}
/*匹配父元素的第二个*/
ul li:nth-child(2){
color:purple;
}
<ul>
<li>列表第1行</li>
<li>列表第2行</li>
<li>列表第3行</li>
<li>列表第4行</li>
<li>列表第5行</li>
</ul>
效果图:
E:only-child
匹配父元素仅有的一个子元素E
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
li:only-child {
color: #f00;
} <ul>
<li>只有唯一一个子元素</li>
</ul>
/*匹配同类型中的第一个同级兄弟元素p*/
p:first-of-type{
color:red;
}
/*匹配同类型中的最后一个同级兄弟元素p*/
p:last-of-type{
color:blue;
}
/*匹配同类型中的第n个同级兄弟元素p*/
p:nth-of-type(2){
color:purple;
}
/*匹配同类型中的倒数第n个同级兄弟元素p*/
p:nth-last-of-type(2){
color:green;
}
/*匹配同类型中的唯一的一个同级兄弟元素small*/
small:only-of-type{
color:#ccc;
}
<p>第1个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
<small>唯一的small</small>
E:focus
设置元素在成为输入焦点时的样式。(该元素的onfocus事件发生)
input:focus{
outline: solid 2px red;
} <input type="text" />
E:empty
匹配没有任何子元素(包括text节点)的元素E。
p:empty {
height: 25px;
width:25px;
background: #ccc;
} <p><!--没有东西的p--><p>
<p>有东西的p<p>
E:checked
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
input:checked{
width: 30px;
} <input type="radio" name="1"/>1
<input type="radio" name="1"/>2
<input type="radio" name="1"/>3
E:enabled
匹配用户界面上处于可用状态的元素E。
E:disabled
匹配用户界面上处于禁用状态的元素E。
li {
padding: 3px;
}
input[type="text"]:enabled {
border: 1px solid #090;
background: #fff;
color: #000;
}
input[type="text"]:disabled {
border: 1px solid #ccc;
background: #eee;
color: #ccc;
}
<ul>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
</ul>
E:target
匹配相关URL指向的E元素。
URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。
a:target{
color: red;
} <a href="#n1" id="n1">链接1</a>
<a href="#n2" id="n2">链接2</a>
<a href="#n3" id="n3">链接3</a>
CSS3初学篇章_2(伪类选择符)的更多相关文章
- CSS3初学篇章_3(属性选择符/字体样式/元素样式)
属性选择符 选择符 说明 E[att] 选择具有att属性的E元素. E[att="val"] 选择具有att属性且属性值等于val的E元素. E[att~=&quo ...
- css伪类选择符
1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...
- CSS选择符-----伪类选择符
Element:hover E:hover { sRules } 设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> < ...
- CSS Pseudo-Element Selectors伪对象选择符
一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- CSS :hover伪类选择定义和用法
伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...
- #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
- 说说ID选择符、类选择符和HTML标记选择符的优先级顺序
ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如: p{color:#f ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
随机推荐
- KMP算法代码
以下是本人根据上一篇博客随笔http://www.cnblogs.com/jiayouwyhit/p/3251832.html,所写的KMP算法代码(暂未优化),个人认为在基于上一篇博客的基础上,代码 ...
- Adobe Flash Media Server安装
Flash Media Server(FMS)是一个流媒体服务器 使用 实时消息传送协议(RTMP),RTMP是一种未加密的TCP/IP协议,专门设计用来高速传送音频.视频和数据信息. 3.5版32位 ...
- hdu1963 完全背包(数据压缩)
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1963 注意:题中有一句话说债券的价钱都是1000的倍数,我之前没看到这句话,写的完全背包, ...
- iOS10 UI教程视图和子视图的可见性
iOS10 UI教程视图和子视图的可见性 iOS10 UI教程视图和子视图的可见性,一个父视图可以通过clipsToBounds属性,定义子视图在边界(边界就是父视图的框架也就是父视图可以显示的范围) ...
- PHP 生成二维码
利用PHP QRcode生成二维码: php QRcode 官网 http://phpqrcode.sourceforge.net/ 在官网下载 phpqrcode.php就ok啦: 然后,查看自己的 ...
- scau 8637 阶乘与因子 筛素数
时间限制:500MS 内存限制:1000K提交次数:189 通过次数:46 题型: 编程题 语言: G++;GCC Description 游戏玩了很久总会厌的,连Lyd的蚂蚁都被放生了.... ...
- 停靠技术 Dock
C:\Program Files\Borland\Delphi7\Demos\Docking delphi例子 网上文档 http://www.docin.com/p-95543759.html
- Java第一天:安装搭建Java开发环境
Java是面向对象的语言.它是通过虚拟机的运行机制来实现“跨平台”的. 这里不多说其他的,进入正题先,学习任何语言前的第一步都是要先搭建好开发环境,Java开发环境搭建如下: 1.到官网 http:/ ...
- Codeforces 543D Road Improvement(树形DP + 乘法逆元)
题目大概说给一棵树,树的边一开始都是损坏的,要修复一些边,修复完后要满足各个点到根的路径上最多只有一条坏的边,现在以各个点为根分别求出修复边的方案数,其结果模1000000007. 不难联想到这题和H ...
- CSS中文字体对照表
http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html CSS中文字体对照表 css字体名可以使用2种Unicode格式,以“微软雅 ...