您的位置：首页 > Web前端 > CSS

CSS3选择器--伪类

2017-01-02 15:46 453 查看
在前面介绍了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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航