目标伪类选择器元素状态伪类

目标伪类选择器：
举例说明一下他的用途，比如点击一个文字或是图标实现跳到顶部，这时候可以用的这个目标伪类选择器
用于匹配当前激活的【锚点元素】
语法：目标选择器 :target{}

new document //点击跳转到我在东北玩泥巴!

跳转至东北

//点击跳转到黏住过客的思念

跳转至江南

//点击跳转到雨到.这里缠成线，点击这个跳转的明显

跳转至上海

我在东北玩泥巴! 黏住过客的思念

雨到.这里缠成线

元素状态伪类主要用于表单元素
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的input元素（单选框，复选框）

<!DOCTYPE html>
<html>
<head><title> new document </title><meta charset="utf-8" /><style>/*目标伪类选择器：用于匹配当前激活的【锚点元素】语法：    :target*/.empty{height:800px;}a:target{color:red;border:1px solid blue;}div:target{background-color:yellow;}/*.empty{height:800px;}div:target{background-color:yellow;}/*    练习：完成当a元素锚点被激活时，改变字体大小为32px  背景颜色为pinkdiv元素锚点...... 添加蓝色边框  字体加粗！*//*元素状态伪类主要用于表单元素:enabled 匹配每个已启用的元素:disabled 匹配每个被禁用的元素:checked 匹配每个已被选中的input元素（单选框，复选框）*//*input:enabled{color:red;}input:disabled{background-color: blue;}input:checked{width:50px;height:50px;}*/</style>
</head><body><p><a href="#db">跳转至东北</a></p><p><a href="#jn">跳转至江南</a></p><p><a href="#sh">跳转至上海</a></p><div class="empty"></div><a name="db">我在东北玩泥巴!</a><div class="empty"></div><a name="jn">黏住过客的思念</a><div class="empty"></div><div id="sh">雨到.这里缠成线</div><div class="empty"></div><!-- ID：<input type="text" disabled value="Clyde" /><br /><br />Name：<input type="text" /><br />Status：<input type="radio" name="state" value="1" />Enable<input type="radio" name="state" checked value="0"/>Disable<br />--></body>
</html>

元素状态伪类主要用于表单元素
:enabled 匹配每个已启用的
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的input元素（单选框，复选框）

<!DOCTYPE html>
<html>
<head><title> new document </title><meta charset="utf-8" /><style>/*目标伪类选择器：用于匹配当前激活的【锚点元素】语法：    :target*/.empty{height:800px;}div:target{background-color:yellow;}/*    练习：完成当a元素锚点被激活时，改变字体大小为32px  背景颜色为pinkdiv元素锚点...... 添加蓝色边框  字体加粗！*//*元素状态伪类主要用于表单元素:enabled 匹配每个已启用的元素:disabled 匹配每个被禁用的元素:checked 匹配每个已被选中的input元素（单选框，复选框）*/input:enabled{color:red;}input:disabled{background-color: blue;}input:checked{width:50px;height:50px;}</style>
</head><body><input type="text" disabled value="Clyde" /><br /><br />Name：<input type="text" /><br />Status：<input type="radio" name="state" value="1" />Enable<input type="radio" name="state" checked value="0"/>Disable<br /></body>
</html>

目标伪类选择器元素状态伪类相关推荐

伪类选择器与伪元素选择器的区别
Hello,小可爱们,今天我们一起来区分一下伪类选择器跟伪元素选择器吧! 伪类选择器与伪元素选择器在名字上很相似,所以对于初学者来说,很容易混淆它们,区别不开,其实两者在作用上还是有本质的区别的,只要 ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
伪类选择器和伪元素选择器
我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下: 伪类选择器: 伪类选择器很简单的理解就是在某种特殊的状态下的样式,比如说&quo ...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
html中结构伪类选择器,结构伪类选择器
属性选择器元素的属性,我们都知道是什么.例如下面代码中type和value就是input元素的属性.属性选择器,顾名思义,就是通过属性来选择元素的一种方式. 属性选择器说明 E[attr^=&qu ...
伪类选择器和伪元素选择器详解
来自up主老橘长 "浪漫的不是海,是吹海风的我们" 结构伪类选择器和伪元素选择器结构伪类选择器关于E:nth-child(n) 伪元素选择器伪类就是假的类伪元素来一个来链 ...

目标伪类选择器元素状态伪类

目标伪类选择器元素状态伪类相关推荐

最新文章

热门文章