CSS3新增属性选择器

属性选择器可以根据特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

选择符 简介
E[att] 选择具有 att 属性的 E 元素
E[att=”val”] 选择具有 att 属性且属性值等于 val 的 E 元素
E[att^=”val”] 匹配具有 att 属性且以 val 开头的 E 元素
E[att$=”val”] 匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*=”val”] 匹配具有 att 属性且值中含有 val 的 E 元素

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>CSS3新增属性选择器</title>
  8.     <style>
  9.         /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
  10.         /* input[value] {
  11.             color:pink;
  12.         } */
  13.         /* 只选择 type =text 文本框的input 选取出来 */
  14.         input[type=text] {
  15.             color: pink;
  16.         }
  17.         /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
  18.         div[class^=icon] {
  19.             color: red;
  20.         }
  21.         section[class$=data] {
  22.             color: blue;
  23.         }
  24.         div.icon1 {
  25.             color: skyblue;
  26.         }
  27.         /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
  28.     </style>
  29. </head>
  30. <body>
  31.     <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
  32.     <!-- <input type="text" value="请输入用户名">
  33.     <input type="text"> -->
  34.     <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
  35.     <input type="text" name="" id="">
  36.     <input type="password" name="" id="">
  37.     <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
  38.     <div class="icon1">小图标1</div>
  39.     <div class="icon2">小图标2</div>
  40.     <div class="icon3">小图标3</div>
  41.     <div class="icon4">小图标4</div>
  42.     <div>我是打酱油的</div>
  43.     <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
  44.     <section class="icon1-data">我是安其拉</section>
  45.     <section class="icon2-data">我是哥斯拉</section>
  46.     <section class="icon3-ico">哪我是谁</section>
  47. </body>
  48. </html>

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。

选择符 简介
E:first-child 匹配父元素中的第一个子元素 E
E:last-child 匹配父元素中的最后一个 E 元素
E:nth-child(n) 匹配父元素中的第 n 个 子元素 E
E:first-of-type 指定类型 E 的第一个
E:last-of-type 指定类型 E 的最后一个
E:nth-of-type(n) 指定类型 E 的第 n 个

nth-child (n)可以选择某个父元素的一个或多个特定的子元素

  • n 可以是数字，关键字和公式
  • n 如果是数字，就是选择第n个子元素，里面数字从1开始..
  • n 可以是关键字： even偶数， odd奇数
  • n 可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
  • 常用公式： | 公式 | 取值 | | —- | —- | | 2n | 偶数 | | 2n+1 | 奇数 | | 5n | 5 10 15… | | n+5 | 从第5个开始（包含第5个）到最后 | | -n+5 | 前5个（包含第5个） |

nth-child和nth-of-type的区别

  1. nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
    2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

小结：

  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth- child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
  • nth-of-type对父元素里面指定子元索进行排序选择。先去匹配E，然后再根据E找第n个孩子
  • 关于nth-child (n)我们要知道n是从0开始计算的，要记住常用的公式
  • 如果是无序列表，我们肯定用nth-child更多
  • 类选择器、 属性选择器、伪类选择器，权重为10。

CSS3伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

注意：

  • before和after创建一个元素，但是属于行内元素·新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法：element::before{}
  • before 和 after必须有content属性
  • before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为1

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：
1.box-sizing:content-box 盒子大小为width+padding+border(以前默认的）
2.box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）