二、CSS之——选择器

功能：可以通过元素选择器选择页面中所有指定的元素。
语法：标签名称{}

功能：通过元素的类属性值选择一组元素。
语法：.class.属性值{}

id选择器的作用：通过元素的id属性值选择唯一的元素语法：#id属性值{

复合选择器（交集选择器)功能：可以同时选择满足多个选择器的元素。
语法：选择器1选择器2选择器N{}

选择器The。
分组功能（联合选择器）：借助选择器的分组，您可以同时选择多个选择器对应的元素语法：选择器1、选择器2、选择器N{}

>

通配符选择器的作用：可以用来选择页面上的所有元素。
语法：*{}

元素之间的关系：父元素：直接包含子元素的元素。
子元素：直接被其父元素包含的元素。
祖先元素：直接或间接包含后代元素的元素。
父元素也是后代元素：它直接或间接地被祖先元素包含。
包含元素，子元素也是后代元素：具有相同父元素的元素称为同级元素

功能：选择指定元素的指定后代元素语法：祖先元素elementdescendant{}。

有时您需要选择网页中本身没有标签但仍易于识别的部分，例如段落的第一行或鼠标悬停的链接。
CSS为它们提供了一些选择器：伪类和伪元素。

定义链接样式：有四个伪类，允许您根据访问者与链接交互的方式以4种不同的方式定义链接​​。

负伪类负伪类可以帮助我们选择一些不是其他的东西。
语法：:not(selector){}例如，p:not(.hello)标识除hello类之外的所有p元素。

属性选择器可以选择具有特殊属性的标签。
语法：[属性名称][属性名称=“属性值”][属性名称~=“属性值”][属性名称^=“属性值”][属性名称|=“属性值”][属性名称$="属性值"][属性名*="属性值"]

子元素如body>h1将选择body标签中的所有h1标签。
IE6及更低版本的浏览器不支持子元素选择器

除非基于。
父子祖先关系，也可以根据兄弟关系查找元素。
语法：兄弟元素+兄弟元素：查找下一个兄弟元素~兄弟元素：查找所有后续兄弟元素。

当你使用CSS选择器选择页面上的元素时，经常会用到一个元素。
同时选定。
例如：

两个选择器都会选择元素h1。
如果两个选择器定义的样式不同，则不会出现冲突。
但是，如果两个选择器设置相同的样式，则应该设置哪种样式。
应用于h1？CSS将默认使用权重最高的样式。
我们来看看权重是如何计算的。
不同的选择器有不同的权重值：

css选择器

CSS（CascadingStyleSheet），中文翻译为“层叠样式表”，可以让设计者方便、灵活地控制网页的外观。
CSS于1996年经W3C审查批准并推荐使用。
CSS的引入是为了提高HTML语言对网页艺术设计的适应性。
详细的CSS规范可以在CSS手册或W3C官方网站（http://www.w3c.org）上找到。
使用CSS时，需要了解各种常用的选择器。
1.标签选择器。
HTML页面由许多不同的标签组成，CSS选择器确定哪些标签使用哪种CSS样式。
每个HTML标签的名称可以用作相应标签选择器的名称。
示例：

每个选择器都包含选择器本身、属性和值。
您可以设置多个属性和值，从而允许您为同一标签名称声明多种样式。
CSS语言对所有属性和值都有比较严格的要求。
如果CSS规范中没有指定声明的属性，或者特定属性的值不满足该属性的要求，则CSS声明将无效。
还有一个通配符选择器“*”，表示其中指定的样式将应用于网页的所有元素。
示例：

<html><head><title>类选择器</title>.red{color:red;font-size:18px;}.green{color:green;font-size:20px;</head><body>="red">类选择器1

="green">类选择器2

h3使用class</body></html>

<html><head><title>标识符选择</title>#bold{font-weight:bold;}#green{font-size:30px;color:#009900;</head><body>标识符选择器1

标识符选择器2

</body></html>

<html><head><title>交叉点选择器</title>p{/mark选择器/color:blue;}p.special{/mark.category选择器/color:red;}.special{/category选择器/color:green;</head><body>

纯段落文本（蓝色）...

纯标题文本（黑色）...

="special">指定类别的段落文本.special（红色）...

表示标题文本（绿色)类别.special...</body></html>

<html><head><title>合并选择器</title>h1,h2,h3.h4.h5.p{/并集选择器/颜色:紫色;字体大小:15px;}h2.special,.special,#one{/collectivedeclaration/text-decoration:underline;</head><body>

文本示例h1...

示例文本h2...

示例文本h3...

示例文本p1...

="special"">示例文本p2...

示例文本p3...

</body></html>

<html><head><title>后代选择器</title>pspan{/嵌套运算符/color:red;}span{color:blue;</head><body>

嵌套使用和CSS（红色）标签方法

标签（黑色）外部嵌套无效</body></html>

:hover:visited:active:首先行：第一个字母：第一个子项：第n个子项：第n个类型：第n个最后一个子项：第n个最后一个类型

CSS3中选择器

css3中的属性选择器选择器：root根选择器（相当于html）：非否定选择器（负选择器）：empty空选择器（选择没有任何元素的标签）：目标选择器selector：（类似元素标签，相同标签）：first-child第一个子元素：last-child最后一个子元素：nth-child(n):only-child当只有一个子元素时：n-th-last-child(n)倒数n：数字/表达式/奇数/偶数选择器：（标记同级元素，不同标记）：first-first类型的子元素：last类型的最后一个元素：类型为nth(n)：only-of-type当只有一个子元素时：nth-last-of-type(n)倒数n:数字/表达式/奇数/偶数选择器:(形式):禁用禁用：启用可用：选定的菜单默认选择器：:selection选定的默认值：只读只读：读写可写选择器：（例如div中的类名）div[class='a']{}类名必须包含div[class*='a']{}类名必须包含div[class^='a']{}类名开始带有div[class$='a']{}类名以a结尾