5 伪类选择器

anchor伪类：专用于控制链接的显示效果

More Actions:link a:link 选择所有未被访问的链接。
:visited a:visited 选择所有已被访问的链接。
:active a:active 选择活动链接。
:hover a:hover 选择鼠标指针位于其上的链接。 
<style>

           a:link{

               color: red;

           }

           a:visited{

               color: coral;

           }

           a:hover{

               color: blue;

           }

           a:active{

               color: rebeccapurple;

           }

    </style>

before after伪类

before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。

More Actions:first-child p:first-child 选择属于父元素的第一个子元素的每个

元素。
:last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。
:before p:before 在每个

元素的内容之前插入内容。
:after p:after 在每个

元素的内容之后插入内容。

 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css伪类选择器</title>

    <style>

        /*a:link{*/

        /*    color: red;     !* 鼠标点击字体变成红色 *!*/

        /*}*/

        /*a:visited{*/

        /*    color: coral;   !* 设定字体为橙色 *!*/

        /*}*/

        /*a:hover{*/

        /*    color: blue;    !* 鼠标滑过字体变成蓝色 *!*/

        /*}*/

        /*a:active{*/

        /*    color: rebeccapurple;*/

        /*}*/

        .c1 p:first-child{

            color: red;

        }

        p#i1:after{

            content: "这是一个伪类构造的块级标签";

            display: block;

            color: gold;

        }

    </style>

</head>

<body>

<a href="https://www.baidu.com">hello world! </a>

<div class="c1">

    <p>item1</p>

    <p>item2</p>

    <div>item3</div>

    <p>item4</p>

</div>

<div id="i1">

    DIV标签

    <!--    <div style="color: red">这是一个伪类构造的块级标签</div>-->

</div>

<p>两只黄鹂鸣翠柳</p>

</body>

</html>

5 CSS伪类选择器的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  3. CSS伪类选择器 - nth-child(an+b):

    CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...

  4. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  5. css伪类选择器的查找顺序

    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...

  6. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  7. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  8. css伪类选择器详细解析及案例使用-----伪类选择器（1）

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  9. css 伪类选择器制作登录框表单

    使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...

  10. 彻底搞懂CSS伪类选择器：is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

随机推荐

  1. QT - Day 6

    跟着视频教程创建了翻金币的项目,花了好几个晚上才学习完. 视频地址:最新QT从入门到实战 感谢视频的教学,真是受益匪浅. 后面的代码参考了老师的模板以及文档的抒写格式. 发布到随笔中的目的一方面为了完 ...

  2. 函数探秘：深入理解C语言函数，实现高效模块化编程

    欢迎大家来到贝蒂大讲堂 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty's blog 1. 函数的概念 在数学中我们就知道了函数这个概念,而C语言同样引入了函数这个概念,那C语 ...

  3. OpenCV开发笔记（六十一）：红胖子8分钟带你深入了解Shi-Tomasi角点检测（图文并茂+浅显易懂+程序源码）

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  4. heapq.merge()高效合并有序序列

    import heapq import random # 针对较大的数据集,采用heapq中的merge()方法 # merge()不是对整个合并后的序列排序,而是使用一个堆一次一个元素的生成一个新序 ...

  5. 【LeetCode数组#1二分法】二分查找、搜索插入、在排序数组中查找元素的第一个和最后一个位置

    二分查找 题目 力扣704题目链接 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 ...

  6. CXP2.0的相机是否可以使用CXP1.1的Grabber

    可以 答案是肯定的. 目前CXP共有2个发布版本: 2011年发布CXP1.1 2021年发布CXP2.1,向后兼容,新标准增加了同步功能.数据率放大了一倍. 只要是符合CXP标准.接插件匹配,那么C ...

  7. webservice之jersey简单实用

    前言 项目中更需要使用到webservice,具体的是使用jersey.那么首先需要了解jersey和webservice的关系,捋顺webservice框架的各种实现,通过查阅相关博客,我个人总结w ...

  8. vscode+gitee+picgo实现稳定图床

    目录: 目录 目录: 1. 为什么使用vscode+gitee+picgo实现完美图床 2. 安装VSCode 2.1 安装VSCode软件及相关插件 3. 安装picgo 4. 准备Gitee图床 ...

  9. jQuery 框架

    jQuery 框架 目录 jQuery 框架 一. 概述 二. jQuery 安装引用 2.1 安装 2.2 本地导入使用 2.3 jQuery CDN引入 三. jQuery基本语法 四. 查找标签 ...

  10. Kubernetes: kube-controller-manager 源码分析

    0. 前言 在 Kubernetes 架构中,controller manager 是一个永不休止的控制回路组件,其负责控制集群资源的状态.通过监控 kube-apiserver 的资源状态,比较当前 ...