不是针对元素的属性

Question

我在使用 :not() 伪类时遇到了一些问题，我开始考虑我的目标不能仅在 CSS 中实现。

这是我工作的codepen

我想要实现的是使段落中的第一个字母不在更改范围内。

section p:not([span]):first-letter  {
  font-size:50px;
  font-family:'Cinzel Decorative';
}

<p><span>Unchanged text</span> Changed text</p> // Goal <---

我都尝试过并且知道类可以工作，但是这需要我更改很多以前的代码，并且在这种情况下更喜欢 span 元素。而且由于有多个段落部分，因此查找值也不会有效。

Answer 1

如果您愿意对您的标记稍作改动，使其在语义上正确，您可以通过以下方式实现：

section {
  max-width: 80%;
   margin: 10px auto; /* changed for demo */
  background-color: rgba(0, 0, 0, 0.3);
  padding-bottom: 2%;
}
section h1 {
  margin: 0;
  text-align: center;
  font-size: 250%;
  padding: 1%;
  background-color: rgba(0, 0, 0, .5);
  color: #C55757;
  font-family: 'Syncopate';
}
section h2 {
  font-size: 30px;
  display: block;
  padding: 1%;
  font-family: 'Syncopate';
  color: #C55757;
  background-color: rgba(0, 0, 0, .35);
}
section div {
  display: inline-block;
  font-size: 20px;
  color: white;
  padding: 1%;
  width: 47%;
  text-align: center;
  vertical-align: top;
  font-family: 'Open Sans Condensed';
  margin-top: 2%;
}
section div:last-of-type {
  border-left: 2px solid black;
}
section p:first-of-type::first-letter {
  font-size: 50px;
  font-family: Cinzel Decorative;
}

<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Syncopate|Open+Sans+Condensed" rel="stylesheet">

<section>
  <h1>Company Name</h1>
  <div>
    <h2>What we do
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet tincidunt ornare. Quisque rutrum velit mi, eget aliquet turpis consectetur vel. Maecenas convallis nunc pulvinar urna placerat, nec tincidunt massa </p><p>Morbi quis vehicula leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis id felis dapibus lectus auctor faucibus vitae vel urna. Vivamus vel dui elit.
    </p>
  </div>
  <div>
    <h2>Our company
    </h2>
    <p>Nunc eget odio sit amet lorem consequat dictum. In consequat, nunc at feugiat volutpat, lacus sapien mollis lectus, sed facilisis risus massa vel augue. Nam at tellus ac odio consectetur interdum ut et ex. Nullam in tincidunt nunc. Nunc tincidunt est eu neque molestie, vitae suscipit ante egestas. Cras id auctor arcu.</p><p>
Cras eget metus tincidunt, eleifend mi id, congue elit. Aenean faucibus est leo, nec rhoncus justo aliquam nec. Praesent erat erat, pellentesque at varius in, ultrices quis urna.
    </p>
  </div>
</section>

Answer 2

更新 3

我终于有了我的笔记本电脑（当时使用的是 iPhone）并看到了 codepen，所以这是我的看法。

• 我想改变布局，但我没有，因为疯狂必须有一个方法（虽然我确实改变了内容；请参阅此列表的最后 2 项。）
• 一般的布局是display:table-* 组。
• 2 个子标题？ “我们做什么”和“我们的工作”是::before 伪元素。
• <span> 现在充当:first-letter，因为每个浏览器对:first-letter 的解释太古怪了，我们将继续讨论。

CODEPEN

编辑

好的，在 Snippet 2 上开枪，请参阅 Snippet 3，它是 Snippet 2 没有 first-letter。 first-letter 被伪元素 ::before 替换。打败那个火狐！

细节在Snippet中注释

片段 3

/* position: absolute will take span out
|| of the flow. This means whatever affects 
|| the <span> directly will not affect the 
|| <p> and vice versa.
*/

/* ch is a measure unit equalling the width
||   of a zero. It's size is relative to
||   font-size. I find ch indispensible when
||   dealing with text.
*/

span {
  position: absolute;
  left: -12ch;
}
/* Since :first-letter behaves differently than what's
|| desired in Firefox, we'll use a ::before pseudo-
|| and then position it over the 'C'
*/
/* We can adjust the line-height (/40%) to bring both <span> 
|| and <p> in vertical alignment. The left: 1.2ch is the 
|| space between <span> and <p>. The white background is
|| the hacky part which is used to hide the original
|| 'C'. Since the majority of the measurements (i.e. ch)
|| are relative,the setup is responsive as long as you
|| remeber that it's relative to font-size.
*/

p::before {
  content: 'C';
  font: 100 3ch/40% Times;
  color: red;
  background: white;
  position: relative;
  left: 1.2ch;
}
p {
  position: relative;
  left: 12ch;
}

<!--All textNodes residing within <p> includes it's

descendant's textNodes as well. This is evident if we use

.textContent or jQuery .text(). Knowing that, we should

expect that a direct approach using CSS to change the 'C'

with pseudo-selector :first-letter would fail.-->




<p><span>Unchanged text</span> Changed text</p>


<!--Getting the <span> out of the way so that the :first-

letter will be 'C' instead of 'A' is the first step-->

---

---

旧

更新 1

参见片段 2，我使用了 position:relative 和 absolute，因此 <span> 与其他的流程不同。这个想法是从 BoltClock 和 Oriol 的车队中得到的。

---

我在想：最古怪的 CSS 属性是什么？ 我使用 floats 想出了这个

片段 1

span {
  float: left
}
p:first-letter {
  font: 100 3ch/60% Times;
  color: red;
  float: left;
  padding-left: .5ch;
}
p {
  float: left;
}

<p><span>Unchanged text</span> Changed text</p>

片段 2

span {
  position: absolute;
  left: -12.5ch;
}
p:first-letter {
  font: 100 3ch/40% Times;
  color: red;
  position: relative;
  padding-left: .5ch;
}
p {
  position: relative;
  left: 12ch;
}

<p><span>Unchanged text</span> Changed text</p>