CSS3选择器--伪类

最新推荐文章于 2024-08-11 08:00:00 发布

Wendy-lxq

最新推荐文章于 2024-08-11 08:00:00 发布

阅读量1.3k

点赞数 1

分类专栏： CSS & CSS3 文章标签： css3 伪类 before 伪类after

本文链接：https://blog.csdn.net/u010297791/article/details/53977911

版权

CSS & CSS3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

在前面介绍了CSS3选择器中的属性选择器和结构性伪类选择器，在结构性伪类选择器的文章中也提及了伪元素和伪类，那么本文会详细说明几个伪类的使用，但是侧重点在于before和after两个伪类的使用。

先列举伪类有什么，当然可能不是完整的，后面会一个一个举例说明如何使用。

1）E:target 表示当前的URL片段的元素类型，这个元素必须是E

2）E:disabled 表示不可点击的表单控件

3）E:enabled 表示可点击的表单控件

4）E:checked 表示已选中的checkbox或radio

5）E:first-line 表示E元素中的第一行

6）E:first-letter 表示E元素中的第一个字符

7）E::selection表示E元素在用户选中文字时

8）E::before 生成内容在E元素前

9）E::after 生成内容在E元素后

10）E:not(s) 表示E元素不被匹配

11）E~F表示E元素毗邻的F元素

12）Content 属性

接下来进行详细说明。

1）E:target

含义：匹配相关URL指向的E元素。

解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。

举例，效果图如下：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The simple of 'target'</title>
    <style>
        a{
            text-decoration: none;
            color:#000;
            font-size: 20px;
            display: inline-block;
            width:60px;
            height: 30px;
            background-color: #75ffcd;
            text-align: center;
            line-height: 30px;
            margin-bottom:10px;
        }
        div{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            display: none;
        }
        #div1{
            background-color: #34b1ff;
        }
        #div2{
            background-color: #ffcb38;
        }
        #div3{
            background-color: #ff89d9;
        }
        div:target{
            display: block;
        }
    </style>
</head>
<body>
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>

    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</body>
</html>

2）E:disabled 和 E:enabled

含义：E:disabled 用来匹配用户界面上处于可用状态的元素E，然后可以进行设置自己想要的样式。

E:enabled 用来匹配用户界面上处于可用状态的元素E。

举例，灰色背景表示不可输入内容，蓝色背景表示可输入内容：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>disabled and enabled</title>
    <style>
        input{
            width: 200px;
            height: 20px;
            line-height: 20px;
            color:#000;
            margin-top:10px;
        }
        input:disabled{
            background-color: #bfbfbf;
        }
        input:enabled{
            background-color: #8ad6ff;
        }
    </style>
</head>
<br>
    <input type="text" value="" placeholder="请输入姓名" disabled/></br>
    <input type="text" value=""  placeholder="请输入密码"/>
</body>
</html>

3）E:checked

含义：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)。

举例：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checked</title>
    <style>
        input:checked{
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
    <input type="checkbox">
</body>
</html>

4）E:first-line 、E:first-letter、E::selection

这三个直接按照字面上理解就好了，这里就直接用一个例子来说明。

如图所示，第一个字符是红色的，大号字体，第一行是蓝色背景，选中的背景为黄色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width:500px;
            border:1px solid #00A2E9;
            font-size:12px;
            line-height:30px;
            padding:10px;
        }
        p:first-line{
            background-color: #00A2E9;
        }
        p:first-letter{
            font-size:30px;
            color:red;
        }
        p::selection{
            background-color: #ffcb38;
            color:#fff;
        }
    </style>
</head>
<body>
<p>在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：
    CSS中已经定义好的选择器,不能随便取名,常用的伪类选择器是使用在a元素上的几种，
    如a:link|a:visited|a:hover|a:active 2、伪元素选择器：并不是针对真正的元素使用的选
    择器，而是针对CSS中已经定义好的伪元素使用的选择器
</p>
</body>
</html>

5）E::before和E::after

这两个伪类其实在css2.1的时候已经可以使用了，不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容。

需要注意两点：

第一，我们用E:before和E:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素。

第二，在内容模块中提到，伪元素如果没有设置“content”属性，伪元素是无用的。

除了简单的添加字符，配合 CSS 强大的定位和特效特性，完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是，如果不需要内容仅配合样式属性做出效果，内容属性也不能为空，即 content:”" 。否则，其他的样式属性一概不会生效。

下面仿造微信聊天对话框，说明一下这两个伪类的使用。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:200px;
            height:36px;
            position: relative;
            border:black 1px solid;
            border-radius:5px;
            background: rgba(245,245,245,1)
        }
        .box:before,.box:after{
            content: '';
            position: absolute;
            width:0px;
            height:0px;
            border:6px transparent solid;
            display: block;
            top:8px;
        }
        .box:before{
            border-right-color: rgba(245,245,245,1);
            left:-11px;
            z-index: 1;
        }
        .box:after{
            border-right-color:rgba(0,0,0,1);
            left:-12px;
            z-index: 0;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>