选择器
该内容是参考CSS权威指南(第三版)选择器章节总结的内容,只是本人前端面试的笔记。如有错误,欢迎指正。
- 元素选择器
h1 { color: red; font-size: 20px } <!-- 支持选择器分组 --> h1, p { color: red; font-size: 20px }
- 通配选择器
* { color: red; font-size: 20px }
- 类选择器和ID选择器
<!-- 类选择器 --> .warning { color: red; font-size: 20px } <!-- 类选择器结合元素选择器 只选择class为warning的p标签 --> p.warning { color: red; font-size: 20px } <!-- 多类选择器 可以同时针对拥有多个属性的标签进行选择 中间不允许存在空格 --> .warning.urgent { color: red; font-size: 20px } <!-- 类选择器可以忽略通配选择器 --> *.warning { color: red; font-size: 20px } <!-- 和下面的效果相同 --> .warning { color: red; font-size: 20px } ``` ```CSS <!-- ID选择器 --> #favorite { color: red; font-size: 20px } <!-- 因为元素的id在全局需要唯一(也可以不唯一,这样会选择多个元素标签,同时会对js造成影响),因此 ID选择器可以和元素选择器结合使用(没有实际意义,因为ID唯一,通过ID选择器已经可以进行确定)但是不可以多ID选择器。以下为错误情况。 --> #favorite#like { color: red; font-size: 20px } <!-- ID选择器同样可以忽略通配选择器 -->
- 属性选择器
<!-- 选择具有某些属性的元素 --> <!-- 选择所有具有class属性的元素 --> *[class] { color: red; font-size: 20px } <!-- 选择所有具有alt的h1元素 --> h1[alt] { color: red; font-size: 20px } <!-- 选择所有具有href和title属性的a元素 --> a[href][title] { color: red; font-size: 20px } <!-- 根据具体属性值选择某些元素 --> a[href='www.baidu.com'] { color: red; font-size: 20px } a[href='www.baidu.com'][title='link'] { color: red; font-size: 20px } <!-- 同时当根据具体属性选择某些元素的时候,值的查找是完全串匹配,如下所示 --> a[class='warning urgent'] { color: red; font-size: 20px } <a class='warning urgent'></a> <!-- 根据部分属性值选择某些元素 --> a[class~='warning'] { color: red; font-size: 20px } <!-- 可以与 --> a.warning { color: red; font-size: 20px } <!-- 具有相同的选择功能 --> <!-- 之所以存在这个属性选择器,是因为属性选择器不仅仅可以选择class,还可以选择其他的属性,对比于类选择器更加优秀 --> <!-- 类似于正则表达式的属性选择器 --> <!-- 选择foo属性值中包含bar的所有元素 --> [foo*="bar"] <!-- 选择foo属性值中以bar开头的所有元素 --> [foo^="bar"] <!-- 选择foo属性值中以bar结尾的所有元素 --> [foo$="bar"]
- 后代选择器
<!-- 后代选择器通过空格来作为分隔,这样会将所有的后代全部选择出来,不论嵌套层次有多深 --> div h1 { color: red; font-size: 20px } div ul ol ul em { color: red; font-size: 20px } div p, p em { color: red; font-size: 20px } <!-- 选择子元素 --> div > h1 { color: red; font-size: 20px } <!-- 可以结合其他选择器一起使用 --> table.summary td > p { color: red; font-size: 20px } <!-- 选择相邻兄弟元素 --> <!-- 选择ul之后的所有ol兄弟元素,另外兄弟元素选择需要严格按照HTML中出现的顺序 --> ul + ol { color: red; font-size: 20px }
- 伪类和伪元素选择器
<!-- 伪类选择器 --> <!-- 静态伪类选择器,即第一次显示后,一般不会再改变文档的格式 --> a:link { color: blue; } a:visited { color: red; } :first-child { 可以应用于很多元素上,这个静态伪类的含义并不是元素的第一个子结点,而是指是作为第一个子元素 } <!-- 动态伪类选择器,可以根据用户的行为来动态改变文档的外观,并且目前可以应用于任何元素 --> <!-- 可以接受键盘的输入或者某种激活的方式 --> input:foucs { color: orange; } <!-- 鼠标悬停在某个元素上 --> a:hover { color: green; } <!-- 鼠标停留在某个元素上,并且鼠标点击 --> a:active { color: pink; } <!-- 根据语言种类来调整字体格式 --> :lang(en) { font-style: italic; } <!-- 结合伪类,但是伪类之间不能相互冲突,且顺序没有要求 --> a:link:hover { color: orange; } a:visited:hover:lang(en) { color: orange; } a:link:visited { <!-- 这就是错误的 --> } <!-- 伪类的顺序很重要 link-visited-hover-active -->
伪元素选择器 :first-letter { } :first-line { } :before { } :after { }