Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 前端样式之元素选择器
Blogger Information
Blog 4
fans 0
comment 0
visits 6304
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端样式之元素选择器
Dz
Original
856 people have browsed it

简单的选择器

  • 场景↓
    1. <body>
    2.   <div class="container">
    3.     <div class="item" id="first">1</div>
    4.     <div class="item">2</div>
    5.     <div class="item">3</div>
    6.     <div class="item">4</div>
    7.     <div class="item center">5</div>
    8.     <div class="item">6</div>
    9.     <div class="item">7</div>
    10.     <div class="item">8</div>
    11.     <div class="item">9</div>
    12.   </div>
    13. </body>

元素选择器

  • 标签选择器，如body、div等等
    1. body {
    2.     }
    3. div{
    4.     }

类选择器

  • 对应着html中的class属性，如class=”item”
    1. .item {
    2.     }
  • 多个类复合应用，如class=”item center”
    1. .item.center{
    2.     }

id选择器

  • 如id=”first”
    1. #first {
    2.     }

简单选择器的优先级

  • id > class > 元素

上下文选择器

  • 场景↓
    1. <body>
    2.   <div class="container">
    3.     <div class="item">1</div>
    4.     <div class="item">2</div>
    5.     <div class="item">3</div>
    6.     <div class="item">4</div>
    7.     <div class="item center">5</div>
    8.     <div class="item">6</div>
    9.     <div class="item">7</div>
    10.     <div class="item">8</div>
    11.     <div class="item">9</div>
    12.   </div>
    13. </body>

后代选择器

  • 选择标签或类下所有的标签或类，如选择body下的所有div
    1. body div {
    2.     }

父子选择器

  • 选择标签或类下一级的标签或类，如选择body下一级div
    1. body > div {
    2.     }

同级相邻选择器

  • 选择类同级的下一个类，如选择class=”item center”下一个class=”item”
    1. .item.center + .item {
    2.     }

同级所有选择器

  • 选择类同级后面所有的类，如选择class=”item center”后面所有的class=”item”
    1. .item.center ~ .item {
    2.     }

伪类选择器

不分组的伪类选择器

  • 场景↓

    1. <body>
    2.   <div class="container">
    3.     <div class="item">1</div>
    4.     <div class="item">2</div>
    5.     <div class="item">3</div>
    6.     <div class="item">4</div>
    7.     <div class="item">5</div>
    8.     <div class="item">6</div>
    9.     <div class="item">7</div>
    10.     <div class="item">8</div>
    11.     <div class="item">9</div>
    12.   </div>
    13. </body>

  • 选择第一个子元素

    1. .container > *:first-child {
    2.     }

    或者

    1. .container > .item:first-child {
    2.     }

  • 选择最后一个子元素

    1. .container > :last-child {
    2.     }

  • 选择指定个数元素，如第3个元素

    1. .container > :nth-child(3) {
    2.     }

  • 只选择偶数单元格元素

    1. .container > :nth-child(2n) {
    2.     }

    或者

    1. .container > :nth-child(even) {
    2.     }

  • 只选择奇数单元格元素

    1. .container > :nth-child(2n-1) {
    2.     }

    或者

    1. .container > :nth-child(odd) {
    2.     }

  • 从指定位置(如从第4个元素开始)，选择剩下的所有元素

    1. .container > .item:nth-child(n + 4) {
    2.     }

  • 只取前几个元素（如只取前3个元素）

    1. .container > .item:nth-child(-n + 3) {
    2.     }

  • 只取最后几个元素（如只取最后3个元素）

    1. .container > .item:nth-last-child(-n + 3) {
    2.     }

  • 取倒数第几个元素（如取倒数第2个元素）

    1. .container > .item:nth-last-child(2) {
    2.     }

分组的伪类选择器

  1. 元素按类型进行分组
  2. 在分组中根据索引进行选择

  • 场景↓

    1. <body>
    2.   <div class="container">
    3.     <div class="item">1</div>
    4.     <div class="item">2</div>
    5.     <div class="item">3</div>
    6.     <span class="item">4</span>
    7.     <span class="item">5</span>
    8.     <span class="item">6</span>
    9.     <span class="item">7</span>
    10.     <span class="item">8</span>
    11.     <span class="item">9</span>
    12.   </div>
    13. </body>

  • 选择div组中的第一个元素

    1. .container div:first-of-type {
    2.     }

  • 选择div组中的最后一个元素

    1. .container div:last-of-type {
    2.     }

  • 选择span组中的指定一个元素，如选择第3个元素

    1. .container span:nth-of-type(3)  {
    2.     }

  • 选择span组中的前几个元素，如选择前3个元素

    1. .container span:nth-of-type(-n + 3)  {
    2.     }

  • 选择span组中的最后几个元素，如选择最后2个元素

    1. .container span:nth-last-of-type(-n + 3)  {
    2.     }

总结

  1. id选择器的应用场景目前只有二种场景： 表单元素， 锚点，开发中css样式尽量使用类选择器不要使用id选择器
  2. 相同元素，后面追加的样式会覆盖前面的样式
  3. 开发中伪类选择器应结合实际情况选择使用分组或者不分组伪类选择器
Correcting teacher：灭绝师太灭绝师太

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
灭绝师太 2020-07-18 15:36:55
总结得很细也很全，css3新增的一些动画样式，可以去研究下，很有意思。
1 floor
Author's latest blog post