简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1020作业-CSS权重与选择器
Blogger Information
Blog 18
fans 0
comment 0
visits 8458
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
1020作业-CSS权重与选择器
时间在渗透
Original
302 people have browsed it

选择器

选择符 解析
E:first-child 匹配父元素中的第一个子元素 E
E:first-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与nth-of-type公式

公式 取值
2n 偶数
2n+1 奇数
5n 5 10 15
n+5 从第5个开始（包含第五个）到最后一个（此括号里面的数学可以自定义修改）
-n+5 前5个包含第五个（此括号里面的数学可以自定义修改）

nth-child与nth-of-type区别

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

代码实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. <style>
  7.     /*权重为0 0 1*/
  8.     h1{
  9.         color: yellow;
  10.     }
  11.     /*此时h1标签显示为黄色*/
  12.     /*权重为0 1 1*/
  13.     h1.title{
  14.         color:red;
  15.     }
  16.     /*此时h1标签内容显示为红色*/
  17.     /*权重为1 0 0*/
  18.     h1.title#title{
  19.         color: blue;
  20.     }
  21.     /*此时h1标签内容显示为蓝色*/
  22.     /*  提升权重  */
  23.     /*   权重为 1 1 2 */
  24.     body > h1.title#title{
  25.         color: pink;
  26.     }
  27.     /*此时h1标签内容显示为粉色*/
  28.     /*  伪类使用方法  */
  29.     .list>.item:first-of-type{
  30.         color: red;
  31.     }
  32.     /*使ul下面的第一个li标签内容显示为红色*/
  33.     .list>.item:last-of-type{
  34.         color: red;
  35.     }
  36.     /*使ul下面的最后一个li标签内容显示为红色*/
  37.     .list>.item:nth-of-type(n+3){
  38.         color: blue;
  39.     }
  40.     /*使ul下面的从第三个标签开始后面的li标签的内容变为蓝色*/
  41.     .list>.item:nth-of-type(-n+3){
  42.         color: pink;
  43.     }
  44.     /*使ul下面的从第三个标签开始前面的li标签的内容变为蓝色*/
  45. </style>
  46. </head>
  47. <body>
  48.   <h1 class="title" id="title">权重权重权重</h1>
  49.   <ul class="list">
  50.       <li class="item">内容</li>
  51.       <li class="item">内容</li>
  52.       <li class="item">内容</li>
  53.       <li class="item">内容</li>
  54.       <li class="item">内容</li>
  55.       <li class="item">内容</li>
  56.       <li class="item">内容</li>
  57.       <li class="item">内容</li>
  58.   </ul>
  59. </body>
  60. </html>
Correcting teacher：PHPzPHPz

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
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！