Question

我有这个html：

<div class="entry-content">
<p>
<img src="foto.jpg">
</p>
<p>lorem</p>
<p>foo</p>
</div>

和此CSS：

.entry-content{
border: none !important;
padding: 0;
}
p{
margin: 16px 16px 0 16px;
}
.entry-content img{
margin: 0 0 0 0;

}

我试图选择img以仅将页边距保持为0，而让其他p标签具有16px，但它不起作用。

我的目标是使所有p标签保持第一个像素以外的16px的空白，因为其中有一个图像，我想保持容器100％的宽度。

实际上，如果有帮助，我可以将一个类添加到img标签中

非常感谢您的帮助

Answer 1

我不确定您要在第一个p标签之后还是在第一个p标签内，但是根据您的代码，它应该像

void Game::passiveMouseMotion(int x, int y)
{

    //of my code for doing the cam, yours is may be different, this is based on the example from https://learnopengl.com/Getting-started/Camera
    if (firstMouse) {
    lastX = x;
    lastY = y;
    firstMouse = false;
    }

    float xoffset = x - lastX;
    float yoffset = lastY - y; // reversed since y-coordinates go from bottom to top

    lastX = x;
    lastY = y;

    camera->ProcessMouseMovement(xoffset, yoffset);

    glutPostRedisplay();

  //this is the main thing that keeps it from leaving the screen
    if ( x < 100 || x > win_w - 100 ) {  //you can use values other than 100 for the screen edges if you like, kind of seems to depend on your mouse sensitivity for what ends up working best
        lastX = win_w/2;   //centers the last known position, this way there isn't an odd jump with your cam as it resets
        lastY = win_h/2;   
        glutWarpPointer(win_w/2, win_h/2);  //centers the cursor
    } else if (y < 100 || y > win_h - 100) {
        lastX = win_w/2;
        lastY = win_h/2;
        glutWarpPointer(win_w/2, win_h/2);
    } 
}

如果在p标签之前还有其他标签，则需要使用

.entry-content p:first-child img{
//your css
}

Answer 2

.entry-content p>img {
 // your css
}

Answer 3

您尝试内联定义样式，仅用于第一个img吗？

Answer 4

尝试p img { //your css } ..如果不起作用，请创建小提琴或Codepen，以便我们为您提供更好的帮助。

Answer 5

我的目标是使所有p标签保持第一个像素以外的16px的空白，因为其中有一个图像，我想保持容器100％的宽度。

CSS当前无法查看元素的子元素，然后修改其周围的父元素或其他元素。一切都以嵌套的方式向下层叠。

换句话说，它不能说“此段内有一个图像。我现在需要更改保存此图像的段的样式，并给它较小的边距。”

只有两种方法可以做到这一点。

一个：您可以创建一个手动分配给包含图像的所有段落的类。所以你会有这样的东西：

.entry-content img, .margin-override{
   margin: 0 0 0 0;
}

然后在您的段落中，您会这样...

<div class="entry-content">
   <p class="margin-override">
      <img src="foto.jpg">
   </p>
   <p>lorem</p>
   <p>foo</p>
</div>

这将设置在图像或包含图像的段落上没有空白。

两个：另一个选项是使用javascript / jQuery搜索段落是否包含图像，然后在找到图像时执行操作以修改该段落的边距。

您说您是在为wordpress主题这样做的。 Wordpress comes packaged with jQuery by default这些天，因此除非您已覆盖它，否则它已经为您准备就绪。下一步将是为自己编写脚本，以针对这些段落以及script enqueue（如果有主题）。

这是有关how to add your own scripts to a wordpress theme.的不错的教程

Answer 6

.entry-content{
border: none !important;
padding: 0;
}
p{
margin: 16px 16px 0 16px;
}
.lafoto {
width: 200px;
height: auto;
margin: 0 0 0 0;
}

<div class="entry-content">
<p>
<img class="lafoto" src="https://i.imgur.com/bfMLLDz.jpg">
</p>
<p>lorem</p>
<p>foo</p>
</div>
and this css:

只需向图像添加一个类或一个id，就这么简单。

Answer 7

有很多可能的方法。首先，我想知道为什么您要显示嵌套在

中的图像

尝试以下方法：-不用给P标签留白，而是给img标签留白，这将解决您的问题。

如何使用CSS在第一个p标签之后选择img？

7 个答案: