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中常用的伪类选择器的使用方法,最后把重心放 ...
随机推荐
- Solr相似度算法二：Okapi BM25
地址:https://en.wikipedia.org/wiki/Okapi_BM25 In information retrieval, Okapi BM25 (BM stands for Be ...
- Docker 入门笔记
Docker 可以理解为一个轻量化的虚拟机, 启动速度快,本身占的资源小 [重要], 容器里是不能保存数据的,容器只要一停止, 所有的数据都会丢失,所以如果重要的数据, 都需要通过配制,把数据保存在 ...
- Python验证实现登陆功能以及用户锁定（文件存储）
废话不多说先交代码(只是一个简单的验证):#!/usr/bin/env python #-*- coding:utf8 -*- # Structured program ‘#’是注释 # Functi ...
- byte[] 数组和字符串的转换，与byte[] 数组和int类型的之间的转化
我们先来看看byte bool int ushort 等的定义 首先时byte[]数组与string之间的转换 string 转换位byte[] 数组 string str = "1-1 ...
- 利用反射(Reflection)处理对象
创建一个学生类: public class Student { public int Id { set; get; } public string Name { set; get; } public ...
- ASP.NET Core使用NLog记录日志
1.根目录新建nlog.config配置文件 <?xml version="1.0"?> <nlog xmlns="http://www.nlog-pr ...
- 【12c OCP】最新CUUG OCP-071考试题库（51题）
------------------------------------------------------- 51.(12-10)choose the best answer: Evaluate t ...
- 学习笔记|Java 教程|菜鸟教程
一.Java 教程 1.Java 教程 Java 在线工具 JDK 1.6 在线中文手册 我的第一个 JAVA 程序 创建文件 HelloWorld.java(文件名需与类名一致), 代码如下: pu ...
- Elasticsearch(八)【NEST高级客户端--Mapping映射】
要使用NEST与Elasticsearch进行交互,我们需要能够将我们的解决方案中的POCO类型映射到存储在Elasticsearch中的反向索引中的JSON文档和字段.本节介绍NEST中可用的所有不 ...
- 使用deque模块固定队列长度，用headq模块来查找最大或最小的N个元素以及实现一个优先级排序的队列
一. deque(双端队列) 1. 使用 deque(maxlen=N)会新建一个固定大小的队列.当新的元素加入并且这个队列已满的时候,最老的元素会自动被移除掉 >>> from c ...