不明白html 5 的CSS3选择器中的:first-child和:last-child是干啥用的？

Posted 2023-04-01

:first-child和:last-child
用来选择某个元素的第一个子元素。
//输入ul li:first-child
//输入ul li:last-child
刚刚有个这方面的视频，视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的，有机会看看吧 参考技术A p:first-child
选择属于父元素的第一个子元素的每个 <p> 元素
p:last-child
选择属于其父元素最后一个子元素每个 <p> 元素。 参考技术B 顾名思义就是第一个子元素和最后一个子元素的意思。
:前面加你子元素共通的类名或者标签名。
如：div：first-child .a:last-chilid 参考技术C 选择父级下第一个元素和最后一个元素
如：
<ul class="list">
<li>aaaa</li>
<li>bbbb</li>
<li>ccccc</li>
<li>dddd</li>
</ul>
.list li:first-childcolor:#f00; //只有aaa变红色
.list li:last-childfont-weight:bold; //只有dddd变粗体 参考技术D 好像是子选择器哈后代选择器，不懂啊不懂

CSS媒体查询更改html选择器中的字体大小不起作用

【中文标题】CSS媒体查询更改html选择器中的字体大小不起作用

【英文标题】：CSS media query to change font-size in html selector not working

【发布时间】：2021-08-21 09:09:18

【问题描述】：

我正在使用 62.5% 技巧在不同的屏幕尺寸上设置我的字体大小。这些字母在大屏幕上看起来太小了，所以我想使用最小宽度媒体查询将其增加到 80% 的字体大小，但由于某种原因，这根本不起作用。难道我做错了什么？ 我正在使用 sass，此文件位于 _themes.scss 文件中

编辑：当我查看检查器时，媒体查询被划掉并显示“未知属性名称”

*,
*::before,
*::after 
  margin: 0;
  padding: 0;
  box-sizing: border-box;

html 
  font-size: 62.5%;
  @media screen and (min-width: 1600px) 
    font-size: 80%;
  

html,
body 
  overflow-x: hidden;

body 
  font-family: 'Poppins', Avenir, Helvetica, Arial, sans-serif;
  color: hsl(0, 0%, 100%);
  text-align: center;
  font-size: 1.6rem;
  min-height: 100vh;

【参考方案1】：

您的媒体查询需要独立存在，在初始定义之外，而不是在其中。

*,
*::before,
*::after 
  margin: 0;
  padding: 0;
  box-sizing: border-box;

html 
  font-size: 62.5%;
  

html,
body 
  overflow-x: hidden;

body 
  font-family: 'Poppins', Avenir, Helvetica, Arial, sans-serif;
  color: hsl(0, 0%, 100%);
  text-align: center;
  font-size: 1.6rem;
  min-height: 100vh;


  @media screen and (min-width: 1600px) 
    html 
      font-size: 80%;