🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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]**作业:**把所有常用的选择器都练习下。