问:CSS选择器类型有哪些?css
答:CSS选择器类型有:类型选择器,通用选择器,属性选择器,类选择器,ID选择器,伪类选择器,伪元素选择器。选择器以前可使用逗号『,』分组,也可使用空格,加号『+』,右尖括号『>』,波浪号『~』进行组合。html
本篇文章的内容相对比较简单基础一些,主要介绍了选择器相关的一些内容,原本打算把选择器和选择器权重计算相关的内容放在一块儿的,但这样篇幅实在太长,不便于阅读,因而这部分的内容会拆分为两篇内容,这篇说说选择器,下一篇说选择器权重的计算。在文章的结尾放了一张图,算是权重计算的一个引子。前端
CSS中,选择器用来指定网页上咱们想要格式化HTML元素的。CSS为咱们提供了不少种选择器方法,让咱们能够很精细的格式化咱们选择的元素的样式;在使用上,CSS选择器是不区分大小写的DIV{font-size:18px}
和div{font-size:18px}
效果是同样的。面试
选择器组(列表)
若是有多个使用相一样式的选择器,那么这些单独的选择器可使用逗号『,』组合为一个『选择器组』或者说『选择器列表』,例如:性能
// 相一样式的选择器 h1 {font-family:'苹方'} h2 {font-family:'苹方'} h3 {font-family:'苹方'} // 使用逗号分割,合成选择器组 h1, h2, h3{font-family:'苹方'}
PS:选择器组当中,若是其中一个选择器无效,则整个选择器组都无效,例如:
h1, ..h2, .h3 { font-family:'苹方' } 选择器..h2 是无效的,CSS会根据规则把整个选择器组删掉
简单选择器包括:类型选择,通用选择器,属性选择器,类选择器,ID选择器和伪类选择器。身为前端开发,这些简单的选择器咱们确定都用过,这里简单作下说明。字体
按照给定的节点名称,选择全部匹配的HTML元素。ui
语法:elementname
例子:spa
// 匹配全部的h1标签 h1 { font-size:18px } // 匹配全部的input标签 input{ font-size:18px }
选择全部的HTML元素,用星号(*)表示
语法:*
例子:code
// 把全部元素的内外边距都设置为0 * { padding: 0; margin: 0; } // 匹配全部div标签的子元素 div *{ font-size:18px }
按照给定的属性,选择全部匹配的元素
语法:[attr] [attr=value] [attr~=value] [attr!=value] [attr^=value] [attr$=value] [attr*=value]htm
例子:
表示具备attr属性的元素,不管该属性的值如何。
// 匹配具备title属性的全部a元素 a[title] { color: yellow; }
表示一个元素,其attr属性值刚好是“value”。
// 匹配target属性值为blank的全部a元素 a[target="blank"] { color: yellow; }
表示一个元素,其attr属性值为以空格分隔的单词列表,其中一个正好是“value”。
// 匹配class属性值包含special的元素 p[class~="special"]{ color: yellow; }
表示具备attr属性的元素,其值要么正好是“value”,要么以“value-”为前缀。
// 匹配lang属性的值为en或者en-为前缀的全部a元素 a[lang|="en"] { color: yellow; }
表示具备attr属性,属性值之前缀“value”开头的属性的元素。若是“value”是空字符串,则选择器不表明任何内容。
// 匹配HTML元素object,其属性type值是以image/开头的元素 object[type^="image/"] { color: yellow; }
表示具备attr属性,属性值之后缀“value”结尾的属性的元素。若是“value”是空字符串,则选择器不表明任何内容。
// 匹配属性href值以.html结尾的a元素 a[href$=".html"] { color: yellow; }
表示一个元素,其attr属性的值至少包含子字符串“value”的一个实例。若是“value”是空字符串,则选择器不表明任何内容。
// 匹配属性title值包含hello的p元素 p[title*="hello"] { color: yellow; }
按照 id
属性选择一个与之匹配的元素。每一个 ID 属性都应当是惟一
语法:#idname
例子:
// 匹配ID值为chapter1的元素 #chapter1{ font-size:30px; }
按照给定的 class
属性的值,选择全部匹配的元素。
语法:.classname
例子:
// 匹配类名class值为header的元素 .header{ font-size:30px; }
:
伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
语法:双引号『:』
例子:
// 匹配类名为ext且被访问过的a元素 a.ext:visited{ font-size:30px; }
伪类选择器按照它们的功能,大体能够分为:动态伪类,目标伪类,语言伪类,UI元素状态伪类,结构伪类,空白伪类,否认伪类。参考下图:
::
伪元素选择器用于表示没法用 HTML 语义表达的实体。经常使用的有:::first-line,::first-letter,::selection,::after,::before,::placeholder;
语法:两个双引号『::』
用于向文本的首行设置特殊样式。
// 设置p元素的首行样式颜色为红色 p:first-line{ color:#ff0000; font-variant:small-caps; }
"first-letter" 伪元素只能用于块级元素。在一个使用了
::first-line 伪元素的选择器中,
只有很小的一部分css属性能被使用:全部和字体相关的属性,全部和背景相关的属性。更详细的内容
点击查看
用于向文本的首字母设置特殊样式。
// 设置p元素的首字母样式颜色为红色,字体为xx-large p:first-letter{ color:#ff0000; font-size:xx-large; }
和first-letter同样,只能用于块级元素,并且只有部分的CSS属性能用,好比color,font-size,font-weight等等
更多内容点击查看
应用于文档中被用户高亮的部分(好比使用鼠标或其余选择设备选中的部分)。
// 设置用户选中内容的背景颜色为cyan ::selection { background-color: cyan; }
只有一小部分CSS属性能够用于
::selection
选择器:color,background-color,cursor,caret-color,outline,text-decoration,text-emphasis-color,text-shadow。更多内容
点击查看
在元素的内容前面插入新内容。
// 在a标签的内容前面添加一个心形图标 a::before { content: "♥"; }
由::before
和::after
生成的伪元素不能应用在<img />
等标签上,详情 查看
跟::before相似,只不过是在元素的内容后面插入新内容。
// 在a标签的内容后面添加一个心形图标 a::before { content: "♥"; }
经过简单选择器进行不一样的组合,匹配元素,有四种组合:后代选择器,子(元素)选择器,相邻兄弟选择器,普通兄弟选择器;
选择器名称 | 语法 | 描述 |
---|---|---|
后代选择器 | A B | 匹配任意元素,知足条件:B是A的后代结点 (B是A的子节点,或者A的子节点的子节点) |
子元素选择器 | A>B | 匹配任意元素,知足条件:B是A的直接子节点 |
相邻兄弟选择器 | A+B | 匹配任意元素,知足条件:B是A的下一个兄弟节点 (AB有相同的父结点,而且B紧跟在A的后面) |
普通兄弟选择器 | A~B | 匹配任意元素,知足条件: B是A以后的兄弟节点中的任意一个 (AB有相同的父节点,B在A以后,但不必定是紧挨着A) |
选择器类型 | 格式 | 解释说明 | |
---|---|---|---|
通配符选择器 | * | 全部元素 | |
类型选择器 | E | 类型为E的元素 | |
属性选择器 | E[foo] | 具备“foo”属性的 E 元素 | |
属性选择器 | E[foo="bar"] | 其“foo”属性值刚好等于“bar”的E元素 | |
属性选择器 | E[foo~="bar"] | 其“foo”属性值是一列以空格分隔的值 其中一个值彻底等于“bar”的E元素 |
|
属性选择器 | E[foo^="bar"] | 其“foo”属性值刚好以字符串“bar”开头的E元素 | |
属性选择器 | E[foo$="bar"] | 其“foo”属性值以字符串“bar”结尾的E元素 | |
属性选择器 | E[foo*="bar"] | 其“foo”属性值包含子字符串“bar”的E元素 | |
属性选择器 | E[foo\ | ="en"] | 一个 E 元素,其“foo”属性具备以“en”开头 (从左侧)的连字符分隔的值列表 |
伪类选择器 | E:root | 文档的根 | |
伪类选择器 | E:nth-child(n) | 其父元素的第 n 个子元素 | |
伪类选择器 | E:nth-last-child(n) | 一个 E 元素,它的父元素的第 n 个 子元素,从最后一个开始计数 |
|
伪类选择器 | E:nth-of-type(n) | 一个 E 元素,它的类型的第 n 个兄弟元素 | |
伪类选择器 | E:nth-last-of-type(n) | 一个 E 元素,它的类型的第 n 个 兄弟元素,从最后一个开始计数 |
|
伪类选择器 | E:first-child | 一个 E 元素,其父元素的第一个子元素 | |
伪类选择器 | E:last-child | 一个 E 元素,其父元素的最后一个子元素 | |
伪类选择器 | E:first-of-type | 一个 E 元素,其类型的第一个兄弟元素 | |
伪类选择器 | E:last-of-type | 一个 E 元素,其类型的最后一个兄弟元素 | |
伪类选择器 | E:only-child | 一个 E 元素,其父元素的惟一子元素 | |
伪类选择器 | E:only-of-type | 一个 E 元素,只有其类型的同级元素 | |
伪类选择器 | E:empty | 一个没有子元素的 E 元素 | |
伪类选择器 | E:link | 一个 E 元素其目标尚是未访问的超连接 | |
伪类选择器 | E:visited | 一个 E 元素其目标尚访问过的超连接 | |
伪类选择器 | E:active | 一个 E 元素其目标当前处于被激活状态 | |
伪类选择器 | E:hover | 一个 E 元素其目标处于使用设备虚指的状态 | |
伪类选择器 | E:focus | 一个 E 元素其目标当前处于聚焦状态 | |
伪类选择器 | E:target | 做为引用 URI 的目标的 E 元素 | |
伪类选择器 | E:lang(fr) | 语言“fr”中的类型 E 元素 | |
伪类选择器 | E:enabled | 启用的用户界面元素 E | |
伪类选择器 | E:disabled | 禁用的用户界面元素 E | |
伪类选择器 | E:checked | 被选中的用户界面元素 E | |
伪类选择器 | E:not(s) | 不匹配简单选择器的 E 元素 | |
伪元素选择器 | E::first-line | E 元素的第一个格式化行 | |
伪元素选择器 | E::first-letter | E 元素的第一个格式化字母 | |
伪元素选择器 | E::before | 在 E 元素以前生成的内容 | |
伪元素选择器 | E::after | E 元素后生成的内容 | |
类选择器 | E.warning | 一个 E 元素,其class名为“warning” | |
ID选择器 | E#myid | ID 等于“myid”的 E 元素 | |
组合选择器 | E F | E 元素的 F 元素后代 | |
组合选择器 | E > F | E 元素的 F 元素子元素 | |
组合选择器 | E + F | 紧跟在 E 元素以后的 F 元素 | |
组合选择器 | E ~ F | 前面有 E 元素的 F 元素 |