不是针对元素的属性

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）并且看到了编码器，所以这是我对它的看法。

• 我想改变布局，但我没有，因为必须有一种疯狂的方法（尽管我确实改变了内容;请参阅此列表的最后2项。）
• 一般来说，布局是NewFile = open('pactice1.txt','w') 组。
• 2个子标题？ “我们做什么”和“我们的工作”是display:table-*伪元素。
• ::before现在用作<span>，因为每个浏览器对:first-letter的解释太过古怪，我们只会传递给它。

CODEPEN

修改

好的，把枪放在Snippet 2上，看看Snippet 3是Snippet 2 没有 :first-letter。 first-letter被伪元素first-letter取代。打败Firefox！

详细信息在Snippet中进行了评论

SNIPPET 3

::before

/* 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;
}

<小时/> <小时/> 的 OLD

更新1

请参阅我使用<!--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-->和position:relative的代码段2，以便absolute与其他代码流不同。从BoltClock和Oriol的convo中得到了这个想法。

我在想：什么是最古怪的CSS属性？我用<span>

提出了这个问题

SNIPPET 1

floats

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

SNIPPET 2

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

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;
}