Question

css文件中的这部分代码是什么意思

@media (min-width: 992px) {
  #portfolio-list li .header {
      display: block;

或

@media (min-width: 992px) {
  #portfolio-list li .body {
      display: block;

此代码中的.body或.header是什么意思？

Answer 1

彻底打破规则：

@media (min-width: 992px) {

这是一个基于宽度的Media Query，有效地说当视口的宽度高于992px时，则应用以下规则：

#portfolio-list li .header {

这是由一系列selectors组成的CSS规则。

#指定元素的id属性，因此请选择ID为portfolio-list的元素
li是元素类型（列表项），因此请选择#portfolio-list
.header匹配header

#portfolio-list

所有包含header属性li

的元素中列表项id内portfolio-list类的所有元素

上面将基于例如：

选择的示例标记

<div id="portfolio-list"> <!-- in your CSS: #portfolio-list -->
 <ul>
  <li> <!-- in your CSS: li -->
    <span class="header">THIS</span> <!-- in your CSS: .header -->
    <span>(not this)</span>
  </li>
 </ul>
<div>

每个选择器后面的空格表示下一个应该与子元素相关。

如其他地方所述，CSS规则中的句点/ fullstop / dot前缀.表示类选择器。因此，.body和.header与CSS类相关，不应与<body>或<header>元素混淆，后者只需使用元素选择器进行选择：{{ 1}}或body

Answer 2

你在你的html中使用body和header，在你使用的css中设置它们的样式：

.body { 
    styling code like background;
}

.header {
    code;
}

什么意思.css中的.body标签

2 个答案: