undefined

css3伪类和伪元素

发表于 | 分类于 ， ，
字数统计: 832 | 阅读时长 ≈ 4

伪类
E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字母
E::selection 表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素之后
E：not(s) 表示E元素不被匹配
E~F 表示E元素毗邻的F元素,是指在E后面的标签
content 内容属性 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    div {
        width: 300px;
        height: 200px;
        background: #000;
        font: 50px/200px "微软雅黑";
        color: #fff;
        text-align: center;
        display: none;
    }

    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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    input {
        width: 100px;
        height: 30px;
        color: #000;
    }
    </style>
</head>

<body>
    <input type="text" name="" value="请输入" />
</body>

</html>

例子：模拟单选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    label {
        float: left;
        margin: 0 5px;
        overflow: hidden;
        position: relative;
    }

    label input {
        position: absolute;
        left: -50px;
        top: -50px;
    }

    span {
        float: left;
        width: 50px;
        height: 50px;
        border: 3px solid #000;
    }

    input:checked~span {
        background: red;
        s
    }
    </style>
</head>

<body>
    <label>
        <input type="radio" name="tab">
        <span></span>
    </label>
    <label>
        <input type="radio" name="tab">
        <span></span>
    </label>
    <label>
        <input type="radio" name="tab">
        <span></span>
    </label>
    <label>
        <input type="radio" name="tab">
        <span></span>
    </label>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    p {
        width: 300px;
        border: 1px solid #000;
        font: 12px/30px "宋体";
        padding: 10px;
    }

    p:first-line {
        background: red;
    }

    p:first-letter {
        font-size: 30px;
    }

    p::selection {
        background: #F60;
        color: #690;
    }

    p::before {
        content: "BUPT"
    }
    </style>
</head>

<body>
    <p>
        北京邮电大学（Beijing University of Posts and Telecommunications），简称北邮，是中华人民共和国教育部直属，工业和信息化部共建的一所以信息科技为特色，工学门类为主体，管理学、文学、理学等多个学科门类协调发展的全国重点大学，是北京高科大学联盟成员高校[1] 、国家首批“双一流”世界一流学科建设高校[2] 。系国家“211工程”、“985工程优势学科创新平台”项目重点建设，列入首批“卓越工程师教育培养计划”、“111计划”。被誉为“中国信息科技人才的摇篮”。[3] 前身是1955年成立的新中国第一所邮电高等学府——北京邮电学院。1960年被国务院确定为全国重点高校。 1993年更名为“北京邮电大学”。2000年，划入教育部直属高校行列。2012年，信息与通信工程一级学科全国排名第一。
    </p>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		h1:not(.h2){
			background: red;
		}
	</style>
</head>
<body>
<h1>h1</h1>
<h1 class="h2">h1</h1>
<h1>h1</h1>
</body>
</html>
觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多