E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串，E可以省略，如果省略，表示可以匹配满足条件的任意字符。例如，div[id^="section"]表示匹配包含id属性，且id属性是以"section"字符串开头的div元素。
上面那个例子说明了只要p元素的id属性是以“one”字符串 开头就会被选中，而呈现特殊的文本效果。 1.2 E[att$=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串，E可以省略，如果省略，表示可以匹配满足条件的任意字符。例如，div[id$="section"]表示匹配包含id属性，且id属性是以"section"字符串结尾的div元素。
上面那个例子说明了只要p元素的id属性是以“main”字符串结尾就会被选中，而呈现特殊的文本效果。
1.3 E[att*=value]属性选择器 E[att*=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含value的子字符串，E可以省略，如果省略，表示可以匹配满足条件的任意字符。例如，div[id*="section"]表示匹配包含id属性，且id属性是包含"section"字符串的div元素。
上面那个例子说明了只要p元素的id属性包含“demo”字符串就会被选中，而呈现特殊的文本效果。
2.关系选择器 css3中的关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器有符号“>”连接，兄弟选择器由符号"+"和"~"连接。 2.1 子代选择器（>） 子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为h1子元素的strong元素，可以这样写：h1>strong。
上述例子说明，第15行代码中的strong元素为h1元素的子元素，第16行代码中的strong元素为h1的孙元素，因此代码设置样式只是对15行代码起作用。
2.2 兄弟选择器 兄弟选择器用来选择与某元素位于同一父元素之中，且位于该元素之后的兄弟元素，兄弟选择器分为临近兄弟选择器和普通兄弟选择器。 <1> 临近兄弟选择器 该选择器使用+号来连接前后两个选择器。选择器中的两个元素有同一个父亲，而第二个元素必须紧跟第一个元素。 <2> 普通兄弟选择器
该选择器使用"~"好来连接前后两个选择器。选择器中的两个元素有同一个父亲，而第二个元素不必紧跟第一个元素。
3. 结构化伪类选择器 结构化伪类选择器是css3中新增的选择器。常用的结构化伪类选择器有:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n)选择器、:empty选择器、:target选择器。 3.1 :root选择器 :root选择器用来匹配文档根元素，在html中根元素是html元素。也就是说使用“:root选择器”定义的样式对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。 3.2 :not选择器 如果对某个结构元素使用样式，单行排除这个元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。如body*:not(h2){}该选择器用于排除body结构中的子结构元素h2。 3.3 :only-child选择器 :only-child选择器用于匹配属于某父元素的唯一子元素的元素。 3.4 :first-child选择器 和 :last-child选择器 :first-child选择器 和 :last-child选择器分别用于父元素中第一个或者最后一个子元素设置样式。如p:first-child{} 3.5 :nth-child(n)选择器 和 :nth-last-child(n)选择器 :nth-child(n)选择器 和 :nth-last-child(n)选择器分别用于父元素中第N个或者倒数第N个子元素设置样式。 3.6 :nth-of-type(n)选择器 和 :nth-last-of-type(n)选择器 :nth-child(n)选择器 和 :nth-last-child(n)选择器与类型无关，:nth-of-type(n)选择器 和 :nth-last-of-type(n)选择器用于匹配属于父元素的特殊类型的第n各元素和倒数第n各元素。 3.7 :empty选择器 用来选择没有子元素活文本内容为空的所有元素。 3.8 :target选择器 用来为页面的某个target元素（该元素的id被当做页面中的超链接来使用指定样式），只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。 4. 伪元素选择器 所谓为元素选择器，是针对css中已经定义好的伪元素使用的选择器。 4.1 :before选择器 :before选择器用于被选元素前面插入内容，必须配合content属性指定要插入的内容。 <元素>:before{ content:文字/url(); } 例如 p:before{ content:"传智播客"; color:red; font-size:20px; font-family:"微软雅黑"; font-weight:bold; } 4.2 :after选择器 :after选择器用于在某个元素之后插入一些内容，使用方法与:before相同。 p:after{ content:url(images/tu.jpg); } 5. 链接伪类 它的名称通常由标记名、类名或者id名加上:构成。 超链接标记<a>的伪类 含义 a:link{css样式规则} 未访问时超链接的状态 a:visited{css样式规则} 访问后超链接的状态 a:hover{css样式规则} 鼠标经过、悬停时超链接的状态 a:active{css样式规则} 鼠标单击不动时超链接的状态 注意： （1）同时使用链接的4种伪类时，通常按照a:link a:visited a:hover a:active的顺序书写，否则定义的样式可能不起作用。 （2）除文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。
