目标伪类选择器
举例说明一下他的用途,比如点击一个文字或是图标实现跳到顶部,这时候可以用的这个目标伪类选择器
用于匹配当前激活的【锚点元素】
语法: 目标选择器 :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>

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

  1. 伪类选择器与伪元素选择器的区别

    Hello,小可爱们,今天我们一起来区分一下伪类选择器跟伪元素选择器吧! 伪类选择器与伪元素选择器在名字上很相似,所以对于初学者来说,很容易混淆它们,区别不开,其实两者在作用上还是有本质的区别的,只要 ...

  2. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  3. css中什么是伪类选择器?伪类选择器的简要介绍

    本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...

  4. css中什么是伪类选择器?伪类选择器的简介

    一.伪类选择器介绍 伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...

  5. web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡

    https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...

  6. 伪类选择器和伪元素选择器

    我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下: 伪类选择器: 伪类选择器很简单的理解就是在某种特殊的状态下的样式,比如说&quo ...

  7. CSS3新增属性——新增选择器(属性选择器、结构伪类选择器、伪元素选择器)

    目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3.  伪元素选择器 1.属性选择器 E[att ...

  8. html中结构伪类选择器,结构伪类选择器

    属性选择器 元素的属性,我们都知道是什么.例如下面代码中type和value就是input元素的属性.属性选择器,顾名思义,就是通过属性来选择元素的一种方式. 属性选择器 说明 E[attr^=&qu ...

  9. 伪类选择器和伪元素选择器详解

    来自up主老橘长 "浪漫的不是海,是吹海风的我们" 结构伪类选择器和伪元素选择器 结构伪类选择器 关于E:nth-child(n) 伪元素选择器 伪类就是假的类 伪元素 来一个来链 ...

最新文章

  1. iOS中几种数据持久化方案总结
  2. Android实时取景:用SurfaceView实现
  3. 对CSS了解-overflow:hidden
  4. php生成extjs下拉树json数据格式
  5. java后台解析json并保存到数据库_[Java教程]ajax 发送json 后台接收 遍历保存进数据库...
  6. 深度学习之于传统计算机视觉
  7. python资料-Python 有哪些好的学习资料或者博客?
  8. python基础篇——异常
  9. Nginx虚拟主机别名的配置
  10. Mysql的用户与权限管理
  11. python调用谷歌翻译英文文献pdf_python调用谷歌翻译
  12. C# 选择文件(读取文件时)、选择路径(保存文件时)
  13. SQL日期时间格式转换大全
  14. java 校验d盘是否存在_从零学java笔录-第2篇 验证jdk是否安装成功
  15. 最通俗易懂的JavaScript进阶教程
  16. TTS数据制作过程分享
  17. 面对封号潮,跨境收款如何做到不受牵连?
  18. sizeof c语言是什么表达式,C 语言 sizeof() 运算符
  19. 【SU-03T离线语音模块】:学习配置使用
  20. 回溯法简单应用--解数独

热门文章

  1. 杭州程序员从互联网跳央企,晒一天工作和收入,网友:待一年就废
  2. php医疗管理系统(医院患者就诊档案管理系统)源码
  3. 斯坦福:facebook创始人扎克伯格演讲
  4. CAP MAP VLR HLR GMSC DP gsmSSF简介
  5. eNSP之IPsec 虚拟专用网配置
  6. 数据仓库数据挖掘——商业智能概述
  7. 10分钟教你用python如何正确把妹
  8. 岁末忆今朝,辞旧话新潮——心灵与技术的聚合
  9. Rust 编程: 条件编译-Features
  10. 安卓程序中调用 linux 命令