MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » CSS3 基础(一)——选择器详解

CSS3 基础(一)——选择器详解

www.MyException.Cn  网友分享于:2013-08-09  浏览:0次
CSS3 基础(1)——选择器详解

 CSS3选择器详解

一、 属性选择器

  在CSS3中,追加了三个属性选择器分别为:[att*=val]、[att^=val]和[att$=val],使得属性选择器有了通配符的概念。

选择器

示例

描述

[attribute^=value]

[src^="https"]

选择每一个src属性的值以"https"开头的元素

[attribute$=value]

[src$=".pdf"]

选择每一个src属性的值以".pdf"结尾的元素

[attribute*=value]

[src*="runoob"]

选择每一个src属性的值包含子字符串"runoob"的元素

             示例:

代码

说明

div[class^="test"]{background:#ffff00;}

设置class属性值以"test"开头的所有div元素的背景颜色

[class^="test"]{background:#ffff00;}

设置class属性值以"test"开头的所有元素的背景颜色

div[class$="test"]{background:#ffff00;}

设置class属性值以"test"结尾的所有div元素的背景颜色

[class$="test"]{background:#ffff00;}

设置class属性值以"test"结尾的所有元素的背景颜色

div[class*="test"]{background:#ffff00;}

设置class属性值包含"test"的所有div元素的背景颜色

[class*="test"]{background:#ffff00;}

设置class属性值包含"test"的所有元素的背景颜色

 二、结构性伪类选择器(一)

选择器

示例

描述

结构性伪元素选择器

:first-letter

p:first-letter

选择每一个<P>元素的第一个字母

:first-line

p:first-line

选择每一个<P>元素的第一行

:before

p:before

在每个<p>元素之前插入内容

:after

p:after

在每个<p>元素之后插入内容

结构性伪类选择器:共同特征是允许开发者根绝文档中的结构来指定元素的样式

:root

:root

选择文档的根元素

:not(selector)

:not(p)

选择每个并非p元素的元素

:empty

p:empty

选择每个没有任何子级的p元素(包括文本节点)

:target

#news:target

选择当前活动的#news元素(包含该锚名称的点击的URL)

     ①每个<p>元素之后插入内容: p:after{ content:"- Remember this"; } 

     ②设置HTML文档的背景色: :root{ background:#ff0000; } 

      :root选择器用匹配文档的根元素,在HTML中根元素始终是HTML元素。

     ③为每个并非<p>元素的元素设置背景颜色: :not(p) { background:#ff0000; } 

     ④指定空的p元素的背景色: p:empty { background:#ff0000; } 

      :empty选择器选择每个没有任何子级的元素(包括文本节点)。

     ⑤:target选择器可用于当前活动的target元素的样式,只能用id标识

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>菜鸟教程(runoob.com)</title>
 6     <style>
 7         :target{
 8         border: 2px solid #D4D4D4;
 9         background-color: #e5eecc;
10         }
11     </style>
12 </head>
13 <body>
14     <h1>This is a heading</h1>
15     <p><a href="#news1">Jump to New content 1</a></p>
16     <p><a href="#news2">Jump to New content 2</a></p>
17     <p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
18     <p id="news1"><b>New content 1...</b></p>
19     <p id="news2"><b>New content 2...</b></p>
20 </body>
21 </html>                

三、结构性伪类选择器(二)

选择器

示例

描述

:first-child

p:first-child

指定只有当<p>元素是其父级的第一个子级的样式。

:last-child

p:last-child

选择每个p元素是其父级的最后一个子级。

:nth-child(n)

p:nth-child(2)

选择每个p元素是其父级的第二个子元素

:nth-last-child(n)

p:nth-last-child(2)

选择每个p元素的是其父级的第二个子元素,从最后一个子项计数

:nth-of-type(n)

p:nth-of-type(2)

选择每个p元素是其父级的第二个p元素

:nth-last-of-type(n)

p:nth-last-of-type(2)

选择每个p元素的是其父级的第二个p元素,从最后一个子项计数

    ①指定父元素中最后一个p元素的背景色: p:last-child{ background:#ff0000; } 

    ②指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色: p:nth-last-child(2){ background:#ff0000; } 

    ③:nth-child(n)选择器匹配父元素中的第n个子元素,n可以是一个数字,一个关键字(奇偶数等关键字),或者一个公式。该索引的第一个子节点是1。

    ④:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素,n可以是一个数字,一个关键字,或者一个公式。该索引的第一个子节点是1。

     p:nth-of-type(odd){background:#ff0000;}

   p:nth-of-type(even){background:#0000ff;} 

  ⑤使用公式(an+ b).描述:a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量。 在这里,我们对所有索引是3的倍数的p元素指定了背景颜色: p:nth-child(3n+0){ background:#ff0000; } 

  ⑥:only-child择器匹配属于父元素中唯一子元素的元素。 p:only-child{background:#ff0000; } 

四、UI元素状态伪选择器

  在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器。这类选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用,在默认状态下不起作用。在CSS3中,共有17种UI元素状态伪类选择器。

选择器

示例

描述

:link

a:link

选择所有未访问链接

:active

a:active

选择活动链接

:hover

a:hover

选择鼠标在链接上面时

:focus

input:focus

选择具有焦点的输入元素(选中)

:checked

input:checked

选择每个选中的输入元素

:hover在鼠标移到链接上时添加的特殊样式。

提示: :hover 选择器器可用于所有元素,不仅是链接。

提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。

注意: 为了产生预期的效果,在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后!

  ②:focus选择器用于选择具有焦点的元素。

    提示: :focus选择器接受键盘事件或其他用户输入的元素。

             一个输入字段获得焦点时选择的样式:input:focus{background-color:yellow;}

 1 <html>
 2 <head>
 3     <meta charset="utf-8"> 
 4     <title></title>
 5     <style>
 6         input:focus{
 7             background-color:yellow;
 8         }
 9     </style>
10 </head>
11 <body>
12     <p>点击文本输入框表单可以看到黄色背景:</p>
13     <form>
14         First name: <input type="text" name="firstname" /><br>
15         Last name: <input type="text" name="lastname" />
16     </form>
17     <p><b>注意:</b>  :focus 作用于 IE8,DOCTYPE 必须已声明</p>
18 </body>
19 </html>                            

    ③:checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)。

    为所有选中的输入元素设置背景颜色:input:checked { height: 50px; width: 50px; }

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5     <style>
 6         input:checked {
 7             height: 50px;
 8             width: 50px;
 9         }
10     </style>
11 </head>
12 <body>
13     <form action="">
14         <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
15         <input type="radio" value="female" name="gender" /> Female<br>
16         <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
17         <input type="checkbox" value="Car" /> I have a car
18     </form>
19 </body>
20 </html>

选择器

示例

描述

:enabled

input:enabled

选择每一个已启用的输入元素

:disabled

input:disabled

选择每一个禁用的输入元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>菜鸟教程(runoob.com)</title> 
 6     <style> 
 7         input:enabled{
 8         background:#ffff00;
 9         }
10         input:disabled{
11         background:#dddddd;
12         }
13     </style>
14 </head>
15 <body>
16     <form action="">
17         First name: <input type="text" value="Mickey" /><br>
18         Last name: <input type="text" value="Mouse" /><br>
19         Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
20         Password: <input type="password" name="password" />
21         <input type="radio" value="male" name="gender" /> Male<br>
22         <input type="radio" value="female" name="gender" /> Female<br>
23         <input type="checkbox" value="Bike" /> I have a bike<br>
24         <input type="checkbox" value="Car" /> I have a car 
25     </form>
26 </body>
27 </html>

五、通用兄弟元素选择器:

  它用来指定位于一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用样式。

  如:同一div下的子p 元素,以“~”连接, div ~ p{background-color:gold} 

文章评论

 程序员的样子
程序员的样子
程序员应该关注的一些事儿
程序员应该关注的一些事儿
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
为什么程序员都是夜猫子
为什么程序员都是夜猫子
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
我是如何打败拖延症的
我是如何打败拖延症的
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
一个程序员的时间管理
一个程序员的时间管理
代码女神横空出世
代码女神横空出世
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员必看的十大电影
程序员必看的十大电影
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员都该阅读的书
程序员都该阅读的书
每天工作4小时的程序员
每天工作4小时的程序员
编程语言是女人
编程语言是女人
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
中美印日四国程序员比较
中美印日四国程序员比较
Java程序员必看电影
Java程序员必看电影
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
老程序员的下场
老程序员的下场
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
如何成为一名黑客
如何成为一名黑客
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
我的丈夫是个程序员
我的丈夫是个程序员
10个调试和排错的小建议
10个调试和排错的小建议
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
旅行,写作,编程
旅行,写作,编程
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
鲜为人知的编程真相
鲜为人知的编程真相
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员的鄙视链
程序员的鄙视链
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
那些争议最大的编程观点
那些争议最大的编程观点
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有