CSS3 伪类选择器

博客介绍了CSS相关知识,包括a标签的:target属性,其规定链接文档的打开位置;还提及:enabled、:disabled和checked,指出前两者对背景不适用但可改变形状;另外介绍了样式伪装::selection,它能改变背景和文字颜色,但不能改变形状大小。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.认识 a 标签的:target属性
a标签的target属性规定在何处打开链接文档.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        div{
            height:100px;
            border:1px solid #000;
            background-color: red;
        }
        /*仅仅就是为了锚点使用*/
        :target{
            background-color: #ff0;
            color:cyan;
        }
    </style>
</head>
<body>
<!--href中写那个id,就会跳到那个id所对应的的区域-->
<!--这里我选择的id=nz,点击会跳至女装区-->
<a href="#nz">区域</a>
<h3 id="sp">食品区</h3>
<div></div>
<h3 id="nz">女装区</h3>
<div></div>
<h3 id="rt">儿童区</h3>
<div></div>
</body>
</html>

2:enabled :disabled和checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        /*:enabled{*/
            /*backfround-color:yellow;*/
            /*width:100px;*/
            /*height:100px;*/
        /*}*/
        /*:disabled{*/
            /*backfround-color:yellow;*/
            /*width:100px;*/
            /*height:100px;*/
        /*}*/
        :checked{
            width:200px;
            height:200px;
        }
        /*checked专门为checkbox radioa使用的
            点击按钮大大小会改变*/
    </style>
</head>
<body>
<input type="text" >
<br>
<!--<input type="radio" name="sex" disabled>男-->
<!--<input type="radio" name="sex" disabled>女-->
<input type="radio" name="sex" >男
<input type="radio" name="sex" >女
<br>
<input type="checkbox" name="like">足球
<input type="checkbox" name="like">篮球
<br>
<input type="button" value="按钮">
<input type="submit">
<input type="reset">
</body>
</html>

注:enabled和disabled两个功能按钮组对背景都不适用,因为没有背景,但是形状可以改变.
3.样式伪装::selection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式伪装</title>
    <style>
     ::selection{
         color:red;
         background-color: gray;
         font:200 italic 20px "华文行楷"
              /*是指在鼠标选中内容时的样式变化.*/
     }
    </style>
</head>
<body>
<p>
    一生一代一双人,争教两处销魂?相思相望不相亲,天为谁春!
    <br>
    浆向蓝桥易乞,药成碧海难奔,若容相访饮牛津,相对忘贫.
</p>
</body>
</html>

运行代码之后可以看出使用::selcetion可以改变背景颜色,文字颜色,但是形状大小都不可以被更改…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值