[TOC] >[info]当我们定义一条样式规则时候，这条样式规则会作用于网页当中的某 些元素，选择器是一种模式，用于选择需要添加样式的元素。下面列表常用的选择器。 ## id选择器 >[danger]唯一的，一个页面只出现一次，一般用于JS的获取元素，以 "#" 来定义 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： ~~~ <style type="text/css"> #red {color:red;} #green {color:green;} p#red{ color:blue; } </style> ~~~ 下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。 ~~~ <p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p> ~~~ ## 类选择器 >[danger]作用于一类标签的，需要的加上这个类名就可以,类选择器以一个点号显示： ~~~ <style type="text/css"> .center {text-align: center} h1.center{font-size:14px;} </style> ~~~ 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。 ~~~ <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> ~~~ ## 标签选择器 >[danger]作用于同一个标签,以标签名为选择器： ~~~ <style type="text/css"> p {text-align: center} </style> ~~~ 下面的 HTML 代码中，标签为p都会被作用到 ~~~ <p>我是P标签包含的</p> <h1>我是H1标签包含的</h1> <p>我是P标签包含的</p> ~~~ ## 群组选择器 >[danger]同时匹配所有p元素或td元素，li元素,之间用逗号分隔 ~~~ <style type="text/css"> p, td, li { line-height:20px; color:#c00; } </style> ~~~ ## 后代选择器 >[danger]后代元素选择器，匹配所有属于#nav元素后代的li元素 ~~~ <style type="text/css"> #nav li { display:inline; } </style> ~~~ ## 通用选择器 >[danger]通用选择器用*来表示，作用于所有元素，一般在项目初始化时使用 ~~~ <style type="text/css"> * { font-family: "微软雅黑"; } </style> ~~~ ## 伪类选择器 >[danger]同一个元素在不同状态下的不同样式 下面例子：选择鼠标指针浮动在其上的元素，并设置其样式： ~~~ <style type="text/css"> a:hover{ background-color:yellow; } </style> ~~~ [更多伪类选择器](http://www.w3school.com.cn/cssref/css_selectors.asp) ## CSS命名规范 * 对于页面中具有唯一性、结构性的模块，使用id选择器，其他 一般采用class选择器 * 选择器命名一律使用小写字母 * 要有合理的注释 * 结构上有父子包含关系的样式，应通过命名体现。 * 命名使用驼峰结构+横线，即同一对象的命名如果需要多个单 词，使用驼峰命名法则，如：boxMusic * 名字不能以数字开头 * 命名的时候一定要有意义 >[danger]**作业：**把所有常用的选择器都练习下。