CSS 我的媒体查询中的代码被忽略

Question

我正在尝试仅在特定屏幕尺寸下填充 <p>。我有以下 CSS 和 HTML:

float-left-icon {
    padding-left: inherit;  
}

@media only screen and ( max-width : 991px) {
    float-left-icon{
        padding-left: 30px;   
    }
}

<p class="float-left-icon" style="padding-bottom: 15px;">
    <i class="glyphicon glyphicon-folder-open"></i>
    <a href="http://www.google.com" data-toggle="tooltip" data-placement="top" >Test</a>
</p>

我的问题是，当我在浏览器中调试 float-left-icon class 时，它甚至没有出现在开发人员工具中...所以它甚至没有触发。

有人可以告诉我做错了什么吗？

Answer 1

因为 float-left-icon 的 CSS 不是指 class。它应该以 .

开头

.float-left-icon{
        padding-left: inherit;      
 }
 @media only screen and ( max-width : 991px)
 {
     .float-left-icon{
            padding-left: 30px;         
     }
 }

Answer 2

您需要使用.来表示CSS中的class。

将 CSS 中的 float-left-icon 更改为 .float-left-icon

Answer 3

我想你忘记了一个点 (.) 字符：

.float-left-icon {
    padding-left: inherit;
}
@media only screen and (max-width: 991px) {
    .float-left-icon {
        padding-left: 30px;         
    }
}

Answer 4

类需要在前面加上 .，ID 前面要加上 # 等等。因此，将您的规则更改为：

.float-left-icon{
    padding-left: inherit;      
}

@media only screen and (max-width : 991px)
{
    .float-left-icon {
        padding-left: 30px;         
    }
}

如果您只使用此规则来填充 <p>，您可以通过将规则更改为 p.float-left-icon.

使其更具体

Answer 5

正确代码：

您需要在 CSS 选择器前添加一个 . 字符：

.float-left-icon {
    padding-left: inherit;  
}

@media only screen and ( max-width : 991px) {
    .float-left-icon{
        padding-left: 30px;   
    }
}

<p class="float-left-icon" style="padding-bottom: 15px;">
    <i class="glyphicon glyphicon-folder-open"></i>
    <a href="http://www.google.com" data-toggle="tooltip" data-placement="top" >Test</a>
</p>

解释：

在CSS中，class名称以.开头，id名称以#开头，标签名称开头不需要特殊字符.

举个例子：

.span {
   color : red;
}
#span {
   color : green;
}
span {
   color : blue;
}

<p class="span">Meep meep</p>
<p id="span">Meep meep</p>
<span>Vrooooom</span>

有关如何使用 CSS 选择器的更多详细信息，请参阅 W3Schools documentation。

CSS 我的媒体查询中的代码被忽略

CSS code inside my media query is ignored

html

css

media-queries

responsive-design

正确代码：

解释：