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}

CSS3 基础(1)——选择器详解的更多相关文章

  1. [CSS3] 学习笔记-选择器详解（三）

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

  2. [CSS3] 学习笔记-选择器详解（二）

    1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...

  3. css 10-CSS3选择器详解

    10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...

  4. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  5. web前端学习（三）css学习笔记部分（6）-- 选择器详解

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

  6. 基础拾遗------redis详解

    基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...

  7. 基础拾遗------webservice详解

    基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...

  8. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  9. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

随机推荐

  1. C++ 宏定义#define 中##的使用

    在C++的宏定义中,符号##一般是用于连接,包括参数的连接,参数与标识符的连接等,然后形成一个新的标识符. 下面举几个例子来进行说明. eg1: #define ADD(a,b) a##b #defi ...

  2. 95后实习生的远程办公体验（asp.net mvc\C#技术栈）

    这个月我们做了一件别人看起来很疯狂的事情,就是让一批95后的实习生实行远程办公,效果还不错,于是写此文总结一下. 其实认真算算,我自己的远程工作经验有十年了吧,在北京工作的时候天气不好就申请在家办公, ...

  3. Js中的数据属性和访问器属性

    Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...

  4. Django学习（八）---修改文章和添加文章

    博客页面的修改文章和添加新文章 从主页点击不同文章的超链接进入文章页面,就是传递了一个id作为参数,然后后台代码根据这个参数从数据库中取出来对应的文章,并把它传递到前端页面 修改文章和添加新文章,是要 ...

  5. Argparse4j

    argparse4j 是 Python argparse 命令行解析器的 Java 语言移植版.这个要比spring AspectJ 更简单,更方便实现. <dependency> < ...

  6. STL—list

    前面我们分析了vector,这篇介绍STL中另一个重要的容器list list的设计 list由三部分构成:list节点.list迭代器.list本身 list节点 list是一个双向链表,所以其li ...

  7. STL—vector空间的动态增长

    vector空间的动态增长     当添加元素时,如果vector空间大小不足,则会以原大小的两倍另外配置一块较大的新空间,然后将原空间内容拷贝过来,在新空间的内容末尾添加元素,并释放原空间.vect ...

  8. js数组拍平

    js数组拍平 var arr=[1,[[[7,2],8,9],3]]; function f(arr) { if (Object.prototype.toString.call(arr) != &qu ...

  9. luogu P3398 仓鼠找sugar [LCA]

    题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而他的基友同时要从他的卧室(c) ...

  10. 函数响应式编程及ReactiveObjC学习笔记 (三)

    之前讲了RAC如何帮我们实现KVO / 代理 / 事件 / 通知 今天先不去分析它的核心代码, 我们先看看ReactiveObjC库里面一些特别的东西,  如果大家点开ReactiveObjC目录应该 ...