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中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- [Oracle]Oracle数据库数据被修改或者删除恢复数据
1.SELECT * FROM CT_FIN_RiskItem--先查询表,确定数据的确不对(cfstatus第一行缺少)2.select * from CT_FIN_RiskItem as of t ...
- Sql语法高级应用之五：使用存储过程实现对明细多层次统计
前言 前面章节我们讲到了存储过程的基础用法,本章则将一个在项目中实际应用的场景. 在项目中经常会存在这样的需求,例如需要对明细列表进行按组.按级别.按人等进行统计,如果在附带列表的查询条件,又如何实现 ...
- ClassNotFoundException和 NoClassDefFoundError的区别
##### 1. 类型 ClassNotFoundException继承自Exception,属于java异常类.NoClassDefFoundError继承自Error,在java中Error一般属 ...
- Python3.5 学习七
心灵鸡汤 好书推荐:消费者行为学.围城.活着.盲井.三体.北京折叠 静态方法: @staticmethod #名义上归类管,和类没什么关系,只是引用用"." 在静态方法中,无法访问 ...
- BZOJ 1091--切割多边形(几何&枚举)
1091: [SCOI2003]切割多边形 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 356 Solved: 157[Submit][Status ...
- [Objective-C语言教程]多态（26）
多态性这个词表示有许多形式. 通常,当存在类的层次结构并且通过继承相关时,会发生多态性. Objective-C多态表示对成员函数的调用将导致执行不同的函数,具体取决于调用该函数的对象的类型. 考虑下 ...
- 30 个免费的 Sketch 必备插件
简评:中秋三天小长假,要不要学点啥?比如简单的设计?比如用 Sketch 做个项目? Sketch 有许多值得称赞的地方,其丰富的插件就是亮点之一.Sketch 的社区有着大量免费高效的插件.今天这篇 ...
- Mysql备份之Innobakcupex&Xtrabackup
一.innobackupex备份工具 基本选项 --compress:该选项表示压缩innodb数据文件的备份. --compress-threads:该选项表示 ...
- vue环境搭建简介
简单整理下vue的安装的新建项目 安装node.js和npm 参考其他教程 安装vue npm install vue 安装脚手架 vue-cli npm install --global vue-c ...
- java源码解析之Object类
一.Object类概述 Object类是java中类层次的根,是所有类的基类.在编译时会自动导入.Object中的方法如下: 二.方法详解 Object的方法可以分成两类,一类是被关键字fin ...