CSS3选择器

可以参考:
1、https://blog.csdn.net/q1056843325/article/details/53189526?ref=myread
2、https://www.cnblogs.com/caoyc/p/5855426.html
CSS3选择器分为以下五类
1、基本选择器
2、层次选择器
3、伪类选择器(分为六种:动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器)
4、伪元素
5、属性选择器

详细介绍:
一、基本选择器
有以下几种: * 、 E 、#id、 .class、selector1,selectorN
*: 通配选择器,选择所有元素,也可以选择某个元素下的所有元素(例: .demo *{background: red;},此时元素类名为demo下的所有元素都将背景色设为红色)
E:元素选择器(html、body、p、div、ul、li等等)

id:ID选择器

.class:类选择器,这里介绍下多类选择器,通过两个或两个以上类选择器合并,来定义有别于一个类名的元素效果
(例:.item.important {background: red;} 只对同时包含这两个类名的标签作用,ul.block{background: red;}仅对ul元素类名为block的作用)
*IE6选择器并不支持多类名选择器,其将以末尾类名为准
selector1,selectorN: 群组选择器是将具有相同样式的元素分组在一起,每个选择器之间用(,)隔开
,省去(,)就成了后代选择器
二、层次选择器
主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系: E F、E>F、E+F、E~F
E F:后代选择器(或包含选择器)例如“E F”,E为祖先元素,F为后代元素,表达的意思就是选择器E元素的所有后代F元素,这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系,都将被选中
E>F:子选择器 只能选择某元素的子元素,其中E为父元素而F为子元素
E + F:相邻兄弟选择器,可以选择紧接在另一个元素后的元素,他们具有一个相同的父元素,换句话说,E和F是同辈元素,F元素在E元素的后面,并且相邻。
E~F通用兄弟选择器,是CSS3新增的,用于选择某元素后面的所有兄弟元素
三、动态伪类选择器
CSS3伪类选择器可以分为六种:动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。常见的“:link”、“:visited”、“:hover”、“:active”。
动态伪类选择器:
动态伪类早在CSS中就有,并不是CSS3才有的,动态伪类并不存在于HTML中,只有当用于和网站交互的时候才能体现出来。动态伪类包含两种,第一种是链接中常看到的锚点伪类,另一种为用户行为伪类
E:link 链接伪类选择器,
E:visited 链接伪类选择器
E:active 用户行为伪类选择器
E:hover 用户行为伪类选择器
E:focus 用户行为伪类选择器
锚点伪类的设置必须遵守一个“爱恨原则”LoVe/HAte,也就是“link-visited-hover-acticve”
四、目标伪类选择器
目标伪类选择器“:target”是众多使用的CSS3特性中的一个,用来匹配文档(页面)的URI中某个标志符的目标元素
五、语言伪类选择器
六、UI元素状态伪类选择器
主要用于form表单元素上,以提高网页的人机交互、操作逻辑以及页面的整体美观
UI元素的状态一般包括:启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机
七、结构伪类选择器
所有的结构伪类都是基于HTML文档树的也称作DOM
语法: E:first-child、E:last-child、E:root、E F:nth-child(n),其中n可以是整数(1、2、3)关键字(even、odd)可以是公式(2n+1) 、 E F:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:first-of-type、E:last-of-type、E:only-child、E:only-of-type、E:empty

线性渐变学习网址
https://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341

推荐阅读更多精彩内容

  • 一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 * 通配选择器 选择文档中所...
    newSpring666阅读 298评论 0 0
  • 基本选择器 1.通配符选择器 *通配符——通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素 2.元素...
    前端森林阅读 322评论 0 0
  • 第6章 征服CSS3选择器 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过i...
    阿振_sc阅读 400评论 0 1
  • 学习CSS3中的选择器有助于我们更简洁更快编写样式 结构性伪类 E:nth-child(n) 表示E父元素中的第...
    lilyping阅读 422评论 0 0
  • 属性选择器 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式,而CSS3在...
    樱桃小丸子儿阅读 797评论 0 19