我想做的是在每个p的"块"的最后一个p上添加一个边界半径,所以在下一个h1之前,我可以使用+ Select 器添加顶部半径,但不知道如何 Select 每个中的最后一块.

<main>
    <h1>test</h1>
  <p>hello</p>
    <h1>test</h1>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
    <h1>test</h1>
  <p>hello</p>
  <p>hello</p>
    <h1>test</h1>
  <p>hello</p>
  <p>hello</p>
    <h1>test</h1>
  <p>hello</p>
</main>

css

<style>
  p {
    background: black
  }
  h1 + p {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
</style>

推荐答案

将每个块包装成<p>,然后使用:last-child.如果你要做<p>多个,最好只 for each 具有所需样式的元素添加一个类.

<div>

  <p>Hello</p>
  <p>Hey</p>

</div>
p:last-child{
  font-size: 30px; // only last element has a font size of 30 px
}

你也没有关闭<p>个标签中的任何一个.在发布之前,确保您的代码已格式化.

Css相关问答推荐

当鼠标悬停在元素的::第一行时,如何应用样式?

如何使用在另一个层定义块中定义的sass层作用域变量

material 设计--Bootstrap输入域问题

媒体查询在生产中没有响应:React 18 应用程序

如何阻止 Mud Blazor MudTable 列扩展以适合文本

更改 20 个实例中的一个组件的样式

Vue.js 变量中的动态类变量

如何在相对位置和绝对位置之间转换元素?

CSS Slanding Div 边缘在图像上

我应该避免使用text-align: justify;吗?

在 CSS 中相对于另一个元素定位一个元素

选中时从 HTML 文本输入中移除蓝色光晕

禁用输入的 CSS Select 器 type="submit"

将一行文本保留为单行 - 换行或不换行

字体上的 Font-Awesome 错误 404

Flexbox 代码适用于除 Safari 之外的所有浏览器.为什么?

如何在 CSS 中延迟 :hover 效果?

在渲染网页之前等待字体加载

在 CSS 中使用多个 @font-face 规则

flexbox容器中的省略号