CSS3之选择器2（伪类）

来源：互联网发布：mac上可以玩什么网游编辑：程序博客网时间：2024/06/05 04:34

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

<style>

div{width:300px;height:200px;background:#000;font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;}

div:target{ display:block;}

</style>

</head>

<body>

<ahref="#div2">div2</a>

<ahref="#div3">div3</a>

<divid="div1">div1</div>

<divid="div2">div2</div>

<divid="div3">div3</div>

</body>

效果类似选项卡

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

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

<style>

input{width:100px;height:30px; color:#000;}

input:enabled{ color:red;}

input:disabled{ color:blue;}

</style>

</head>

<body>

</body>

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

<style>

input:checked{ width:100px;height:100px;}

</style>

</head>

<body>

</body>

模拟单选框

<style>

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:3pxsolid #000;}

input:checked~span {background:red;}

</style>

</head>

<body>

<label>

<inputtype="radio" name="tab" />

</label>

<label>

<inputtype="radio" name="tab" />

</label>

<label>

<inputtype="radio" name="tab" />

</label>

</body>

文本伪类

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

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

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

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

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

10 Content 属性

<style>

p{width:300px;border:1pxsolid #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:"MiaoV"; display:block; border:1px solid #000;}

p:after{ content:"MiaoV"; display:block; border:1pxsolid #000;}

</style>

</head>

<body>

<p>前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，

在 HTML5&CSS3 被炒至沸沸扬扬的今天，

全面系统的掌握此项技能，是加重技术含金量的重要砝码！

现已为你开启一个崭新的职业规划……</p>

</body>

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

<style>

h1:not(.h2){ background:Red;}

</style>

</head>

<body>

<h1class="h2">h1</h1>

</body>

12 E~F表示E元素毗邻的F元素选择后边的兄弟元素

<style>

p~h1{ background:Red;}

</style>

</head>

<body>

</body>

0 0