HTML&CSS基础-伪类选择器
HTML&CSS基础-伪类选择器
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.html源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title> <style>
/**
* 伪类
* 功能:
* 有时候，你需要选择本身没标签但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。 CSS为他们提供一些选择。即伪类是专门用来表示元素的一种特殊状态
*
* 伪类给链接定义样式 给链接定义样式有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成 4种不同的状态。
* 正常链接
* a:link
* 访问过的链接
* a:visited(由于涉及到用户的隐私问题，所有使用visited伪类只能设置字体的颜色，只能定义字体颜色)
* 鼠标滑过的链接
* a:hover
* 正在点击的链接
* a:active
* 浏览器是通过历史记录来判断一个链接是否被访问过。
*
*
* 案例如下:
* 为未访问过的连接设置黄绿色
* 为访问过的连接设置一个颜色为红色
* 为鼠标移入的状态设置为深紫色
* 为超链接被点击的状态设置为深粉红色
*/
/* a:link{
color: yellowgreen;
}
a:visited{
color: red;
}
a:hover{
color: brown;
}
a:active{
color: deeppink;
}*/ /**
* ":hover"和":active"也支持其它标签哟，IE6中，不支持对超链接以外的元素设置，":hover"和":active"
*/
p:hover{
background-color: yellow;
}
p:active{
background-color:darkorchid;
} /**
* 设置文本框背景颜色为黄色
*
*/
input:focus{
background-color: yellow;
} /**
* 为p标签中选中的内容使用样式,可以使用"::selection伪类"
* 这种写法只兼容火狐浏览器
*/
p::-moz-selection{
background-color: orange;
}
/**
* 这种写法兼容大部分浏览器
*/
p::selection{
background-color: orange;
} </style>
</head>
<body> <a class="abc" href="https://www.cnblogs.com/yinzhengjie/">访问过的连接</a><br /><br /> <a class="def" href="https:www.baidu.com">没有访问过的连接</a><br /> <p>我是一个p标签</p> <!--
使用input标签可以创建一个文本输入框
-->
<input type="text" />
</body>
</html>
二.浏览器打开以上代码渲染结果
HTML&CSS基础-伪类选择器的更多相关文章
- css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
- css之伪类选择器:before :after(::before ::after)
一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before :after的区别:css3中修订后的伪元素使用:: ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
随机推荐
- uni-app v-for循环遍历 动态切换class、动态切换style
动态切换class,主要代码::class="i.themColor" <view v-for="i in htmlJSON" class=" ...
- saltstack执行state.sls耗时长的坑
一直用的 jenkins + saltstack 自动化构建发布项目,一共也就不超过20台服务器,奈何运行时间越来越慢,并且负载越来越高(这里大部分都是使用state模块),但是不用state模块效率 ...
- preg_match 第三个参数,
//请修改变量p的正则表达式,使他能够匹配str中的姓名 $p = '/name:([\w\s]+)/'; $str = "name:steven jobs"; preg_matc ...
- 利用Entity Framework修改指定字段中的值
利用Entity Framework修改指定字段中的值一般我们编辑某些模型的时候会用到类似这样的代码: [HttpPost] public ActionResult Edit(Article mode ...
- ASP.NET Core Restful Web API 相关资源索引
GraphQL 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(上) 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下) [视频] 使用ASP.NET C ...
- Neo4j CQL基本使用
Neo4j用CQL作为查询语言 CQL Neo4j图形数据库的查询语言 是一种声明性模式匹配语言 遵循SQL语法 语法是非常简单且人性化.可读的格式 1.启动服务,打开浏览器 在数据浏览器中的美元提 ...
- TCP/IP学习笔记14--IP地址 之 全局地址，私有地址
只要明天还在,我就不会悲哀,冬雪终会悄悄融化,春雷定将滚滚而来.----<只要明天还在>,汪国真 全局地址,私有地址 , 一种为解决IP地址不足而产生的技术. 起初 ,互联网中的任何一台主 ...
- C++标准异常与自定义异常
参见https://www.runoob.com/cplusplus/cpp-exceptions-handling.html C++ 标准的异常 C++ 提供了一系列标准的异常,定义在 中,我们可以 ...
- Qt 5.12 LTS 部署
1. 拷贝release生成的exe到一个独立的目录deploy 2. windeployqt.exe A_Toolkit.exe 3. 将qt\qt5.12.5\tool\mingw730_64\b ...
- jQuery实现简单导航栏的样式切换
style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369;} ul>li{ text-decoration: ...