CSS伪类选择器

最新推荐文章于 2024-06-23 10:59:20 发布

man_tutu

最新推荐文章于 2024-06-23 10:59:20 发布

阅读量368

点赞数

分类专栏： CSS 文章标签： css 伪类选择器

本文链接：https://blog.csdn.net/man_tutu/article/details/61926808

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

语法

selector:pseudo-class { property: value; }

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {
    background: yellow; /*链接没有被访问时背景颜色为黄色*/
}

a:visited {
    background: green; /*链接被访问过后背景颜色为绿色*/
}

a:hover {
    background: red; /*当鼠标悬浮在链接上时背景颜色为红色*/
}

a:active {
    background: blue; /*当鼠标点击在链接上时背景颜色为蓝色*/
}

对于这四个锚点伪类的设置，需要特别注意他们的先后顺序，要让他们遵守一个爱恨原则LoVe/HAte，也就是Link—Visited—Hover—Active，如果把顺序搞错了会给你带来意想不到的错误。

对于 :hover 在 IE6 下只有 a 元素支持，:active只有 IE7-6 不支持。

用户界面伪类

选择器	含义
E:enabled	匹配表单中激活的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素

这些伪类选择器主要是针对于 HTML 中的表单元素进行操作。

input:disabled {
    border: 1px solid #ccc;
    background: #f6f6f6;
}

上面代码表示对页面中禁用的输入框应用相应的样式。

IE6-8 不支持“:checked”，“:enabled”，“:disabled”这三种选择器。

结构伪类选择器

1、E:root

从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素 E 所在文档的根元素。在 HTML 文档中，根元素始终是<html>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        html:root {
            background: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</body>
</html>

这里写图片描述

“:root”选择器等同于 <html> 元素，简单点说：

:root {
    background: orange;
}

html {
    background: orange;
}

得到的效果等同，建议使用 :root 方法。

2、E:nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

当 HTML 代码如下：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
</ul>

CSS代码如下：

li:nth-child(3) {
    background: red;
}

实现效果如下：

这里写图片描述

该选择器不能引用负值，也就是说 li:nth-child(-1) 是不正确的使用方法。

当CSS代码如下：

li:nth-child(2n+1) {
    background: red;
}

实现效果如下：

这里写图片描述

就相当于：

li:nth-child(odd) {
    background: red;
}

当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

IE6-8 和 Firefox3.0- 浏览器不支持“:nth-child”选择器。

3、E:nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

当 HTML 代码如下：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
</ul>

CSS代码如下：

li:nth-last-child(2) {
    background: red;
}

实现效果如下：

这里写图片描述

“:nth-last-child()”和“nth-child()”使用方法是一样的，只不过他们的区别是“:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。同样在 IE6-8 和 Firefox3.0- 浏览器不支持“:nth-last-child()”选择器。

4、E:nth-of-type(n)

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

HTML代码如下：

<div class="wrapper">
  <div>我是一个Div元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
</div>

CSS代码如下：

.wrapper > p:nth-of-type(2n) {
  background: orange;
}

实现效果如下：

这里写图片描述

同样在 IE6-8 和 Firefox3.0- 浏览器不支持“:nth-last-child()”选择器。

5、E:nth-last-of-type(n)

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

HTML代码如下：

<div class="wrapper">
  <div>我是一个Div元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
</div>

CSS代码如下：

.wrapper > p:nth-last-of-type(2n) {
  background: orange;
}

实现效果如下：

这里写图片描述

同样在 IE6-8 和 Firefox3.0- 浏览器不支持“:nth-last-child()”选择器。

6、E:first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素 E 。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

HTML代码如下：

<ol>
  <li><a href="##">Link1</a></li>
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>

CSS代码如下：

ol > li:first-child {
  color: red;
}

实现效果如下：

这里写图片描述

IE6不支持:first-child选择器。

7、E:last-child

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。

HTML代码如下：

<ol>
  <li><a href="##">Link1</a></li>
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>

CSS代码如下：

ol > li:last-child {
  color: red;
}

实现效果如下：

这里写图片描述

8、E:first-of-type

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型，其主要用来定位一个父元素下的某个类型的第一个子元素。

HTML代码如下：

<div class="wrapper">
  <div>我是一个块元素，我是.wrapper的第一个子元素</div>
  <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
  <p>我是一个段落元素</p>
  <div>我是一个块元素</div>
</div>

CSS代码如下：

.wrapper > p:first-of-type {
    background: red;
}

实现效果如下：

这里写图片描述

9、E:last-of-type

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

HTML代码如下：

<div class="wrapper">
  <div>我是一个块元素，我是.wrapper的第一个子元素</div>
  <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
  <p>我是一个段落元素</p>
  <div>我是一个块元素</div>
</div>

CSS代码如下：

.wrapper > p:last-of-type {
    background: red;
}

实现效果如下：

这里写图片描述

10、E:only-child

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

HTML代码如下：

<div class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>
<div class="wrapper">
  <p>我是一个段落</p>
</div>

CSS代码如下：

.wrapper {
    border: 1px solid #000;
}
.wrapper p:only-child {
  background: orange;
}

实现效果如下：

这里写图片描述

11、E:only-of-type

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

HTML代码如下：

<div class="wrapper">
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <div>我是一个Div元素</div>
</div>
<div class="wrapper">
  <div>我是一个Div</div>
  <p>我是一个段落</p>
</div>

CSS代码如下：

.wrapper {
    border: 1px solid #000;
}
.wrapper > div:only-of-type {
  background: orange;
}

实现效果如下：

这里写图片描述

12、E:empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

HTML代码如下：

<p>我是一个段落</p>
<p> </p>
<p></p>

CSS代码如下：

p {
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}

实现效果如下：

这里写图片描述

14、E:not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

HTML代码如下：

<input type="text">
<input type="submit">

CSS代码如下：

input:not([type="submit"]) {
    border: 1px solid orange;
}

实现效果如下：

这里写图片描述

15、E:target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

HTML代码如下：

<h2>
    <a href="#brand">请点击</a>
</h2>
<div class="wrapper" id="brand">这是一个DIV元素</div>

CSS代码如下：

.wrapper{
  display: none;
}

:target{
  display: block;
}

实现效果如下：

这里写图片描述

具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称。

CSS伪类选择器的整理就到这里了，如果还有遗漏的话，希望大家可以指出~：），共同进步，共同成长，谢谢大家~

man_tutu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS伪类选择器

CSS伪类选择器的整理
复制链接

扫一扫

专栏目录