1.css3属性选择器

注意！！！：类选择器、属性选择器、伪类选择器，权重为 10
属性选择器代码演示

  1. <button disabled="disabled">按钮</button>
  2. <button >按钮</button>
  3. <input type="text" name="" id="" value="文本框">
  4. <input type="search" name="" id="" value="搜索框">
  5. <div class="icon1">图标1</div>
  6. <div class="icon2">图标2</div>
  7. <div class="icon3">图标3</div>
  8. <div class="iicon3">图标4</div>
  9. <div class="absicon">图标5</div>
  10. <style>
  11. button {
  12.   /*按钮放入变为小手状*/
  13.   cursor: pointer;
  14. }
  15.  /*disabled是禁用*/
  16. button[disabled] {
  17.   cursor: default
  18. }
  19. input[type="search"] {
  20. color: pink;
  21. }
  22. /* 3. 以某个值开头的 属性值 */
  23. div[class^="icon"] {
  24. color: red;
  25. }
  26. /* 4. 以某个值结尾的 */
  27. div[class$="icon"] {
  28. color: green;
  29. }
  30. /* 5. 可以在任意位置的 */
  31. div[class*="icon"] {
  32.  color: blue;
  33.  }
  34. </style>

点击查看【codepen】

attrcanshu.png

结构伪类选择器

  1. 属性列表

jiegouweilei.png

  1. 代码演示
    //匹配第一个元素
ul li:first-child {
background-color: lightseagreen;
}
//匹配最后一个元素
ul li:last-child {
background-color: lightcoral;
}

nth-child 参数详解

  1. nth-child 详解
    • 注意：本质上就是选中第几个子元素
    • n 可以是数字、关键字、公式
    • n 如果是数字，就是选中第几个
    • 常见的关键字有 even 偶数、odd 奇数
    • 常见的公式如下(如果 n 是公式，则从 0 开始计算)
    • 但是第 0 个元素或者超出了元素的个数会被忽略
  • nthchildcanshu.png

  1. 代码演示

    <style>
/* 偶数 */
ul li:nth-child(even) {
 background-color: aquamarine;
}

/* 奇数 */
ul li:nth-child(odd) {
 background-color: blueviolet;
}

/*n 是公式，从 0 开始计算 */
ul li:nth-child(n) {
 background-color: lightcoral;
}

/* 偶数 */
ul li:nth-child(2n) {
 background-color: lightskyblue;
}

/* 奇数 */
ul li:nth-child(2n + 1) {
 background-color: lightsalmon;
}

/* 选择第 0 5 10 15, 应该怎么选 */
ul li:nth-child(5n) {
 background-color: orangered;
}

/* n + 5 就是从第5个开始往后选择 */
ul li:nth-child(n + 5) {
 background-color: peru;
}

/* -n + 5 前五个 */
ul li:nth-child(-n + 5) {
 background-color: tan;
}
</style>

    点击查看【codepen】

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

  • nth-child 选择父元素里面的第几个子元素，不管是第几个类型
  • nt-of-type 选择指定类型的元素

  1. 代码演示

    <style>
div :nth-child(1) {
 background-color: lightblue;
}

div :nth-child(2) {
 background-color: lightpink;
}

div span:nth-of-type(2) {
 background-color: lightseagreen;
}

div span:nth-of-type(3) {
 background-color: #fff;
}
</style>

3.伪元素选择器

  1. 伪类选择器 | ::before | 在元素之前插入内容 | | :—-: | —- | | ::after | 在元素之后插入内容 |

伪类选择器注意事项

  • before 和 after 必须有 content 属性
  • before 在内容前面，after 在内容后面
  • before 和 after 创建的是一个元素，但是属于行内元素
  • 创建出来的元素在 Dom 中查找不到，所以称为伪元素

  • 伪元素和标签选择器一样，权重为 1

    1. 代码演示 ```css ```

1.伪元素的案例
  1. 添加字体图标
    p {
width: 220px;
height: 22px;
border: 1px solid lightseagreen;
margin: 60px;
position: relative;
}
p::after {
content: '\ea50';
font-family: 'icomoon';
position: absolute;
top: -1px;
right: 10px;
}