有没有办法 :first-of-type::first-letter 除非元素具有给定类型的父级？

Posted 2023-03-06

技术标签:

【中文标题】有没有办法 :first-of-type::first-letter 除非元素具有给定类型的父级？【英文标题】：Is there a way to :first-of-type::first-letter except if element has parent of a given type? 【发布时间】：2020-06-17 11:21:17 【问题描述】：

我有以下 TypeScript React 代码。

const Container = styled.div`
  p:first-of-type::first-letter 
    font-size: 4rem;
    line-height: 2rem;
    margin-top: 1rem;
    margin-right: 1rem;
    text-transform: uppercase;
    display: block;
    float: left;
    @media only screen and (max-width: $breakpoints.spx) 
      font-size: 3.2rem;
      line-height: 1.6rem;
      margin-right: 0.8rem;

如果p 不是blockquote 的孩子，我希望p:first-of-type::first-letter 申请。

【问题讨论】：

【参考方案1】：

如果您的意思是如果p 是blockquote 的直接子级，则它不适用，您可以使用以下选择器组合：

*:not(blockquote) > p:first-of-type::first-letter

或者，对于纯 CSS 也是（但显然不在 styled-components 中工作 - 请参阅 cmets）：

:not(blockquote) > p:first-of-type::first-letter

（没有通用选择器，不一定需要，但更容易理解）

以这种方式，直接父级可以是除块引用之外的任何内容。这是一个sn-p：

*:not(blockquote)>p:first-of-type::first-letter 
  font-size: 4rem;
  line-height: 2rem;
  margin-top: 1rem;
  margin-right: 1rem;
  text-transform: uppercase;
  display: block;
  float: left;
  @media only screen and (max-width: $ 
    breakpoints.s
  
  px) 
    font-size: 3.2rem;
    line-height: 1.6rem;
    margin-right: 0.8rem;

<body>
  <p>Test regular paragraph tag</p>
  <blockquote>
    <p>Test paragraph tag as child of blockquote</p>
  </blockquote>
</body>

【讨论】：

不要认为需要通配符 @Johannes * @Johannes 星号 * 啊，通用选择器。不，不是，但这样更容易理解。 @Johannes 在const Container = styled.div 的上下文中，它实际上是必需的。没有它，p:first-of-type::first-letter 属性将不会应用。很有趣。【参考方案2】：

更新答案

为避免将其应用于您可以使用的 blockquote 的直接子代

*:not(blockquote) > p:first-of-type::first-letter 
  font-size: inherit;

原始答案

当它确实是 blockquote 的孩子时，您可以创建一个附加规则来定位并覆盖这个。

blockquote p:first-of-type::first-letter 
  font-size: inherit;

演示

blockquote p:first-of-type::first-letter 
  font-size: inherit;


p:first-of-type::first-letter 
  font-size: 4rem;

<p>this is some affected &lt;p&gt; element</p>
<hr/>
<blockquote>
<p>this is not affected</p>
</blockquote>

【讨论】：

谢谢！更新了问题。希望我不必覆盖所有属性。 @sunknudsen 是否仅适用于blockquote 的直接子级或其中的任何级别？ @sunknudsen 更新了忽略作为blockquote 直接子级的p 的答案。

以上是关于有没有办法 :first-of-type::first-letter 除非元素具有给定类型的父级？的主要内容，如果未能解决你的问题，请参考以下文章

Java中有没有啥办法可以将两个类的属性值映射？

有没有办法确定 OpenGL 纹理或 QOpenGLTexture 的图形内存占用？