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. Reference在Essay写作中的最佳占比是多少？

    很多同学在写完Essay作业后 就觉得大功告成了 并不是很注重参考文献 导致查重率过高 面临抄袭.取消成绩. 甚至被退学的情况 或者在essay写作中勉强标出几处 非常随意的在后面列出 其实这是很不正 ...

  2. springboot - 映射HTTP Response Status Codes 到 静态 HTML页面

    1.总览 2.代码 1).pom.xml <dependencies> <dependency> <groupId>org.springframework.boot ...

  3. zTree的学习

    最近要做一个有关权限的东西,原理和数据库都已经知道了,就是树状图困难. 原先是打算用layui的,因为我孤陋寡闻……吃了大亏,弄了3个小时,屁都没有.只能说是…… 后来百度找到了zTree,进去学习了 ...

  4. 字符输出、if判断

    1.这里学习交互性输入 #input  接受的所有数据都是字符串,即使你输入的是数字,但依然会被当成字符串来处理 #type 用来查看变量存入到内存时的属性 #int 将变量强制转化为整型 #str  ...

  5. 【LeetCode】分发糖果

    [问题]老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分. 你需要按照以下要求,帮助老师给这些孩子分发糖果: 每个孩子至少分配到 1 个糖果.相邻的孩子中 ...

  6. scanf与gets

    gets函数为什么不能读取字符就往下运行了 这里有一个共性的问题,就是 scanf 输入后,会遗留一个回车符,传递到下面的输入语句: 回车符就会被下面的输入语句接收,而结束了输入,这里就是一个错误的值 ...

  7. 7.CSRF攻击和文件上传漏洞攻击

    一.CSRF攻击及防范措施 1.概念 请求来源于其他网站,请求并不是用户的意愿,而是伪造的请求,诱导用户发起的请求 2.场景 攻击者盗用了你的身份,以你的名义发送恶意请求.CSRF能够做的事情包括:以 ...

  8. javascript的自定义对象/取消事件/事件兼容性/取消冒泡

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

  9. Windbg 实践之结合条件断点

    Case 1 1.bu USER32!PostMessageW "r $t0=@$t0+1;.printf\"PostMessageW Call Count:%d\",@ ...

  10. C语言I作业博客07

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/9935 我在这个课程的目 ...