CSS选择器

    CSS选择器是规定了怎么通过css，获取前端界面的某个、具有一定关系（相同的属性、父子、并列等）元素，如果获取了想要的元素就可以进行下一步操作，所以，CSS选择器是前端设计的一个基础。

    CSS选择器分为：文档选择器、并列选择器、ID选择器、类别选择器、父子选择器、相邻兄弟选择器、属性选择器等。

    下面就对每种选择器列举一些实际的样例，不用过多解释，根据例子，很快就能明白使用语法和用途。

    1、文档选择器：这里的文档代码HTML元素名称，就是直接通过html元素名选择。如：p、h1、a、em（emphasis，强调显示的意思，通常在浏览器中显示样式为斜体字）、html等。

实例：

html {color:black;}

h2 {color:silver;}

p {color:gray;}

    2、并列选择器：就是将具有相同css样式的元素使用逗号（，）隔开。

实例：

h2, p {color:gray;}

body, h2, p, table, th, td, pre, strong, em {color:gray;}

    3、ID选择器：通过元素的id选择，使用#符号标识。

实例：

#intro {font-weight:bold;}

    4、属性选择器：通过相同的属性来获取元素，将属性写到元素的后面的[属性 ]中括号中。

实例：

将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

a[href][title] {color:red;}

    5、后代元素选择器：通过父元素定位某个或一类所有后代（元素之间使用空格）子孙元素。可以是父子，也可以是爷孙等，只要具有辈分关系即可。

实例：

某个子元素：

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

某些子元素：

ul em {color:red;}

    6、父子选择器：对比于后代选择器，这里只局限于一代父子关系的元素。使用 > 符号表示。

实例：

h1 > strong {color:red;}

   

 7、相邻兄弟元素选择器：两个紧紧相邻的元素，且他们又具有相同的父元素。用一个结合符只能选择两个相邻兄弟中的第二个元素。常用于并列的样式中，不选择首个。用 + 加号表示。

实例：

li + li {font-weight:bold;}