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

时间:2015-04-09 08:15:52

标签: css css-selectors

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

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

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

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

2 个答案:

答案 0 :(得分:2)

彻底打破规则:

@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

的元素中列表项idportfolio-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

答案 1 :(得分:0)

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

.body { 
    styling code like background;
}

.header {
    code;
}