通过CSS更改图像

Question

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

我尝试使用class选择器针对包含当前照片的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/zh-CN/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

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