如何跳过HTML中前两张图片，为其余图片应用自定义CSS样式

用户提供的HTML结构：

<!-- HTML -->
<div class="entry">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
  <img src="image5.jpg">
</div>

尝试过的CSS代码均未生效：

.entry img:not(:first-of-type):not(:nth-of-type(2)) {
  margin: 0 auto 20px !important;
  display: block;
  width: 350px;
  height: 250px;
}

.entry img:not(:nth-child(-n+2)) {
  margin: 0 auto 20px !important;
  display: block;
  width: 350px;
  height: 250px;
}

.entry img:not(:first-child):not(:nth-child(2)) {
    margin: 0 auto 20px !important;
    display: block;
    width: 350px;
    height: 250px;
}

解决方法 #

1. 优先级排查 #

打开浏览器开发者工具（F12），选中第三张及以后的img元素查看样式面板：

• 若自定义样式被划掉，说明存在优先级更高的规则（比如.entry .special-img、内联样式），可以提升选择器优先级：

  .entry > img:not(:nth-child(-n+2)) {
    margin: 0 auto 20px;
    display: block;
    width: 350px;
    height: 250px;
  }
  

• 若样式未出现在面板中，检查CSS文件是否正确加载，或有无语法错误（比如括号未闭合）。

2. 反向覆盖法（更稳妥） #

先给所有.entry img应用自定义样式，再重置前两张的样式，这种写法兼容性更好、逻辑更直观：

/* 给所有.entry内的img应用自定义样式 */
.entry img {
  margin: 0 auto 20px;
  display: block;
  width: 350px;
  height: 250px;
}

/* 重置前两张img为默认样式（可根据需求修改） */
.entry img:nth-child(-n+2) {
  margin: initial;
  display: inline;
  width: auto;
  height: auto;
}

3. 修正选择器适配DOM结构 #

如果.entry容器内存在隐藏文本节点（比如换行、空格被解析为节点），:nth-child会把这些节点计入排序，此时改用:nth-of-type更可靠：

.entry img:not(:nth-of-type(-n+2)) {
  margin: 0 auto 20px;
  display: block;
  width: 350px;
  height: 250px;
}

内容的提问来源于stack exchange，提问作者obeid arash