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

来源：互联网发布：淘宝外卖优惠券怎么领编辑：程序博客网时间：2024/06/05 20:59

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

选择每一个元素的第一个字母

:first-line

p:first-line

选择每一个元素的第一行

:before

p:before

在每个元素之前插入内容

:after

p:after

在每个元素之后插入内容

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

:root

选择文档的根元素

:not(selector)

:not(p)

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

:empty

p:empty

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

:target

#news:target

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

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

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

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

③为每个并非元素的元素设置背景颜色： :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

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

: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{}

 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 car18     </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}

阅读全文

0 0