Question

我刚刚向现有网站添加了一些新的html元素，这些元素不受随附的css规则的影响。当我检查元素没有css显示这些HTML元素。我知道该页面正确链接到css文件，因为否则页面上没有任何内容。该网站可以在http://evolutionhire.com/查看。在耗材部分，我有一系列包含图像和跨度的div，似乎不受影响

    <div class="shop-item">
        <h1>BONGO TIES</h1>
        <span class="shop-price"><span class="prices">7 euro</span> per pack</span>
        <img src="img/bongo.png"/>
    </div>

.shop-item {
    float: left;
    margin: 10px 56px 0px 0px;
    text-align: left;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.shop-price {
    position: absolute;
    top: 41px;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: 0.6s ease-in-out;
    padding: 50px 10px 10px 10px;
    text-align: left;
    box-sizing: border-box;
    color: white;
    font-size: 14px;
    display: table-cell;
    vertical-align: middle;
    line-height: 18px;
}

Answer 1

http://evolutionhire.com/css/style.css文件中的问题，它是您的css块中缺少的结束大括号：

@media only screen and (max-width: 768px) {
   .product {
             display: none;                      
   }

   .popup {
             width: 272px;                      
   }

所以只需在第2230行添加“}”，它应该可以正常工作

Answer 2

您的CSS无法验证。错误会导致整个文件无法处理。

点击此处查看您的CSS：https://jigsaw.w3.org/css-validator/#validate_by_input

新添加的html元素没有链接到css

2 个答案: