CSS选择器是学习CSS的核心部分。HTML页面中的元素是通过CSS选择器控制的。熟练使用CSS选择器可以根据文档结构快速制作出一对一的文档样式。一对多或多对一的控制和调整。1、CSS元素选择器（typeselector）文档的元素是最基本的选择器，也是最常用的选择器。如果你设置了HTML的样式，选择器通常会是一个HTML元素，比如p,h1,em,a，甚至可以是html本身，比如：html{margin:0;padding:0;}h1{font-family:"ChineseKaiti";颜色：蓝色；}a{字体大小：16px；text-decoration:none;}在W3C标准中，元素选择器也称为类型选择器。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中元素类型的每一个实例，因此可以通过类型选择器匹配HTML和XML等标记语言，甚至一些自定义标签也会生效。二、CSS类选择器类选择器允许您以独立于文档元素的方式指定样式。该选择器可以单独使用，也可以与其他元素结合使用。提示：这些选择器只有在文档被适当标记（指定class属性）时才能使用，因此使用它们通常需要一些预先考虑和计划。无论特定设计元素如何，应用样式的最常见方法是使用类选择器。语法：有一个“.”在类选择器前面。/*基本语法*/.important{color:red;}/*与通配符结合使用*/*.important{color:red;}/*与元素结合使用，解释为：class属性值为p的所有p元素很重要*/p.important{color:red;}CSS多类选择器HTML元素的类属性可以包含由空格分隔的单词列表，单词的顺序无关紧要。如：这段非常重要。
这一段非常警告。这一段是一个非常重要的警告。所有具有important类的元素都是粗体，所有具有classwarning的元素都是斜体，所有同时具有important和warning类的元素都有银色背景。可以写成：.important{font-weight:bold;}.warning{font-style:italic;}/*注意：HTML元素的class属性中的两个词需要用“空格”分隔，在CSSCannotbeseparatedby"space"*/.important.warning{background:silver;}注意：将两个类选择器链接在一起只能选择同时包含这些类名的元素（类名顺序不限）),如果一个多类选择器包含一个不在类名列表中的类名，匹配将失败。例如：p.important.urgent{background:silver;}这个选择器将只匹配在类属性中同时包含单词important和urgent的p元素。因此，如果p元素的类属性中只有important和warning这两个词，它就不会匹配。但是可以匹配以下元素：Thisparagraphisaveryimportant.这段很重要。3.CSSID选择器语法：ID选择器放在前面通过个人“#”。/*基本语法*/#intro{font-weight:bold;}/*与通配符一起使用*/*#intro{font-weight:bold;}与Javascript的区别：/*可以匹配同一页面中的所有ID最重要的元素*/#mostImportant{color:red;background:yellow;}/*同一个页面，只能获取文档中ID最重要的第一个内容*/document.getElementById("mostImportant").innerHTML;这个很重要！这个很重要！这一点很重要！与类选择器的区别：区别一：与类选择器不同，ID选择器只能在文档中使用一次，在HTML文档中只能使用一次。区别二：不能使用ID词表与类选择器不同，ID选择器不能组合使用，因为ID属性不允许使用空格分隔的词表。注意：关于命名：id和class属性不能以数字开头。以数字开头的ID在Mozilla/Firefox浏览器中不起作用；关于大小写：id和class在HTML和XHTML中区分大小写。四、CSS属性选择器CSS2引入了属性选择器。属性选择器可以根据元素的属性和属性值来选择元素。简单属性选择:/*按单个属性选择*/*[title]{color:red;}a[href]{color:red;}/*按多个属性选择，注意：匹配包含多个属性的元素同时*/a[href][title]{color:red;}img[alt][title]{border:5pxsolidred;}按完全匹配的属性值选择:/*按单个属性值选择*/a[href="http://xiachengwei5.coding.me"]{color:red;}/*多个属性值选择*/a[href="http://xiachengwei5.coding.me"][title="飐'sblog"]{color:red;}选择器说明[属性]用于根据某些属性值选择具有指定属性的元素。[attribute=value]用于选择具有指定属性和值的元素。[attribute~=value]用于选择属性值包含指定词表的元素，value匹配一个不带空格的字符串。[attribute|=value]用于选择以指定值开头的元素，匹配值或值-。[attribute^=value]匹配每个属性值以指定值开头的元素，可以是任意值，推荐使用。[attribute$=value]匹配属性值以指定值结尾的每个元素。[attribute*=value]匹配属性值包含指定值的每个元素。该值可以是任意值，推荐使用。五、CSS后代选择器（包括选择器）后代选择器可以选择作为某个元素的后代的元素。语法：父元素和子元素从左到右排列，以空格分隔。/*匹配h1下的所有em元素*/h1em{color:red;}/*匹配class为"maincontent"的所有div下的所有a元素*/div.maincontenta{color:blue;}这是一个重要标题
这是一个重要段落。
注意：后代选择器的一个容易被忽视的方面是两个元素之间的层次间距可以是无限的。例如，如果您编写ulem，则此语法会选择从ul元素继承的所有em元素，无论em嵌套的深度如何。因此，ulem将选择以下标记中的所有em元素：0- Listitem1
- Listitem1-1
- Listitem1-2
- Listitem1-3
- Listitem1-3-1
- 列表项1-3-2
- 列表项1-3-3
- Listitem1-4
- Listitem2
- Listitem3
六、CSS子元素选择与descendant比较选择器，子选择器（Childselectors）只能选择一个元素的子元素。如果你不想选择任何后代元素，而是想缩小范围，只选择一个元素的子元素，那么使用子元素选择器。后代元素：所有被它包裹的元素；子元素：被它包裹的元素，层次结构只比它低一级；语法：父元素和子元素从左到右排列，中间用>分隔。/*选择强元素，它只是h1元素的子元素*/h1>strong{color:red;}这非常非常重要。
这真的非常重要。
合并背景选择器和子选择器/*选择class为"company"的table的所有后代td的所有子元素p*/table.companytd>p七、CSS相邻兄弟选择器可以选择紧跟在另一个元素之后的元素，并且两者具有相同的父元素。语法：兄弟元素从左到右排列，中间用+隔开。/*选择紧跟在h1之后的元素（无法匹配到前面的元素），且两者父元素相同*/h1+p{color:red;}第一个段落
标题
第二段
第二段
总结：选择器说明h1p后代选择器，选择所有后代元素。h1,p多元素选择器，以“,”分隔，同时匹配元素h1或元素p。h1>p子元素选择器，选择它的子元素。h1+p相邻兄弟选择器，选择其后面的相邻兄弟元素（具有相同的父元素）。h1~p是一个通用的兄弟选择器，它选择它后面的所有兄弟元素（具有相同的父元素）。8.CSS伪类用于给某些选择器添加特殊效果。语法：选择器和伪类由:分隔。/*selector:pseudo-class*/selector:pseudo-class{property:value}/*CSSclasses也可以和伪类一起使用*/selector.class:pseudo-class{property:value}anchorpseudo-classa:link{color:#FF0000}/*未访问的链接*/a:visited{color:#00FF00}/*已访问的链接*/a:hover{color:#FF00FF}/*鼠标移动到链接*/a:active{color:#0000FF}/*selectedlink*/在CSS定义中，a:hover必须放在a:link和a:visited之后才有效。在CSS定义中，a:active必须放在a:hover之后才有效。伪类名称不区分大小写。:first-child和:laft-child:first-child伪类可用于选择元素的第一个子元素。/*选中第一个p元素，不是p元素的第一个子元素*/p:first-child{font-weight:bold;}/*选中最后一个p元素，不是p元素的最后一个子元素*/p:last-child{font-weight:bold;}/*选择第一个li元素，不是li元素的第一个子元素*/li:first-child{text-transform:uppercase;}/*CSS设置字母大小写*/li:first-child{text-transform:lowercase;}伪类摘要选择器含义E:first-child匹配element的第一个子元素EE:link匹配所有没有被点击过的链接E:visited匹配所有被点击过的链接E:active匹配鼠标已经按下但还没有松开的E元素E:hover匹配E元素E:foc鼠标悬停在us匹配具有当前焦点的E元素E:lang(c)匹配lang属性等于c的E元素E:enabled匹配以E:disabled形式可用的元素以E:checked形式匹配禁用元素匹配表单中选中的单选或复选框元素E::selection匹配用户当前选中的元素E:root匹配文档的根元素。对于HTML文档，HTML元素E:nth-child(n)匹配其父元素的第n个子元素，第一个数为1E:nth-last-child(n)匹配其父元素的倒数第n个子元素,第一个数是1E:nth-of-type(n)类似于:nth-child(),但只匹配标签相同的元素E:nth-last-of-type(n)类似于:nth-last-child()，但只匹配标签相同的元素E:last-child匹配父元素的最后一个子元素，等价于:nth-last-child(1)E:first-of-type匹配父元素下第一个使用相同标签的子元素，等价于:nth-of-type(1)E:last-of-type匹配父元素下最后一个使用相同标签的子元素，等价于:nth-last-of-type(1)E:only-child匹配父元素下唯一的子元素，相当于:first-child:last-child或:nth-child(1):nth-last-child(1)E:only-of-type匹配父元素下唯一的子元素t使用相同的标签，相当于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)E:empty匹配一个元素不包含任何子元素，文本节点也被认为是子元素E:not(selector)匹配任何不匹配当前选择器的元素。伪元素伪元素可用于定位文档中包含的文本。为了区别于伪类，伪元素用双冒号::定义，但是单冒号：也被属性description::first-letter识别，为文本的第一个字母添加特殊的样式。::first-line向文本的第一行添加特殊样式。::before在元素之前添加内容。::after在元素之后添加内容。::focus在元素之后添加内容。9.参考资料W3SchoolCSS选择器CSS选择器详解十分钟搞定CSS选择器
