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. .net core项目iis10上出现 HTTP 错误 500.19，错误代码：0x8007000d

    文件权限更改,配置文件更改,IIS重装重启,各种办法都不管用,下面是解决办法: 看错误信息里:模块:IIS Web Core 打开IIS: 模块列表中是否缺少红框里的两个组件(我这是已经安装好的截图) ...

  2. Tornado中的Cookie设置

    Tornado中的cookie分为两种--普通cookie和安全cookie 普通cookie 1.创建cookie 原型 self.set_cookie(name, value, domain=No ...

  3. webservice 的wsdl文件详解

    转 WSDL(Web Service Description Language)Web服务描述语言 ################################################## ...

  4. web应用中并发控制的实现，各种锁的集合

    参考:http://blog.csdn.net/xiangwanpeng/article/details/55106732 B/S构架的应用越来越普及,但由于它有别于C/S构架的特殊性,并发控制始终没 ...

  5. 干货|微软远程桌面服务蠕虫漏洞（CVE-2019-1182）分析

    2019年8月,微软发布了一套针对远程桌面服务的修复程序,其中包括两个关键的远程执行代码(RCE)漏洞,CVE-2019-1181和CVE-2019-1182.与之前修复的"BlueKeep ...

  6. Python获取桌面路径

    第一种: import winreg def get_desktop(): key = winreg.OpenKey(winreg.HKEY_CURRENT_USER, r'Software\Micr ...

  7. c# 异步和同步 多线程

    在执行较为耗时的处理时,很容易出现用户界面“卡顿”现象,用异步编程模型,将耗时处理的代码放到另一个线程上执行,不会阻止用户界面线程的继续执行,应用程序 就不再出现“卡顿”现象. 本例子提供同步加载和异 ...

  8. Python String startswith() Method

    一,摘自官方API  https://docs.python.org/3/library/stdtypes.html#methods str.startswith(prefix[, start[, e ...

  9. html—表单控件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. ping内网服务器 新

    #!/bin/bash ip="192.168.1."lastip=(200201202210211212220221222) #ip列表 可以继续添加 ps () { ping ...