使用CSS3 选择器——笔记

(2) 在标签内添加标签，定义一个内部样式表。然后定义样式表，实现如下设计目标:

• 定义
  包含框内的段落文本字体大小为14像素。
• 定义
  包含框内的段落文本字体大小为12像素。

这时可以利用包含选择器来快速定义它们的样式，代码如下:

2.2 子选择器

　　子选择器是指定父元素所包含的子元素。子选择器使用尖角号(>)表示。

【示例】演示如何使用子选择器为不同结构中的标签定义样式。

在标签内添加标签，定义一个内部样式表。然后定义所有span元素的字体大小为12像素，再利用子选择器定义所有div元素包含的子元素span的样式为24像素。

HTML 文档树状结构

2.3 相邻选择器

　　相邻选择器，通过加号(+)分隔符进行定义。其基本结构是第一个选择器指定前面相邻元素，后面的额选择器指定相邻元素。前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为兄后为弟，否则样式无法应用。

【示例】通过4种情况对相邻选择符应用范围进行测试。

【效果示意图】

1 通过浏览器预览发现：情况1、情况2、情况4均有效，情况3无效。
2 相邻选择器编写CSS样式：第1个元素为兄，第2个元素为弟，则HTML代码中兄和弟的关系不能调换，否则样式无效；再者无论有多少父层，只要它们是直接兄弟关系，则样式有效，这一点与子选择器是有区别的。

2.4 兄弟选择器

　　CSS增加了一种新的选择器组合形式——兄弟选择器。它通过波浪符号(~)分隔符进行定义。其基本结构是第一个选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素，前后选择符的关系是兄弟关系，即在HTML结构中两个标签前为兄后为弟，否则样式无法应用。

兄弟选择器和相邻选择器区别：

兄弟选择器能够选择前置元素后同级的所有匹配元素，而相邻选择器只能选择前置元素后相邻的一个匹配元素。

【示例】以相邻选择器示例为基础，修改其中p+h3｛background-color:#0099FF;｝样式为p~h3{background-color:#0099FF;}，具体样式代码如下：

【效果示意图】

2.5 分组选择器

　　分组选择器通过逗号(，)分隔符进行定义。其基本结构是第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后把前后选择器匹配的元素都取出来。

　　通过分组选择器可以实现集体声明，将样式表中一致的CSS样式放在一起，然后通过逗号链接这些选择器，减少代码的书写量。

【示例】通过分组选择器集中声明上面学过的符合选择器。

【效果如下】

1、:first-child

:first-child是用来选择某个元素的第一个子元素，比如我们这里的这个demo，你想让列表中的"1"具有与从不同的样式，我们就可以使用:first-child来实现：

.demo li:first-child {background: green; border: 1px dotted blue;}

在没有这个选择器出现之前，我们都需在要第一个li上加上一个不同的class名，比如说“first”，然后在给他应用不同的样式

.demo li.first {background: green; border: 1px dotted blue;}

其实这两种最终效果是一样的，只是后面这种，我们需要在html增加一个额外的class名，请看效果：

2、:last-child

:last-child选择器与:first-child选择器的作用类似，不同的是":last-child"选择是的元素的最后一个子元素。比如说，我们需要单独给列表最后一项一个不同的样式，我们就可以使用这个选择器，如：

.demo li:last-child {background: green; border: 2px dotted blue;}

这个效果和以前在列表上的“last”的class是一样的

.demo li.last {background: green; border: 2px dotted blue;}

3、:nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：

• :nth-child(length);/*参数是具体数字*/
• :nth-child(n);/*参数是n,n从0开始计算*/
• :nth-child(n*length)/*n的倍数选择，n从0开始算*/
• :nth-child(n+length);/*选择大于length后面的元素*/
• :nth-child(-n+length)/*选择小于length前面的元素*/
• :nth-child(n*length+1);/*表示隔几选一*/

:nth-child()可以定义他的值（值可以是整数，也可以是表达式），如上面所示，用来选择特定的子元素，对于这个我们直接看实例，比我说的更好理解。

.demo li:nth-child(3) {background: lime;}

4、:nth-last-child()

":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。我们来看几个实例：

.demo li:nth-last-child(4) {background: lime;}

5、:nth-of-type

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处，比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：

.demo p:nth-of-type(even) {}

其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器

6、:nth-last-of-type

这个选择器不用说大家都能想得到了，他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。

同样在IE6-8和FF3.0-浏览器不支持这种选择器

7、:first-of-type和:last-of-type

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。

:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大，我们前面讲的:nth-child之类选择器就能达到这此功能，不过大家要是感兴趣还是可以了解一下，个人认为实用价值并不是很大。此类说法仅供参考。

8、:only-child和:only-of-type

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。我们一起来看一个实例更好理解

CSS样式：

.demo .post p {background: lime;}

9、:empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示，那你就可这样来写：

p:empty {display: none;}

3.3 否定伪类

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现：

input:not([type="submit"]) {border: 1px solid red;}

3.4 状态伪类

　　状态伪类主要针对表单进行设计的，由于表单是UI设计的灵魂，因此吸引了广大用户的关注，UI是User Interface(用户界面)的缩写，UI元素的状态一般包括:可用、不可用‘选中、未选中、获取焦点、失去焦点、锁定、待机等。

　　 CSS3新定义了3种常用的UI状态伪类选择器。简单说明如下：

1、:enabled

:enabled伪类表示匹配指定范围内所有UI元素。在网页中，UI元素一般是指包含在form元素内的表单元素。例如，在下面表单结构中，input:enabled选择器将匹配文本框，但不匹配该表单中的按钮。

2、:disabled

:disabled伪类表示匹配指定范围内所有不可用UI元素。例如，在以下表单结构中，input:disabled选择器将匹配按钮，但不匹配该表单中的文本框。

3、:checked

:checked伪类表示匹配指定范围内所有可用UI元素。例如，在以下表单结构中，input:checked选择器将匹配片段中单选按钮，但不匹配该表单中的复选框。

　　在表单中，这些状态伪类是比较常用的，最常见的type="text"有enable和disabled两种状态，前者为可写状态，后者为不可状态。