我想做的就是使我的大胆而倾斜的文本实例更容易看到，就像我在别人的网站上所做的那样。但是，伙计，这最终涉及一些令人费解的样式。您可能需要做类似的事情，以下是细节。
注意：在我继续之前，我必须承认Stefan Judis的文章，How to select elements that are not children of other elements in CSS，否则，我已经迷失了我m即将描述。
使用sans-serif字体，例如my site在此帖子的首次出版物中所做的，可以使某些样式组合在某些观看条件下很难看到。虽然这对于倾斜的文本是正确的，但出乎意料的是，它也可能会使用粗体的文本进行，尤其是如果一个人在黑暗模式下观看。
（显然，在倾斜文本有关的情况下，我们与许多sans-serif web字体所说的是倾斜，而不是更常见的 italicization 。但是，由于我怀疑读者会更熟悉调用倾斜的文字“比倾斜，所以我将使用以前的术语。 >真正斜体文本，就像斜体字体一样，是一个完全独立的考虑因素。）
我注意到某些网站，例如Chris Coyier’s，使用一些微妙的样式使大胆和斜体在周围的纯文本中略有脱颖而出，因此我决定在此网站上尝试一下。起初我以为这很简单：将每个变体设置为在光模式下有点暗，在黑暗模式下稍微亮一点。
。但是，不是。
首先，我必须考虑到可能的配对 。 。
然后，我记得我还需要提供所有这些变体以在块中工作，这开始与周围的纯文本有点不同：
这是一个带有粗体，斜体和 <> BOLD ITALIC
text。的块
，最后，有一个问题要确保指定的颜色差异没有用我不想更改的颜色，例如within links like this one to my home page和red i类偶尔用于重要之类的事物（尽管在my original post的此dev.to版本上都不会红色）：
重要：这是一件很大的事情
但是，如果您怀疑这需要一大堆CSS或Sass/SCSS山，那么您只是一半的校正。粗俗？哦耶。但是一座山？不。
在我们进入所涉及的实际SCSS之前，请注意，它所指的颜色变量来自于此（是的，我无耻地从Tailwind CSS Abiaoqian中cribbib crib crib crib trib crib there coll>）：
// These are relevant excerpts from
// a partial called `_variables.scss`.
$twcss: {
gray-50: #f9fafb,
gray-100: #f3f4f6,
gray-200: #e5e7eb,
gray-300: #d1d5db,
gray-400: #9ca3af,
gray-500: #6b7280,
gray-600: #4b5563,
gray-700: #374151,
gray-800: #1f2937,
gray-900: #111827
};
// Now we assign our default colors for,
// respectively, light and dark modes.
$default-light: map-get($twcss, gray-700);
$default-dark: map-get($twcss, gray-300);
设置了这些变量，我们就可以了。 （您可能需要将代码复制到文本编辑器中，以进行更舒适，免费的观看。）
// These are relevant excerpts from
// my `articles.scss` file, which
// comes into play only when a
// page has the `article` element.
@charset 'utf-8';
@use 'partials/variables' as var;
article {
// First, we assign colors to
// boldfaced and italicized text
// that is **not** in the class
// `red`, **not** inside a link,
// and **not** within a blockquote
// (we'll get to blockquotes below).
//
// Note that we cover not only
// <strong> but also <b>, and
// not only <em> but also <i>;
// in addition, we take care of
// groupings --- <strong><em>,
// <em><strong>, <b><i>,
// and <i><b>.
strong:not(.red *):not(a *):not(blockquote *),
b:not(.red *):not(a *):not(blockquote *),
em:not(.red *):not(a *):not(blockquote *),
i:not(.red *):not(a *):not(blockquote *),
em strong:not(.red *):not(a *):not(blockquote *),
strong em:not(.red *):not(a *):not(blockquote *),
i b:not(.red *):not(a *):not(blockquote *),
b i:not(.red *):not(a *):not(blockquote *) {
color: map-get(var.$twcss, gray-800); // (vs. gray-700)
@media (prefers-color-scheme: dark) {
color: map-get(var.$twcss, gray-200); // (vs. gray-300)
}
}
// Now we deal with the blockquotes,
// including links within them. Here,
// we assign colors to boldfaced and
// italicized text that **is** within
// a blockquote but is **not** inside
// a link. (We cover the same tags
// and groupings as before.)
//
// In essence, we're giving this
// normally grayed-out text the
// same color treatments as for
// regular text, thus contrasting
// with the blockquote styling.
strong:is(blockquote *):not(a *),
b:is(blockquote *):not(a *),
em:is(blockquote *):not(a *),
i:is(blockquote *):not(a *),
em strong:is(blockquote *):not(a *),
strong em:is(blockquote *):not(a *),
i b:is(blockquote *):not(a *),
b i:is(blockquote *):not(a *) {
color: var.$default-light; // gray-700 (vs. gray-600)
@media (prefers-color-scheme: dark) {
color: var.$default-dark; // gray-300 (vs. gray-400)
}
}
}
我想定期用这样的意大利面条愚弄吗？哦，我，不。但是，当您需要时，您需要它，幸运的是：（a。）any valid CSS works in Sass; （b。）现代浏览器CSS支持has advanced sufficiently多年来处理这样的情况。