CSS3选择器

属性选择器

在CSS3中，增加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]。

[att*=val]属性选择器

[att*=val]属性选择器的含义是：如果元素用att表示的属性之属性值中包含用val指定的字符的话，则主元素使用这个样式。

示例文本1
示例文本1-1
示例文本1-2
示例文本2
示例文本2-1
示例文本2-2

示例代码中，如果使用[att*=val]属性选择器，则页面中id为section1、subsection1-1、subsection1-2的div元素的背景色都变为黄色，因为这些元素的id属性中都包含section1字符。

[id*=section1]{
    background-color: yellow;
}

[att^=val]属性选择器

[att^=val]属性选择器的含义是：如果元素用att表示的属性之属性值的开头字符为用val指定的字符的话，则该元素使用这个样式。
示例代码中，如果使用[att^=val]属性选择器，并且将val指定为section，则页面中id为section1、section2的div元素的背景色都变为黄色，因为这些元素的id属性的开头字符都为section字符。

[id^=section1]{
    background-color: yellow;
}

[att$=val]属性选择器

[att$=val]属性选择器的含义是：如果元素用att表示的属性之属性值的结尾字符为用val指定的字符的话，则该元素使用这个样式。
示例代码中，如果使用[att$=val]属性选择器，并且将val指定为-1，则页面中id为subsection1-1、subsection2-1的div元素的背景色都变为黄色，因为这些元素的id属性的结尾字符都为-1字符。另外注意该属性选择器中必须在指定匹配字符前加上\这个转义字符。

[id$=\-1]{
    background-color: yellow;
}

结构性伪类选择器

CSS 中的类选择器及伪元素

什么是伪类选择器

在CSS中，可以使用类选择器把相同的元素定义成不同的样式，譬如针对一个p元素，我们可以做如下所示的定义。

p.right{text-align:right}
p.center{text-align:right}

然后在页面上对p元素使用class属性，来把定义好的样式指定给具体的p元素。

测试文字
测试文字

除了上面所述的类选择器之外，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，但是伪类选择器是css中已经定义好的选择器，不能随便起名。

//a元素上的几种伪类选择器
a:link{color:#FFOOOO;text-decoration:none}
a:visited{color:#OOFFOO;text-decoration:none}
a:hover{color:#FFOOFF;text-decoration:underline}
a :active{color:#OOOOFF; text-decorationlunderline}

什么是伪元素选择器

所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器。

选择器:伪元素{属性:值}
选择器 类名:伪元素{属性:值}

主要有如下四个伪元素选择器。

first-line伪元素选择器，用于为某个元素中的第一行文字使用样式。
first-letter伪元素选择器，用于为某个元素中的文字的首字母或第一个字使用样式。
before伪元素选择器，用于在某个元素之前插入一些内容。

//可以插入一段文字
<元素> :before{
content:插入文字
}
//也可以插入其他内容
<元素>:before{
content:url(test.wav)
}

after伪元素选择器，用于在某个元素之后插入一些内容。用法与before用法一样。

//first-line
p:first-line{color:#0000FF} 
段落中的第一行。
段落中的第二行
//first-letter
p:first-letter{color:#0000FF}  
This is an english text。
这是一段中文文字。
//before
li:before{content: ●}

    列表项目1
    列表项目2
     列表项目3
     列表项目4
     列表项目5


//after
li:after{
    content: "(仅用于测试，请勿用于商业用途。)";
    font-size:12px;
    color:red;
}
电影清单

    狄仁杰之通天帝国
    精武风云
    大笑江湖

选择器root、not、empty和target

root选择器

root选择器将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指部分。

:root{
    background-color: yellow;
}
body{
    background-color: limegreen;
}
选择器概述

    选择器是CSS3中一个重要的内容。首先需要说明的是，使用选择
器的目的是为了提高开发人员书写或修改样式表时的工作效率，因为在样式表中，一般会书写大量
的代码，在大型网站中，样式表中的代码可能会达到几千行。

not选择器

如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。

body *:not(h1){
    background-color: yellow;
}

empty选择器

使用empty选择器来指定当元素内容为空白时使用的样式。

:empty{
    background-color: yellow;
}

A B C
D E

target选择器

使用target选择器来对页面中某个target元素(该元素的id被当做页面中的超链撞来使用)指定样式，该样式只在用户点击了页面中的起链接，并且跳转到target元素后起作用。

:target{
    background-color: yellow;
}

    示例文字1 | 
    示例文字2 | 
    示例文字3 | 
    示例文字4 | 
    示例文字5 


    示例文字1
    ...此处略去


    示例文字2
    ...此处略去


    示例文字3
    ...此处略去


    示例文字4
    ...此处略去


    示例文字5
    ...此处略去

选择器：first-child 、last-child、nth-child和nth-Iast-child

单独指定第一个子元素、最后一个子元素的样式

要选中父元素中的第一个子元素、最后一个子元素，可以使用first-child和last-child。

li:first-child{
    background-color: yellow;
}
li:last-child{
    background-color: skyblue;
}
列表A

    列表项目1
    列表项目2
    列表项目3
    列表项目4
    列表项目5

对指定序号的子元素使用样式

如果使用nth-child选择器与nth-Iast-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式。

li:nth-child(2){
    background-color: yellow;
}
li:nth-last-child(2){
    background-color: skyblue;
}
列表A

    列表项目1
    列表项目2
    列表项目3
    列表项目4
    列表项目5

对所有第奇数个子元素或第偶数个子元素使用样式

除了对指定序号的子元素使用样式以外，nth-child选择器与nth-Iast-child选择器还可以用来对某个父元素中所有第奇数个子元素或第偶数个子元素使用样式。

//所有正数下来的第奇数个子元素
nth-child (odd) {
//指定样式
}
//所有正数下来的第偶数个子元素
<子元素>:nth-child(even){
//指定样式
}
//所有倒数上去的第奇数个子元索
<子元素>:nth-last-child(odd){
//指定样式
}
//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(even){
//指定样式
}

这两个选择器用于某些元素时，会产生一些问题。

h2:nth-child(odd){
    background-color: yellow;
}
h2:nth-child(even){
    background-color: skyblue;
}

    文章标题A
    文章正文。
    文章标题B
    文章正文。
    文章标题C
    文章正文。
    文章标题D
    文章正文。

nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。
换句话说，h2:nth-child(odd)这句话的含义，并不是指"针对div元素中第奇数个h2子元素来使用"，而是指当div元素中的第奇数个子元素如果是h2子元素的时候使用"。

选择器: nth-of-type和nth-Iast-of-type

使用这两个选择器的时候， CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候，就只针对同类型的子元素进行计算了。

h2:nth-of-type(odd){
    background-color: yellow;
}
h2:nth-of-type(even){
    background-color: skyblue;
}

循环使用样式

nth-child(xn+y)，x表示每次循环中共包括几种样式，y表示指定的样式在循环中所处的位置。

//4种背景色作为一组循环
li:nth-child(4n+1) {
background-color: yellow;
}
li:nth-child(4n+2) {
    background-color: limegreen;
}
li:nth-child(4n+3) {
    background-color: red;
}
li:nth-child(4n+4) {
    background-color: white;
}

only-child选择器

only-child选择器指定当某个父元素中只有一个子元素时才使用的样式。
与only-child选择器作用相同的用法还有：

<子元素>:nth-child(1):nth-last-child(1){}
<子元素>:nth-of-type(1):nth-last-of-type(1){}

UI元素状态伪类选择器

这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
在CSS3中，共有11种UI元素状态伪类选择器，分别是E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate及E::selection。

选择器：E:hover、E:active和E:focus

E:hover选择器用来指定当鼠标指针移动到元素上面时元素所使用的样式。
E:active选择器用来指定元素被激活(鼠标在元素上按下还没有松开)时使用的样式。
E:focus选择器用来指定元素寂得先标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用。

input[type="text"]:hover{
        background-color: greenyellow;
}
input[type="text"]:focus{
        background-color: skyblue;
}
input[type="text"]:active{
        background-color: yellow;
}

姓名：
地址：

E:enabled伪类选择器与E:disabled伪类选择器

E:enabled伪类选锋器用来指定当元素处于可用状态时的样式。
E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。




可用
不可用

E:read-only伪类选择器与E:read-write伪类选择器

E:read-only伪类选择器用来指定当元素处于只读状态时的样式。
E:read-write伪类选择器用来指定当元素处于非只读状态时的样式。



    名前：
    
地址：

伪类选择器：E:checked 、E:default和E: indeterminate

E:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式。



兴趣:阅读
旅游
看电影
上网

E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是，即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效。



兴趣:阅读
旅游
看电影
上网

E:indeterminate伪类选择器用来指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定。



年龄：
男
女

E::selection伪类选择器

E::selection伪类选择器用来指定当元素处于选中状态时的样式。

这是一段测试文字。

通用兄弟元素选择器

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

<子元素>~<子元素之后的同级兄弟元素> {
  //指定样式
}

这里的同级是指子元素和兄弟元素的父元素是同一个元素。



  
    p元素为div元素的子元素
    p元素为div元素的子元素
  
  
  p元素为div元素的兄弟元素
  p元素为div元素的兄弟元素
  
  p元素为div元素的兄弟元素
  
  p元素为div元素的子元素
  
  p元素为div元素的兄弟元素

使用选择器在页面中插入内容

使用选择器

在CSS2中，使用before选择器在元素前面插入内容，使用after选择器在元素后面插入内容，在选择器的content属性中定义要插入的内容。
为了让插入的文字具有美观效果，可以在选择器中加入文字的颜色、背景色、文字的字体等各种样式。

h2:before {
  content: 'test';
  color: white;
  background-color: orange;
  padding: 1px 5px;
  margin-right: 10px;
}
标题文字

指定个别元素不进行插入

将content的属性值设置为none，指定为不插入内容。还可以将content的属性值设置为normal，其作用和使用方法与none相同。

插入图像

h2.new:before {
  content: url(mark.png)
}

如果在content属性中通过attr(属性名)这种形式来指定attr属性值，可以将某个属性的属性值显示出来。

img:after {
  content: attr(alt);
  text-align: center;
  margin-top: 5px;
}