CSS3 伪类选择器

最新推荐文章于 2023-04-20 16:27:30 发布

原创最新推荐文章于 2023-04-20 16:27:30 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

博客介绍了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可以改变背景颜色,文字颜色,但是形状大小都不可以被更改…