美文网首页
CSS3选择器

CSS3选择器

作者: 碎碎先生 | 来源:发表于2018-05-08 14:45 被阅读0次

可以参考:
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

相关文章

  • CSS3知识概要总结之选择器篇(二)

    是的,从这里开始我们就开始学习CSS3的选择器了,学习资源CSS3选择器 属性选择器 属性选择器 发现属性选择器真...

  • HTML5和CSS3新增内容

    CSS3选择器有哪些? 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些? 颜色:新增RGBA,HSL...

  • 初级了解css3伪类选择器

    在 CSS3 中,选择器是一种模式,用于选择需要添加样式的元素。 先来了解一下css3选择器的分类 css3选择器...

  • CSS3笔记(一)选择器

    回顾css3之前的选择器 css3选择器 1、属性选择器 2、结构 伪类选择器 注意点 : 选择是分类型,排序是不...

  • 2019前端经典面试题 CSS 部分常见问题

    CSS部分常见问题 1、CSS3选择器有哪些? 答:属性选择器、伪类选择器、伪元素选择器。 2、CSS3新特性有哪...

  • css选择器

    css1,2选择器 css3选择器

  • 移动web界面样式

    CSS3 CSS3在移动web开发中使用的特性包括:增强的选择器阴影强大的背景设置圆角边框 选择器 属性选择器完全...

  • CSS 3 选择器

    CSS3追加的选择器 在CSS3中,追加了三个属性选择器分别为 这样使得选择器有了通配符的概念。 结构性伪类选择器...

  • css3选择器

    CSS3选择器分类 层次选择器,常用的选择器| 选择器|类型|说明 ||--|--|--|--||E F |后代...

  • CSS3属性选择器

    CSS3中属性选着器增加了3个 结构性伪类选择器 CSS3结构性伪类选择器 CSS3选择器详解二 第二部分小节 、...

网友评论

      本文标题:CSS3选择器

      本文链接:https://www.haomeiwen.com/subject/vjbvrftx.html