Question

我想替换我的其中一页上的主要“英雄”背景。由于我使用的是Wordpress，因此我不得不使用自定义CSS（我无法编辑HTML）。

我曾尝试使用班级选择器来定位包含当前照片的div，如下所示：

.header .custom-mobile-image {

    background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg);


}

这是我要定位的HTML代码：

<div class="header custom-mobile-image" style="background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/education-books.jpg"); background-color: rgb(106, 115, 218); padding-top: 74.5938px;">

页面本身的链接：http://thenovelcolumn.com/the-10x-rule

目标照片是页面上的第一张照片，中间有三本打开的书。

我希望我的CSS代码将这张照片更改为链接指定的位置，但是照片保持不变。

Answer 1

您的选择器应为.header.custom-mobile-image（即两个类之间没有空格-它们都分配给同一元素，该空格表示父/子关系）

您应该在该规则中添加!important，以覆盖更具体的style属性。

Answer 2

这是因为“样式”属性中的样式具有比您可能在类甚至id上添加的任何样式更大的特异性：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

所以在这种情况下，唯一的方法是使用！important：

.header.custom-mobile-image {
    background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg) !important;
  }

Answer 3

我们要去

.header.custom-mobile-image {

background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X- 
Rule-Image-2-e1555476700855.jpg") !important;


}

Answer 4

编写内联CSS（style =“ some：css;”）并不是最好的主意。它将始终忽略.css文件中的样式。正如有人已经提到的，这与特异性有关。最弱的是类型选择器（html标记和伪元素），然后是类，然后是id's

如果您有内联CSS，它将在.css文件上应用样式。只有比内联CSS更强大的功能才使用！important

通过CSS更改图像

4 个答案: