在这一篇中,主要总结一下CSS中的选择器。
CSS中的选择器主要包括:
- 派生选择器:通过依据元素在其位置的上下文关系来定义样式。包括后代选择器,子元素选择器,相邻兄弟选择器。
- id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式。
- 类选择器:可以为class的 HTML 元素指定特定的样式。
- 属性选择器:为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
(1) 选择器分组:可以将任意多个选择器分组在一起,中间以 ‘,‘ 隔开。
例:body, h2, p, table, th, td, pre, strong, em { color : gray ; }
(2) 类选择器的几种用法
- 与元素选择器结合:
例:p.important {color:red;}
匹配 class为 important 的所有 p 元素,但是其他任何类型的元素都不匹配。
- 多类选择器:(IE7之前不支持)
例:.important.warning {background:silver;}
匹配同时具有这两个class的元素。
(3) 属性选择器:根据元素的属性匹配元素
- 简单属性选择
例:a[title] {color:red;} 只对有 title 属性的 a 元素应用样式。
- 根据具体属性值选择
例:input[name=‘basketball‘] 只选择有特定属性值的元素。
- 属性与属性值完全匹配
例:对于<p class="important warning">This paragraph is a very important warning.</p>,
使用 p[class="important warning"] {color: red;}
- 根据部分属性值匹配
例:对于<p class="important warning">This paragraph is a very important warning.</p>,
使用 p[class~="important"] {color: red;} 根据属性值中的词列表的某个词进行选择。
- 子串匹配属性选择器
input[name^=‘foot‘]:匹配给定的属性是以某些值开始的元素。
input[name$=‘ball‘]:匹配给定的属性是以某些值结尾的元素。
input[name*=‘sket‘]:匹配给定的属性是以包含某些值的元素。
(4) 后代选择器
例:h1 em {color:red;},匹配h1后代中所有em
例:h1 > strong {color:red;},选择只作为 h1 元素子元素的 strong 元素。
(5) 相邻兄弟选择器
例:h1 + p {margin-top:50px;},匹配相同父元素下,h1之后出现的p元素。
(6) 伪类
如a链接的 :visited, :hover等,input的:focus, :checked, :disabled 等,:first-child, :first-of-type, :nth-of-type, nth-child, :before, :after 等。