Question

我试图仅在某个屏幕尺寸上填充<p>左边。我有以下CSS和HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的问题是，当我在浏览器中调试时，float-left-icon类甚至不会显示在开发人员工具中......所以它甚至不会被触发。

有人可以建议我做错了吗？

Answer 1

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

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

Answer 2

我想你忘记了一个点（.）字符：

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

Answer 3

类需要先加.，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 4

因为float-left-icon的CSS未引用class。它应该以{{1}}

开头

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中，类名以.开头，id名称以#开头，标签名称start在前面不需要特殊字符。

采用以下示例：

.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代码被忽略

5 个答案:

正确代码：

说明：