11、CSS3选择器及属性

一、CSS3概念知识点
- 1、概念
- 2、优点
- 3、渐进增强和优雅降级
二、CSS3选择器
- *1、层级选择器
- 2、属性选择器（常用于表单）
- 3、结构伪类选择器
- 4、目标伪类选择器（用于锚记效果）
- *5、否定伪类选择器
- 6、用户行为选择器
- 7、动态伪类选择器（当元素处于某种状态时被选中）
- 8、UI状态伪类选择器（多用于表单）
- 9、UI状态为元素选择器
三、CSS3新增属性
- 1、文字阴影属性 text-shadow
- 2、盒子阴影属性 box-shadow
- 3、边框圆角 border-radius

一、CSS3概念知识点

1、概念

  CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。

2、优点

  CSS3将完全向后兼容，之前的CSS2语法依旧能使用，无需修改之前的代码，而是增添了新的选择器和属性，可以实现一些新的效果，也能够让之前的一些比较复杂的效果有一个更简单的书写方式。

3、渐进增强和优雅降级

  渐进增强  progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验优雅降级  graceful degradation一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看，同时保证其根基处于安全地带

二、CSS3选择器

*1、层级选择器

  （1）E F    包含选择器        选中E下边所有层级中的F（2）E>F    子选择器          选中E下边第一层的F（3）E+F    相邻兄弟选择器    E后边第一个兄弟，如果是F，则选中（4）E~F    通用选择器        选中E后边所有的同级F

2、属性选择器（常用于表单）

  *(1)E[attr]               选中E中拥有属性attr的标签*(2)E[attr='value']       选中E中属性名为attr，属性值为value的标签*(3)E[attr~='value']      选中E中属性名为attr，属性值为多个或一个，其中一个为value的标签
补充:(4)E[attr^='value']     选中E中属性名为attr，属性值以value开头的元素(5)E[attr$='value']     选中E中属性名为attr，属性值以value结尾的元素(6)E[attr*='value']     选中E中属性名为attr，属性值包含value关键字的元素(7)E[attr|='value']     选中E中属性名为attr，属性值为value或者value-开头的元素

3、结构伪类选择器

  *(1)E F:first-child        E下边第一个子元素，如果是F则选中*(2)E F:last-child         E下边最后一个子元素，如果是F则选中*(3)E F:nth-child(n)       E下边的第n子元素，如果是F则被选中——even          偶数——odd           奇数——2n+1          奇数——2n            偶数——2n-1          奇数
补充：(4)E F:only-child         E下边仅有一个子元素，而且是F时被选中(5)E:root                 匹配文档的根元素，根元素永远是HTML(6)E:empty                匹配为空的E(有空格和换行都不算为空)

4、目标伪类选择器（用于锚记效果）

  E:target                 当E元素处于超链接锚记选中状态下被选中

*5、否定伪类选择器

  E:not(F)                  选中所有的E,除了满足条件F的

6、用户行为选择器

  E:focus                   当表单元素获取到焦点时被选中（多用于表单）

7、动态伪类选择器（当元素处于某种状态时被选中）

  E:link          超链接初始状态被选中E:visited       超链接访问后被选中E:hover         元素划过时被选中E:active        超链接激活时被选中注意：超链接需要按照以下顺序书写四种状态才能都生效link-visited-hover-active   lvha(驴哈)

8、UI状态伪类选择器（多用于表单）

  E:enabled           选中表单元素E中可用的标签E:disabled          选中表单元素E中不可用的标签E:checked           选中表单元素E中，被勾选的标签

9、UI状态为元素选择器

  E::selection        修饰E中处于高亮状态的部分

三、CSS3新增属性

1、文字阴影属性 text-shadow

  text-shadow:水平阴影偏移量 垂直阴影偏移量 模糊距离 阴影颜色;参数1     水平阴影偏移量    正数向右，负数向左参数2     垂直阴影偏移量    正数向下，负数向上参数3     模糊距离         只支持正数，需要带单位px参数4     阴影颜色文字阴影的多阴影写法text-shadow:第一组参数,第二组参数,第三组参数....;

2、盒子阴影属性 box-shadow

  box-shadow:水平阴影偏移量 垂直阴影偏移量 模糊距离 阴影大小(可以省略) 阴影颜色 内外阴影(可以省略);参数1     水平阴影偏移量    正数向右，负数向左参数2     垂直阴影偏移量    正数向下，负数向上参数3     模糊距离         只支持正数，需要带单位px参数4     阴影大小(可以省略)  正数，上下左右都增大；负数，上下所有都缩小参数5     阴影颜色参数6     内外阴影(默认为外阴影，也可以省略)  inset为内阴影

3、边框圆角 border-radius

  属性值为圆角半径,每个圆角都是有两个半径形成的。在正方形中,由于宽度和高度一样，即正方形宽度一半/高度一半，那么我们可以得到一个圆形在长方形中，由于宽高不一致，我们在写50%时，/前后的数值不一致，例如50px/100px，我们能够得到一个椭圆形在长方形中，如果我们让/前后数值一致，例如50px/50px,则能得到一个胶囊形状。总结：需要圆形则写一个正方形，然后border-radius:50%;需要椭圆形则写一个长方形，然后border-radius:50%;需要胶囊型则写一个长方形，然后border-radius:宽度的一半或者高度的一半;补充：边框的多参数写法(从左上角，顺时针给参数)一个参数          4个方向圆角两个参数          左上右下、右上左下三个参数          左上、右上左下、右下四个参数          左上、右上、右下、左下

11、CSS3选择器及属性相关推荐

CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素
CSS3知识点: CSS3的相关属性不兼容低版本浏览器,IE9以下是不兼容的,在实际开发中要特别注意,移动端支持优于PC端,是在CSS2上新增的属性,关于兼容这里有两个名词需要了解: 渐进增强 :(针 ...
CSS3 选择器——属性选择器
上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
HTML5属性选择器以什么开头,CSS3 选择器属性选择器介绍
属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上 ...
css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
CSS3新特性(属性选择器、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀）
这里写目录标题一.CSS3 属性选择器二.CSS3 结构伪类选择器三. CSS3 伪元素选择器四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
CSS3选择器-属性选择器
第1关:CSS3-属性选择器相关概念 1.以下选项中,属于属性选择器的是( ) C.span[id]{color:red;} 2.样式规则如下: p[class $= en]{font-weight: ...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...

11、CSS3选择器及属性

目录

一、CSS3概念知识点

1、概念

2、优点

3、渐进增强和优雅降级

二、CSS3选择器

*1、层级选择器

2、属性选择器（常用于表单）

3、结构伪类选择器

4、目标伪类选择器（用于锚记效果）

*5、否定伪类选择器

6、用户行为选择器

7、动态伪类选择器（当元素处于某种状态时被选中）

8、UI状态伪类选择器（多用于表单）

9、UI状态为元素选择器

三、CSS3新增属性

1、文字阴影属性 text-shadow

2、盒子阴影属性 box-shadow

3、边框圆角 border-radius

11、CSS3选择器及属性相关推荐

最新文章

热门文章