css3新增选择器（:target选择器、 :disabled选择器、:enabled选择器）

最新推荐文章于 2024-08-25 20:08:37 发布

正在修炼web的小芮

最新推荐文章于 2024-08-25 20:08:37 发布

阅读量441

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125868296

版权

本文介绍了CSS3中的三个新增选择器：:target选择器用于设置当前活动的target元素样式，常用于锚点链接；:disabled选择器用于匹配禁用状态的表单元素，方便自定义禁用样式；:enabled选择器则用于选中启用状态的表单元素，允许自定义启用样式。通过实例展示了这三个选择器的使用方法及效果。

摘要由CSDN通过智能技术生成

:target选择器

＃锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。

:target选择器可用于当前活动的target元素的样式。（给跳转到的指定锚点设置css样式）

    <style>
        /* 当你点击 超链接 ，跳转到指定的锚点上
        那个锚点位上的内容 ，才应用上我们这里设置的样式 */
        :target{
            background-color: aquamarine;
            border: 2px solid pink;
        }
    </style>
</head>
<body>
   <p>
    <a href="#sg">三国</a>
   </p>
   <p>
    <a href="#sh">水浒</a>
   </p>

   <div>以下的内容是：</div>
   <p id="sg">
    三国的详细内容
   </p>
   <p id="sh">
    水浒的详细内容
   </p>
</body>

注意：

这里写锚点不这样写：<a name="sg"></a>，因为这样写，css样式，作用在a标签上。p段落里的文字，修饰不上。

这里说的当前活动的target元素，是指 id名叫sg 和 id名叫sh的这两个段落标签。