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中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- TSQL--聚合函数
--======================================================== --COUNT --COUNT(1) 和COUNT(*) 计算结果相同,COUNT ...
- Visual Studio for mac从入门到放弃1
MAC 第一步:从微软官网下载:https://www.visualstudio.com/vs/visual-studio-mac/ 第二步:安装软件过程出现 It was not possible ...
- MVC ViewData与ViewBag的区别
一.ViewData 1.ViewData派生自ViewDataDictionary,所以它具有字典的属性,例如:ContainsKey .Add .Remove 和 Clear : 2.字典键值是字 ...
- NPOI设置Excel单元格字体、边框、对齐、背景色
代码: ICellStyle cellStyle = workbook.CreateCellStyle(); cellStyle.BorderBottom = BorderStyle.Thin; ce ...
- 【ocp-12c】最新Oracle OCP-071考试题库（44题）
44.(9-12)choose all that apply View the Exhibit and examine the details of the ORDER_ITEMS table. Ev ...
- 鸡肋点搭配ClickJacking攻击-获取管理员权限
作者:jing0102 前言 有一段时间没做测试了,偶尔的时候也会去挖挖洞.本文章要写的东西是我利用ClickJacking拿下管理员权限的测试过程.但在说明过程之前,先带大家了解一下ClickJac ...
- php 对比两个数组中的值是否相等
$a = ['1','2','4','3'];//提交答案 $b = ['2','1','3'];//正确答案 $state = $this->diffArray($b, $a); echo ' ...
- 爬虫2：urllib
了解即可,不好用 一. 概述 python内置的http请求库,包括4个模块,分别如下 urllib.request 请求模块 urllib.error 异常处理模 ...
- 利用python 学习数据分析 (学习一)
内容学习自: Python for Data Analysis, 2nd Edition 就是这本 纯英文学的很累,对不对取决于百度翻译了 前情提要: 各种方法贴: https://w ...
- 4. C++11非受限联合体
在C/C++中,联合体是一种构造类型的数据结构.在一个联合体内,我们可以定义多种不同的数据类型,这些数据类型共享相同的内存空间,可以达到节省内存空间的目的. 1. 取消数据类型的限制 在C++98中, ...