Svg和canvas的区别，伪类选择器有哪些（归类）
svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；
区别二：
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。
1.
什么是结构性伪类选择器？？
首先选择器分类分为：结构性伪类选择器和状态性伪类选择器
状态伪类选择器(动态伪类+UI元素状态伪类)：
动态伪类::因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来:如link、visited、hover、active
先来看最常见的锚点伪类，四个锚点伪类遵循爱恨原则：LoVe/HAte
.demo a:link {color:gray;}
.demo a:visited{color:yellow;}
.demo a:hover{color:green;}
.demo a:active{color:blue;}
2.
UI元素状态伪类 IE6-8不支持
我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled（禁用）两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
css3新推出的：：：：：：
几个最基本的结构性伪类选择器
:root 选择器。根元素，HTML文档的根元素（or称最顶层元素），即<html>。
:not选择器。譬如想对某个结构元素内的元素使用一种样式，但是又想排除这个元素下面的某个子元素，让它不使用此样式，可以使用:not。
:empty选择器。可规定当某元素内容为空白的时候，使用其所定义的样式。
:target选择器。使用此选择器来对页面中的target元素（该元素的ID被当作超链接对象）指定样式，该样式只在用户点击了对应的超链接，并跳转到target元素后起作用。
以上是四个最基本的结构性伪类选择器
P:first-child
p:last-child div:nth-child
规定属于其父元素的第二个 p 元素的每个 p：
定义和用法：
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
p:nth-of-type(2)
{
background:#ff0000;
}
可以是奇数和偶数
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
可以使用公式
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
p:nth-of-type(3n+0)
{
background:#ff0000;
}
Svg和canvas的区别，伪类选择器有哪些（归类）的更多相关文章
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- 关于CSS各种选择器，还有各种引入样式表的区别，import导入样式表，在介绍一些伪类选择器
(一)CSS选择器: 1.标签选择器:通过HTML的标签名直接选择该标签 2.类选择器:通过.选择器的名称{} 来对添加了class属性的标签进行选中 3.ID选择器:通过#选择器的名称{} 来对添加 ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- CSS3中的伪类选择器详解
类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- Replication--如何使用快照来初始化化请求订阅
这是一篇针对新人的知识普及文章,老人慎入! 在快照发布和事务发布中,SQL Server需要使用快照来将数据库某一时间点的数据传递给订阅,快照使用BCP的机制. 首先我们需要查看和设置快照的生成目录, ...
- Spring Boot 学习系列（06）—采用log4j2记录日志
此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 为什么选择log4j2 log4j2相比于log4j1.x和logback来说,具有更快的执行速度.同时也支 ...
- docker-runc not installed on system 问题
问题描述: docker运行镜像的时候,报错如下: 1 2 3 [root@etcd1 k8s]# docker run -it registry.helloworld.com/test/atsd:l ...
- “全栈2019”Java异常第十三章：访问异常堆栈跟踪信息
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- python 使用eval() 可以将json格式的数据,转换为原始数据
使用python 自带的函数可以将json 格式的数据(也就是字符串)转换为原始格式的数据, 当使用json.loads()无法将json格式的数据转换为原始数据(存在多层各种格式类型数据的嵌套), ...
- java----session
什么是session? 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),也就是说他是保存在服务端的.注意:一个浏览器独占一个session对象(默认情况下).因此,在 ...
- 本机号码认证黑科技：极光（JG）开发者服务推出“极光认证”新产品
近日,中国领先的大数据服务商极光(JG)推出全新产品--极光认证JVerification.极光认证是极光针对APP用户注册登陆,二次安全验证等身份验证场景打造的一款本机号码认证SDK,验证用户提供的 ...
- 微信小程序富文本编辑，Thinkphp5.1
内容很简单,代码做了注释可以看一下 主要是把 文本 标题 标题颜色 图片 赋值到数组内, 举例: { pic: "/Share/image/images/bgqq_01.png" ...
- iOS 时区获取问题
时区缩写 UTC, CST, GMT, CEST 以及转换 UTC是协调世界时(Universal Time Coordinated)英文缩写,是由国际无线电咨询委员会规定和推荐,并由国际时间局(BI ...
- Spring Boot 笔记汇总
使用IDEA搭建Spring Boot入门项目 从零开始完整搭建 Spring-Boot 项目开发框架的教程 IDEA通过Maven WebApp archetype 创建Spring boot项目骨 ...