博客列表 >css之选择器

css之选择器

雪~人胖胖
雪~人胖胖原创
2020年04月08日 00:14:58749浏览

选择器

1. 简单选择器

  • 1.1 种类
    分为元素选择器、组群选择器、通配选择器、属性选择器、类选择器、id选择器,最常用的是元素选择器,类选择器, id 选择器。优先级为:标签 < class < id。
    1. <div class="first">
    2. <div class="time" id="to">1</div>
    3. <div class="time" title="aaa">2</div>
    4. </div>
    元素选择器div{...},class选择器.time{...} , id选择器#to{} , 属性选择器.time[title="aaa"]{}

2. 上下文选择器

分为后代选择器、父子选择器、同级相邻选择器、同级所有选择器。

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li

例如

  1. <div class="first">
  2. <div class="time">1</div>
  3. <div class="time aaa">2</div>
  4. <div class="time">3</div>
  5. <div class="time">4</div>
  6. <div class="time">5</div>
  7. </div>

后代选择器.first div{}选中了所在12345的div,父子选择器body > div{}选中了.first这个div,同级相邻选择器.time.aaa + .time{}选中了3这个div,同级所有选择器.time.aaa ~ .time{}选中了345这3个div


3. 伪类选择器

场景 描述
结构伪类 根据子元素的位置特征进行选择
表单伪类 根据表单控件状态特征进行选择

3.1 结构伪类

3.1.1 不分组匹配

序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)
  1. <style>
  2. /* .container下的第一个子元素 */
  3. .container > :first-child {
  4. background-color: #ecbfbf;
  5. }
  6. /* .container下的最后一个子元素 */
  7. .container > :last-child {
  8. background-color: crimson;
  9. }
  10. /* .container下的第4个子元素 */
  11. .container > :nth-child(4) {
  12. background-color: darkblue;
  13. }
  14. /* .container下的8个子元素 */
  15. .container > :nth-last-child(2) {
  16. background-color: darkgoldenrod;
  17. }
  18. </style>
  19. <body>
  20. <div class="container">
  21. <div class="item">1</div>
  22. <div class="item">2</div>
  23. <div class="item">3</div>
  24. <div class="item">4</div>
  25. <div class="item center">5</div>
  26. <div class="item">6</div>
  27. <div class="item">7</div>
  28. <div class="item">8</div>
  29. <div class="item">9</div>
  30. </div>
  31. </body>

效果图


3.1.2 分组匹配

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)
  • 允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面
  • “-n”表示获取前面一组元素,正数表示从指定位置获取余下元素 (奇数odd)(偶数even)

    1. <style>
    2. /* 选中p标签最后一个 */
    3. .conser p:nth-last-of-type(1) {
    4. background-color: darkgreen;
    5. }
    6. /* h6标签第一个 */
    7. .conser h6:first-of-type {
    8. background-color: darkorange;
    9. }
    10. /* h6标签最后一个 */
    11. .conser h6:last-of-type {
    12. background-color: darkslategrey;
    13. }
    14. /* 选中3及以前的h4标签 */
    15. .conser h4:nth-of-type(-n + 3) {
    16. background-color: deepskyblue;
    17. }
    18. </style>
    19. <body>
    20. <div class="conser">
    21. <p>我们都是好孩子</p>
    22. <p>我们都是好孩子</p>
    23. <h6>我是好人</h6>
    24. <h6>我是好人</h6>
    25. <h6>我是好人</h6>
    26. <h4>1</h4>
    27. <h4>2</h4>
    28. <h4>3</h4>
    29. <h4>4</h4>
    30. <h4>5</h4>
    31. </div>
    32. </body>

    效果图

总结

学习了css中的各类选择器
伪类选择器是重点
目前自己还有知识点需要掌握

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议