wordpress 如何跳过HTML上的一些元素以获得自定义CSS样式

t1qtbnec  于 2023-08-03  发布在  WordPress
关注(0)|答案(4)|浏览(131)

我不想让前两张图片得到我写的custome风格。

  1. <!-- HTML -->
  2. <div class="entry">
  3. <img src="image1.jpg">
  4. <img src="image2.jpg">
  5. <img src="image3.jpg">
  6. <img src="image4.jpg">
  7. <img src="image5.jpg">
  8. </div>

字符串
我试着这样做:

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


但是不管用还有这些

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

的字符串

eiee3dmh

eiee3dmh1#

以下是您的操作方法:

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

个字符

crcmnpdw

crcmnpdw2#

试试这个css选择器,选择除了前两个以外的所有图像:

  1. .entry > img:not(img:nth-child(1),img:nth-child(2))
  2. {
  3. /* whatever styles you want for all img exept 1 and 2 */
  4. }

字符串

i2loujxw

i2loujxw3#

调用第一个image和其他img
img{}和image{}应不同。

ahy6op9u

ahy6op9u4#

可以用途:nth-child(n + x)

  1. <div class="entry">
  2. <p>Text</p>
  3. <p>Text</p>
  4. <p>Text</p>
  5. <p>Text</p>
  6. <p>Text</p>
  7. </div>

个字符

相关问题