1. 伪类选择器：hover 和 focus 比较常用。

    1.1 hover：把鼠标移动到内容迈腾2020款TSI DSG舒适型的时候，字体变成了红色。

        html:

            <body>

                    <p>迈腾2020款TSI DSG舒适型</p>

            </body>

        css:   p:hover{color:red}   注意p和hover中间用冒号：分开。p代表所有p标签。

    1.2 focus：点击文本输入框，背景颜色变成黄色。

        html:

            <body>

                    <input type="text">

            </body>

        css:   input:focus{outline=0;background-color: yellow}   outline指外框， 注意p和hover中间用冒号：分开。

    1.3 active: 点击文本输入框，背景闪现黄色。如果鼠标左键按住输入框内部不放，背景一直都是黄色，放开之后黄色消失。

        html:

            <body>

                    <input type="text">

            </body>

        css:   input:active{background-color: yellow}   

        同样适合用于文字：点击文字，闪现黄色，按住不放是黄色，放开之后黄色消失。

        html:

            <body>

                    <p>迈腾2020款TSI DSG舒适型</p>

            </body>

        css:   p:active{color:yellow}

    1.4 link：浏览器刚打开的时候，没访问过的链接，把baidu的字体颜色设置为绿色，接下来如果访问这个链接之后，baidu的字体颜色会恢复到原来的紫色。注意id不能是纯数字。

        html:

            <body>

                    <a id="d1" href="http://www.baidu.com">baidu</a>

            </body>

        css:   #d1:link{color:green}

    1.5 visited: 浏览器刚打开的时候，没访问过的链接，baidu的字体颜色默认是蓝色，接下来如果访问这个链接之后，baidu的字体颜色会变成红色。

        html:

            <body>

                    <a id="d1" href="http://www.baidu.com">baidu</a>

            </body>

        css:   #d1:visited{color:red}

2. 伪元素选择器

    2.1 first-letter ：常用的给首字母设置特殊样式

        html:

            <body>

                    <p>迈腾2020款TSI DSG舒适型</p>

            </body>

        css:   p:first-letter{font-size:38px;color:red} 首字母38像素，红色。

    2.2 before ：在每个<p>标签的内容之前插入*

        html:

            <body>

                    <p>迈腾2020款TSI DSG舒适型</p>

                <p>迈腾2020款TSI DSG舒适型</p>

            </body>

        css:   p:before{content:'*';color:red}

    2.3 after ：在每个<p>标签的内容后面插入[?]

        html:

            <body>

                    <p>迈腾2020款TSI DSG舒适型</p>

                <p>迈腾2020款TSI DSG舒适型</p>

            </body>

        css:   p:after{content:"[?]";color:red}

day66-CSS伪类选择器和伪元素选择器的更多相关文章

  1. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  2. 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

    伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...

  3. CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

      伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...

  4. 前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类

    a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...

  5. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

  6. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  7. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

  9. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  10. H5 14-后代选择器和子元素选择器

    14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. Flink 历史服务与连接器

    History Server(历史服务) Flink提供了记录历史任务运行情况的服务,可用于在关闭Flink群集后依然能够查询已完成作业的相关信息. 配置: # 任务执行信息存储在hdfs目录 job ...

  2. CodeForces - 710E Generate a String （dp）

    题意:构造一个由a组成的串,如果插入或删除一个a,花费时间x,如果使当前串长度加倍,花费时间y,问要构造一个长度为n的串,最少花费多长时间. 分析:dp[i]---构造长度为i的串需要花费的最短时间. ...

  3. HDU 5430：Reflect 欧拉函数

    Reflect  Accepts: 72  Submissions: 302  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 65536/ ...

  4. 用AD 输出BOM时提示failed to open excel template

    解决办法: 去掉这个√!

  5. Java算法练习——回文数

    题目链接 题目描述 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1 输入: 121 输出: true 示例 2 输入: -121 输出: false ...

  6. IntelliJ IDEA ULTIMATE 2019.3 破解注册详细教程【亲测有效，持续更新~】

    ​ 申明:本教程 IntelliJ IDEA 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除. 注意 本教程适用于 IntelliJ IDEA 所有版本,请放心食用 ...

  7. js 一年中多个时间段 天数去重

    Date.prototype.format = function() { var s = ''; var mouth = (this.getMonth() + 1)>=10?(this.getM ...

  8. .NET CORE AutoMapper使用

    1.通过nuget安装AutoMapper,版本是7.0.1, 安装AutoMapper.Extensions.Microsoft.DependencyInjection  版本是4.0.1 不是以上 ...

  9. Cookie简单介绍

    Cookie 饼干. 其实是一份小数据, 是服务器给客户端,并且存储在客户端上的一份小数据 应用场景 自动登录.浏览记录.购物车. 为什么要有这个Cookie http的请求是无状态. 客户端与服务器 ...

  10. SQL的查询结果复制到Excel 带标题Head 有换行符导致换行错乱 的解决方案

    将SQL查询到的结果保存为excel有很多方法,其中最简单的就是直接复制粘贴了 1.带Head的复制粘贴 1)先左击红色区域实现选择所有数据 2)随后右击选择Copy with Headers  再粘 ...