css常用属性初总结:伪元素和伪元素

前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧。

其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究竟什么是伪类?什么是伪元素?

伪类和伪元素的理解:

官方解释:

伪类一开始只是用来表示一些元素的动态状态,典型的就是大家常用的链接的各个状态(link、active、hover、visited),随后css2标准
扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无标识的“幽灵”分类。

伪元素则代表了某个元素的的子元素,这个子元素虽然逻辑上存在,但是并不实际上存在于文档树中,如我们平时用的after、before等。

自己粗浅的理解就是伪类就是一个无须标识的类,伪元素则就是一个元素,只是不存在与文档树中。

关于用法:伪类前面是一个冒号,伪元素前面则是两个冒号。E:first-child伪类,E::first-line伪元素。这是最新的css3标准,但是css2中
关于after和before都使用一个冒号,这里就需要大家注意了。而且css3还扩展了不少伪类,这里就不提了,感兴趣的自己可以去查资料。

常见应用:
伪类:
1.a链接样式 <a href="#">点击链接</a> a:hover{color:red} 鼠标悬浮字体变红。

2.隔行变色 <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul> ul li:nth-child(even){background-color:#ccc}或者ul li:nth-chilid(2):{background-clolor:#ccc}

伪元素:
清理浮动:
.clear{zoom:1}
.clear:after{display:block;content:'';clear:both;}

关于伪类和伪元素,就讲到这里,有关伪类和伪元素,能做出很多有意思的效果。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368429.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 8:CompletableFuture的权威指南

Java 8即将到来&#xff0c;因此该学习新功能了。 尽管Java 7和Java 6只是次要的发行版&#xff0c;但版本8将向前迈出一大步。 也许太大了&#xff1f; 今天&#xff0c;我将为您详细介绍JDK 8中的新抽象– CompletableFuture<T> 。 众所周知&#xff0c;Java 8有望在不…

mysql数据库工程师网易微专业_网易MySQL数据库工程师微专业学习笔记(五)

一、mysql数据库中的存储引擎mysql在创建数据表时可以通过engine关键字设置存储引擎的类型&#xff0c;也可以通过alter命令来修改表的存储引擎。可以通过show engines命令来查看当前mysql数据库支持的存储引擎的类型&#xff0c;一般场景的存储引擎有&#xff1a;InnoDB、MyIS…

Java并发编程笔记之ConcurrentLinkedQueue源码探究

JDK 中基于链表的非阻塞无界队列 ConcurrentLinkedQueue 原理剖析&#xff0c;ConcurrentLinkedQueue 内部是如何使用 CAS 非阻塞算法来保证多线程下入队出队操作的线程安全&#xff1f; ConcurrentLinkedQueue是线程安全的无界非阻塞队列&#xff0c;其底层数据结构是使用单向…

03 Day Python数据类型

一&#xff1a;什么是数据&#xff1f; x10&#xff0c;10是我们要存储的数据 2 为何数据要分不同的类型 数据是用来表示状态的&#xff0c;不同的状态就应该用不同的类型的数据去表示 3 数据类型 数字 字符串 列表 元组 字典 集合 二&#xff1a;数字int #bit_length() 当十进…

border三角形阴影(不规则图形阴影)和多重边框的制作

前言&#xff1a;这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方&#xff0c;请大家指正&#xff0c;我会持续更新&#xff01; 1. border的组合写法 border&#xff1a;border-width border-style border-color; border-width&#xff1a;边框宽度&#xff0…

JDK 8 Javadoc调整了方法列表

自开始以来&#xff0c; Javadoc输出基本上是静态HTML&#xff0c;具有导航链接和外观的简单样式表样式。 Java SE 7很长时间以来就看到Javadoc输出默认外观的第一个重大变化 &#xff0c;现在看来JDK 8将在生成的Javadoc输出上引入新的变化。 在本文中&#xff0c;我将通过JDK…

hdp安装 不安装mysql_hdp安装及使用问题汇总(一)

1)安装HDP时&#xff0c;如果打印如下错误信息&#xff1a;[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:579)是由于系统的python版本过高&#xff0c;导致验证ssl失败&#xff0c;将python降级为2.7.5以下或修改每个安装节点的python证书验证配置文件…

PhotoSphereViewer 全景图

1网站地址&#xff1a;http://photo-sphere-viewer.js.org/markers.html#demo 2参数中文地址&#xff1a;https://www.cnblogs.com/big-tree/p/5933437.html 使用方法&#xff1a; /*** Initialize the viewer*/ var PSV new PhotoSphereViewer({ // main configuration panor…

常用Lunix命令

计算机 1.硬件系统 输入单元、输出单元、算术逻辑单元、控制单元、记忆单元 中央处理单元&#xff1a;CPU&#xff08;算术逻辑单元、控制单元&#xff09; 电源、主板、CPU、内存&#xff08;RAM&#xff09;、硬盘、&#xff08;声卡、显卡、网卡&#xff09;&#xff08;集成…

angularJS constant和value

angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。 相同点是&#xff1a;都可以接受两个参数&#xff0c;name和value。 区别&#xff1a; 1.constant(name,value)可以将一个已经存在的变量值注册为服务&#xff0c;并将其注入到应用的其他…

让我们编写一个文档样式的Web服务

您可能知道&#xff0c;我们可以使用四种主要的Web服务样式。 它们如下&#xff1a; 文件/文学 包装的文件/文学 RPC /编码 RPC /文字 当然&#xff0c;现在不建议使用RPC /编码样式。 如果您有兴趣&#xff0c;可以在此处找到这篇非常全面的文章&#xff0c;以了解不同的…

linux 进入容器,查看和关闭进程

1&#xff0c;linux 查询容器 ID&#xff1a; docker ps 2&#xff0c;进入容器&#xff08;退出 exec 命令用&#xff1a;[ctrlD] &#xff0c;不会终止容器运行。退出 top 命令&#xff1a;ctrl C&#xff09; docker exec -it c39c9d3898c0 /bin/bash 3&#xff0c;查询进程…

mysql表单查询_MySQL表单集合查询

表单查询简单查询SELECT语句查询所有字段指定所有字段&#xff1a;select 字段名1,字段名2&#xff0c;...from 表名;select * from 表名;查询指定字段select 字段名1,字段名2&#xff0c;...from 表名;按条件查询带关系运算符的查询SELECT 字段名1,字段名2,……FROM 表名WHERE…

解决阿里云OSS跨域问题

解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次&#xff0c;第一次通过img标签进行&#xff0c;第二次通过异步加载获取。第一次请求到图片&#xff0c;浏览器会进行缓存&#xff0c;随后再进行异步请求&#xff0c;保存跨域失效。 错误信息如下&#xff1a…

css之hover改变子元素和其他元素样式

参考地址&#xff1a;链接 表示下一级元素&#xff0c;>表示子元素 1 <!DOCTYPE html>2 <html>3 <head lang"en">4 <meta charset"UTF-8">5 <title></title>6 </head>7 8 <style>9 #a {co…

将JacpFX客户端与JSR 356 WebSockets一起使用

JSR 356 WebSockets是即将发布的JEE 7版本中令人兴奋的新功能之一&#xff0c;并且在其参考实现中包括Server-和Client API。 这使其非常适合在客户端与JavaFX集成。 JacpFX是JavaFX之上的RCP框架&#xff0c;它使用基于消息的方法与组件进行交互。 这种基于消息的方法使集成We…

nagios check_mysql uptime_nagios使用check_mysql监控mysql

如果没有check_mysql插件&#xff0c;需要安装Mysql数据库1、建立专用数据库&#xff1a; [rootsvr3 ~]#mysql -u root -pEnter password:Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection id is 51910Server version: 5.5.3-m3-log Source di…

《精通Spring4.X企业应用开发实战》读后感第七章(AOP概念)

转载于:https://www.cnblogs.com/Michael2397/p/8068486.html

XHTML与HTML的区别

XHTML的语法较为严谨&#xff0c;拥有一定的规则&#xff0c;如果不遵循规则的话容易出错。但也不必太过担心&#xff0c;因为XHTML的规则并不太难&#xff0c;它和HTML4.01标准没有太多的不同。 需要注意的是以下几点&#xff1a; 1.XHTML标签必须被正确的关闭&#xff0c;即…

EC2上的ElasticSearch不到60秒

好奇地看到所有ElasticSearch轮奸是关于什么的&#xff1f; 想在没有大量肘部油脂的情况下看到它吗&#xff1f; 然后&#xff0c;朋友&#xff0c; 别再犹豫了-不到60秒&#xff0c;我将向您展示如何在AWS AMI上安装ElasticSearch 。 您首先需要一个AWS账户以及一个SSH密钥对…