11、CSS3选择器及属性

最新推荐文章于 2024-06-13 21:34:41 发布

hl8187

最新推荐文章于 2024-06-13 21:34:41 发布

阅读量120

点赞数

分类专栏： Web前端文章标签： css3 css html

本文链接：https://blog.csdn.net/hl8187/article/details/127367882

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、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个方向圆角
      两个参数          左上右下、右上左下
      三个参数          左上、右上左下、右下
      四个参数          左上、右上、右下、左下