1,class 和 id 的使用场景?
id: 指定标签的唯一标识. 根据提供的唯一 id 号, 快速获取标签对象. 如: document.getElementById(id).id 属性的值, 在当前的 page 页面要是唯一的.
class: 指定标签的类名. CSS 操作, 把一些特定样式放到一个 class 类中, 需要此样式的标签, 可以在添加此类.
2,CSS 选择器常见的有几种?
1, 基础选择器, 包括:
通用元素选择器, 匹配页面任何元素. 示例:
* { font-family: '微软雅黑'; }
id 选择器, 匹配特定 id 的元素. 示例:
#id-selector{ color: #333; }
类选择器, 匹配 class 包含 (不是等于) 特定类的元素. 示例:
.class-selector{ background: #f1f1f1; }
标签选择器. 示例:
p { height: 50px; line-height: 50px; }
2, 组合选择器
| 选择器 | 含义 |
| -------- |:------------- -----:|
| E,F - 多元素选择器 | 用, 分隔, 同时匹配元素 E 或元素 F |
| E F - 后代选择器 | 用空格分隔, 匹配 E 元素所有的后代元素 F |
| E>F - 子元素选择器 | 用空用>分隔, 匹配 E 元素的所有直接子元素 |
| E+F - 直接相邻选择器 | 匹配 E 元素之后的相邻的同级元素 F|
|E~F 普通相邻选择器 | 用匹配 E 元素之后的同级元素 F(无论直接相邻与否) |
| .class1.class2 | id 和 class 选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素 |
|element#id | id 和 class 选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素 |
3, 属性选择器
| 选择器 | 含义 |
| -------- |:------------- -----:|
| E[attr] | 匹配所有具有属性 attr 的元素, div[id]就能取到所有有 id 属性的 div |
| E[attr = value] | 匹配属性 attr 值为 value 的元素, div[id=test], 匹配 id=test 的 div |
| E[attr ~= value] | 匹配所有属性 attr 具有多个空格分隔, 其中一个值等于 value 的元素 |
| E[attr ^= value] | 匹配属性 attr 的值以 value 开头的元素 |
|E[attr $= value] | 匹配属性 attr 的值以 value 结尾的元素 |
| E[attr *= value] | 匹配属性 attr 的值包含 value 的元素 |
4, 伪类选择器
| 选择器 | 含义 |
| -------- |:------------- -----:|
| E:first-child | 匹配元素 E 的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
|E:active | 匹配鼠标已经其上按下, 还没有释放的 E 元素 |
|E:hover | 匹配鼠标悬停其上的 E 元素 |
| E:focus | 匹配获得当前焦点的 E 元素 |
| E:lang(c) | 匹配 lang 属性等于 c 的 E 元素 |
| E:enabled| 匹配表单中可用的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的 radio 或 checkbox 元素 |
| E::selection | 匹配用户当前选中的元素 |
| E:root | 匹配文档的根元素, 对于 html 文档, 就是 HTML 元素 |
|E:nth-child(n)| 匹配其父元素的第 n 个子元素, 第一个编号为 1|
|E:nth-last-child(n) | 匹配其父元素的倒数第 n 个子元素, 第一个编号为 1 |
| E:nth-of-type(n) | 与: nth-child()作用类似, 但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) | 与: nth-last-child() 作用类似, 但是仅匹配使用同种标签的元素 |
| E:last-child| 匹配父元素的最后一个子元素, 等同于: nth-last-child(1)|
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素, 等同于: nth-of-type(1)|
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素, 等同于: nth-last-of-type(1)|
| E:only-child | 匹配父元素下仅有的一个子元素, 等同于: first-child:last-child 或 :nth-child(1):nth-last-child(1)|
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素, 等同于: first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1)|
| E:empty | 匹配一个不包含任何子元素的元素, 文本节点也被看作子元素 |
| E:not(selector) | 匹配不符合当前选择器的任何元素 |
n 的取值:
- 1,2,3,4,5,......
- 2n+1, 2n, 4n-1
- odd, even
5, 伪元素选择器
| 选择器 | 含义 |
| -------- |:------------- -----:|
| E::first-line | 匹配 E 元素内容的第一行 |
| E::first-letter| 匹配 E 元素内容的第一个字母 |
| E::before | 在 E 元素之前插入生成的内容 |
| E::after | 在 E 元素之后插入生成的内容 |
3, 选择器的优先级是怎样的? 对于复杂场景如何计算优先级?
从高到低分别是:
1, 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2, 作为 style 属性写在元素标签上的内联样式
3,id 选择器
4, 类选择器,
5, 伪类选择器
6, 属性选择器
7, 标签选择器
8, 通配符选择器
9, 浏览器自定义
对于复杂的情况, 例如 CSS 规则由多个选择器组成:
- #test p.class1 {
- ...
- }
- #test .class1.class2 {
- ...
- }
要计算诸如上述复杂场景的优先级, 这时候我们可以做个简单的加法运算, id 选择器的权值为 1000,class 选择器为 100, 标签选择器为 10, 做一下运算(当然只是为了形象这么说, 一万个 class 选择器加起来也不如一个 id 选择器优先级高)
这样我们就能得知第二条的规则优先级高一些, 但是还有一种情况:
- #parent p.class1
- div #child.class1
- <div id="parent">
- <p id="child" class="class1">
- Text
- </p>
- </div>
按照我们刚才的方法计算, 两个的权值时相同的, 这时候应该用那条规则呢? 简单来说一句话谁更具体用谁, 也就是权值高的选择器作用的越具体优先级越高
我们可以看到两个选择器作用的元素都是 p 标签, id 选择器权值最高, 第一条规则作用在了父元素上, 第二条规则直接作用在了 p 标签本身上, 所以我们认为第二条选择器的优先级高
如果两个选择器规权值就是一样, 我们改怎么判断呢? 后面的覆盖前面的!
- div {
- color: #333;
- }
- ....
- div {
- color: #666;
- }
这样 div 文案的颜色明显会是 #666
总而言之判断 CSS 选择器规则优先级很简单, 每个选择器本身有优先级, 越具体优先级越高
4,a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?
a:link:
用来定义超链接被访问前的样式.
a:visited:
用来定义链接被访问后的样式.
a:hover:
用来定义鼠标放到链接上, 但鼠标键未被按下时的样式.
a:active:
用来定义鼠标放到连接上, 并被按下时的样式.
正确的顺序为 a:link,a:visited,a:hover,a:active (其中, link 和 visited 可以互换);
原因:
鼠标经过的 "未访问链接" 可应用 a:link,a:hover,a:active 这三种伪类选择器来定义样式, 因为后面的样式会覆盖前面的样式, 所以 a:hover 应放在 a:link 的后面, a:active 放在最后.
鼠标经过的 "已访问链接" 可应用 a:visited,a:hover,a:active 这三种类选择器来定义样式, 因为后面的样式会覆盖前面的样式, 所以 a:hover 应放在 a:hovor 的后面, a:active 放在最后.
所以说, a:hover 定义一定要放在 a:link,a:visited 的后面, a:active 放在最后.
来源: http://www.bubuko.com/infodetail-2869427.html