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. 通过GlobalAddAtom，GlobalGetAtomName方式发送字符串

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  2. 实验吧-杂项-MD5之守株待兔(时间戳&python时间戳函数time.time())

    其实也有点蒙圈,因为从没做过和时间戳有关的题. 打开网站,将系统密钥解密得到一串值,而自己的密钥解密是空的,既然说是要和系统匹配,就把解密得到的值以get方式送出去. 但是发现还是在自己的密钥也发生了 ...

  3. 12 文件流（Unity3D）

      关于文件操作在脚本中可以通过xml或其他的与文件相关的类中封装的一些方法可读取本地Asset文件夹下的xml文档和json文档到游戏中.但是这样操作文件难免会有拖延,C#提供了一种文件操作的方法, ...

  4. chrome浏览器安装vue调试器vue-devtools

    chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053

  5. Django实现websocket

    django实现websocket大致上有两种方式,一种channels,一种是dwebsocket.channels依赖于redis,twisted等 一 dwebsocket 1 Django实现 ...

  6. 《ES6标准入门》(阮一峰)--2.let 和 const 命令

    1.let命令 基本用法 let只在命令所在的代码块内(花括号内)有效. for循环的计数器,就很合适使用let命令. //var var a = []; for (var i = 0; i < ...

  7. 【剑指Offer】面试题24. 反转链表

    题目 定义一个函数,输入一个链表的头节点,反转该链表并输出反转后链表的头节点. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3 ...

  8. java_05_IO

    java_05_IO 1,动手动脑 使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件. 分析思路: 1)找到该文件夹下所有文件. 2)找出其中字节数大于 ...

  9. 当DIV内出现滚动条，fixed实效怎么办？

    sticky    盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位.在所有情况下( ...

  10. BZOJ 4888 [Tjoi2017]异或和

    题解:对每一位分别考虑贡献 先求前缀和 按照二进制减法分类讨论,求出最终这一位是1还是0 用树状数组维护 注意:树状数组对0这个位置单独考虑 #include<iostream> #inc ...