CSS覆盖不起作用

Question

我想将样式覆盖到<div class="profile-activity">

中的所有img标记

以下是我尝试的内容

<style type="text/css">
    .profile-activity img {
        width: 200px !important;
        border: red 2px solid;
    }
</style>



<img class="" id="Company Logo" src="/files/logo_path/{{$user->id}}" alt="User's Photo"  width="200" >

已更新

我想强制internal css覆盖我的external css。 我的!important无效。 宽度不会生效，但边框会生效。

结果

Answer 1

>仅表示css中的孩子。 img不是profile-activity的孩子，因此问题

从

更改CSS

.profile-activity > img {
    width: 200px !important;
    border: red 2px solid;
}

要么：

.profile-activity img {
    width: 200px !important;
    border: red 2px solid;
}

OR

.profile-activity > div > img {
    width: 200px !important;
    border: red 2px solid;
}

以下是relevant documentation

  

＆gt; combinator分隔两个选择器，并仅匹配第二个选择器匹配的元素，这些元素是第一个匹配的元素的直接子元素。

Answer 2

您已将<img>包裹在div中，您需要在嵌套div中添加一个类并在其上调用它或确保调用父div的父级

.profile-activity > div > img {
    width: 200px !important;
   border: red 2px solid;
}