CSS伪类与CSS伪类选择器

一: css 的伪类:

1. :hover 鼠标移动到链接上

2. :link 未访问的链接

3. :active 选定的链接

4. :visited 已访问的链接

5. :target 突出显示活动的 HTML 锚 (一个动态选择器, 只有存在 url 指向该匹配元素时候, 样式才会生效) 。

1. 使用示例:

这一种的缺点是, url会发生改变, 会在 url 最后面加上片段识别符 #box2, 这样就改变了URL的路径,这是我们不想看到的.因为再次刷新的时候回出现问题.

<p><a href="#news1">跳转至内容 1</a></p>

<p><a href="#news2">跳转至内容 2</a></p>

<p><a href="#" name="new3">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

:target {

border: 2px solid #D4D4D4;

background-color: #e5eecc;

}

6. :focus 选择元素输入后具有焦点

1. 代码示例:

First name: <input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

</form>

input:focus {

background-color:yellow;

}

7. :lang

1. 代码示例

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

q:lang(no) {

quotes: "~" "~"

}

8. a 标签的特殊设置

1. 让 a 标签点击后不跳转的设置

1. <a href="javascript:void(0);" >javascript:void(0);</a>

2. <a href="javascript:;">javascript:;</a>

3. <a href="#" οnclick="return false;">return false;</a> // 这个会刷新页面

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 选择一个元素是它的上级元素的唯一一个相同类型的子元素; 父节点下必须只有一个<P>元素

11. :empty 选择的元素里面没有任何内容。

12. :not() 选择所有 p 以外的元素

1. 使用示例:

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

<div>这是 div 元素中的文本。</div>

<br>

<a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a>

:not(p) {

color: #ff0000;

}