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(伪类选择符)的更多相关文章

  1. CSS3初学篇章_3(属性选择符/字体样式/元素样式)

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  2. css伪类选择符

    1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...

  3. CSS选择符-----伪类选择符

    Element:hover E:hover { sRules }  设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> < ...

  4. CSS Pseudo-Element Selectors伪对象选择符

    一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...

  5. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  6. CSS :hover伪类选择定义和用法

    伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...

  7. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  8. 说说ID选择符、类选择符和HTML标记选择符的优先级顺序

    ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如:       p{color:#f ...

  9. 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

随机推荐

  1. KMP算法代码

    以下是本人根据上一篇博客随笔http://www.cnblogs.com/jiayouwyhit/p/3251832.html,所写的KMP算法代码(暂未优化),个人认为在基于上一篇博客的基础上,代码 ...

  2. Adobe Flash Media Server安装

    Flash Media Server(FMS)是一个流媒体服务器 使用 实时消息传送协议(RTMP),RTMP是一种未加密的TCP/IP协议,专门设计用来高速传送音频.视频和数据信息. 3.5版32位 ...

  3. hdu1963 完全背包(数据压缩)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1963 注意:题中有一句话说债券的价钱都是1000的倍数,我之前没看到这句话,写的完全背包, ...

  4. iOS10 UI教程视图和子视图的可见性

    iOS10 UI教程视图和子视图的可见性 iOS10 UI教程视图和子视图的可见性,一个父视图可以通过clipsToBounds属性,定义子视图在边界(边界就是父视图的框架也就是父视图可以显示的范围) ...

  5. PHP 生成二维码

    利用PHP QRcode生成二维码: php QRcode 官网 http://phpqrcode.sourceforge.net/ 在官网下载 phpqrcode.php就ok啦: 然后,查看自己的 ...

  6. scau 8637 阶乘与因子 筛素数

    时间限制:500MS  内存限制:1000K提交次数:189 通过次数:46 题型: 编程题   语言: G++;GCC Description 游戏玩了很久总会厌的,连Lyd的蚂蚁都被放生了.... ...

  7. 停靠技术 Dock

    C:\Program Files\Borland\Delphi7\Demos\Docking   delphi例子 网上文档 http://www.docin.com/p-95543759.html

  8. Java第一天:安装搭建Java开发环境

    Java是面向对象的语言.它是通过虚拟机的运行机制来实现“跨平台”的. 这里不多说其他的,进入正题先,学习任何语言前的第一步都是要先搭建好开发环境,Java开发环境搭建如下: 1.到官网 http:/ ...

  9. Codeforces 543D Road Improvement(树形DP + 乘法逆元)

    题目大概说给一棵树,树的边一开始都是损坏的,要修复一些边,修复完后要满足各个点到根的路径上最多只有一条坏的边,现在以各个点为根分别求出修复边的方案数,其结果模1000000007. 不难联想到这题和H ...

  10. CSS中文字体对照表

    http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html CSS中文字体对照表 css字体名可以使用2种Unicode格式,以“微软雅 ...