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. 078-PHP数组排序，两次循环法

    <?php $arr=array(35,43,56,2,76,23,47,55,71); //定义一个数组 echo '数组排序之前的信息:<br />'; print_r($arr ...

  2. 《新标准C++程序设计》3.5（C++学习笔记8）

    常量对象和常量成员函数 一.常量对象 如果希望某个对象的值初始化后就再也不被改变,则定义该对象时可以在前面加const关键字,使之成为常量对象. class CDemo { private: int ...

  3. Swift 协议protocol

    // associatedtype 关键字 用来声明一个类型的占位符作为协议定义的一部分 protocol LXFViewModelType { associatedtype Input associ ...

  4. 实验吧-web-天下武功唯快不破(Python中byte和str的转换)

    题目:看看响应头 打开网站,既然已经提示我们看响应头了,那我们就看看呗(习惯bp,也可直接F12查看) 可以看到,响应头部分有个FLAG,而且有提示:please post what you find ...

  5. Elasticsearch 删除文档

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...

  6. Elasticsearch 使用集群 - 列出索引

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...

  7. 修改电脑IP地址和MAC地址

    一.修改IP地址: 电脑右下角:上网的图标,点击右键,打开“网络和共享中心”, 点击“本地连接”,打开的窗口点击“属性”, 打开新窗口,找到“IPv4”,点击“属性”, 打开新窗口,修改ip,保存,关 ...

  8. Mysql安装维护笔记一

    1.Centos7安装mysql rpm安装PHP7相应的yum源 $wget 'https://dev.mysql.com/get/mysql57-community-release-el7-11. ...

  9. linux X64函数参数传递过程研究

    基础知识 函数传参存在两种方式,一种是通过栈,一种是通过寄存器.对于x64体系结构,如果函数参数不大于6个时,使用寄存器传参,对于函数参数大于6个的函数,前六个参数使用寄存器传递,后面的使用栈传递.参 ...

  10. 洛谷 P5542 [USACO19FEB]Painting The Barn

    题目传送门 解题思路: 二维差分的板子题.题解传送门 AC代码: #include<iostream> #include<cstdio> using namespace std ...