一: css 的伪类:
1. :hover 鼠标移动到链接上
2. :link 未访问的链接
3. :active 选定的链接
4. :visited 已访问的链接
5. :target 突出显示活动的 HTML 锚 (一个动态选择器, 只有存在 url 指向该匹配元素时候, 样式才会生效) 。
1. 使用示例:
这一种的缺点是, url会发生改变, 会在 url 最后面加上片段识别符 #box2, 这样就改变了URL的路径,这是我们不想看到的.因为再次刷新的时候回出现问题.
请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。
内容 1...
内容 2...
内容 2...
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
6. :focus 选择元素输入后具有焦点
1. 代码示例:
input:focus {
background-color:yellow;
}
7. :lang
1. 代码示例
Some text A quote in a paragraph
Some text.
q:lang(no) {
quotes: "~" "~"
}
8. a 标签的特殊设置
1. 让 a 标签点击后不跳转的设置
2. javascript:;
3. return false; // 这个会刷新页面
4. 在 a 标签外面包一个 div, 然后给 div 设置这个样式
pointer-events:none;
这个是 css3 的代码, 这句代码可以把 onlick 事件去掉, 相当于变为普通文本
二: css 伪类选择器
1. :first-child 选择某个元素的第一个子元素; 匹配的是某父元素的第一个子元素, 可以说是结构上的第一个子元素 。
2. :last-child 选择某个元素的最后一个子元素;
3. :nth-child(n) 选择某个元素的一个或多个特定的子元素;
1. n 可以是一个数字, 一个关键字, 或者一个公式 。
2. 正方向范围 :nth-child(n+4) 选取大于等于 4 标签, “n” 表示 从整数
3. 负方向范围 :nth-child(-n+4)选取小于等于4标签
4. 前后限制范围 :nth-child(n+4):nth-child(-n+8)
5. 奇数 / 偶数位
1. 奇数 :nth-child(odd)
2. 偶数位 :nth-child(even)
6. 隔选择子元素 :nth-child(3n+1) -> 选择 1,4,7,10
7. 范围高级用法
1. nth-child(n+2):nth-child(odd):nth-child(-n+9)
2. 使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位, 并且只包含奇数位。
4. :nth-last-child() 选择某个元素的一个或多个特定的子元素, 从这个元素的最后一个子元素开始算;
5. :nth-of-type() 选择指定的元素; 所有兄弟节点中找标签为 p 的, 然后找到的第三个 p 标签背景为红色
6. :nth-last-of-type() 选择指定的元素, 从元素的最后一个开始计算;
7. :first-of-type 指定父元素的首个 p 元素; 匹配的是该类型的第一个, 类型是指什么呢, 就是冒号前面匹配到的东西, 比如 p:first-of-type, 就是指所有 p 元素中的第一个 。 这里不再限制是第一个子元素了, 只要是该类型元素的第一个就行了, 当然这些元素的范围都是属于同一级的, 也就是同辈的 。
8. :last-of-type 选择一个上级元素的最后一个同类子元素；
9. :only-child 选择的元素是它的父元素的唯一一个了元素；
10. :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素; 父节点下必须只有一个
元素
11. :empty 选择的元素里面没有任何内容 。
12. :not() 选择所有 p 以外的元素
1. 使用示例:
这是标题
这是一个段落。
这是另一个段落。
:not(p) {
color: #ff0000;
}