使用 CSS 访问网页背景

Question

我想在 Squarespace 中自定义网页的 css。我只想能够使用线性渐变背景。检查页面时，我可以通过使用以下代码编辑 page-section class 来获得所需的结果：

background: linear-gradient(90deg, black, blue);

但是，当我希望将代码永久注入网站时，我无法复制此更改。我的理解是我会做以下变体：

<style>
#yui_3_17_2_1_1572554735264_404 .page-section {
  background: linear-gradient(90deg, black, blue);
}
</style>

以我极其有限的知识，我希望使用 id 和 class 来限制我正在更改的内容。但是，这似乎无法正确访问我检查时正在更改的同一区域。

以下是我试图更改的从网站复制的元素。再一次，当我检查这个元素然后直接在检查菜单中更改样式时，我可以进行所需的更改。

<section class="page-section

  layout-engine-section

background-width--full-bleed

  section-height--medium


  content-width--wide

horizontal-alignment--center
vertical-alignment--middle

white" data-section-id="5db3673a86bd8571acb9b055" data-controller="SectionWrapperController, MagicPaddingController" data-current-styles="{
&quot;video&quot; : {
&quot;playbackSpeed&quot; : 0.5,
&quot;filter&quot; : 1,
&quot;filterStrength&quot; : 0,
&quot;zoom&quot; : 0
},
&quot;backgroundWidth&quot; : &quot;background-width--full-bleed&quot;,
&quot;sectionHeight&quot; : &quot;section-height--medium&quot;,
&quot;customSectionHeight&quot; : 10,
&quot;horizontalAlignment&quot; : &quot;horizontal-alignment--center&quot;,
&quot;verticalAlignment&quot; : &quot;vertical-alignment--middle&quot;,
&quot;contentWidth&quot; : &quot;content-width--wide&quot;,
&quot;customContentWidth&quot; : 50,
&quot;sectionTheme&quot; : &quot;white&quot;,
&quot;sectionAnimation&quot; : &quot;none&quot;,
&quot;backgroundMode&quot; : &quot;image&quot;
}" data-animation="none" style="padding-top: 98.8125px;" data-controllers- 
bound="SectionWrapperController, MagicPaddingController" data-active="true" 
id="yui_3_17_2_1_1572553417171_403">

Answer 1

你走在正确的轨道上。您只缺少一些东西。他们在这里：

Squarespace中以yui开头的任何id属性都是动态分配的ID，这意味着它会随着页面的每次刷新而改变。如果您看到以 yui 开头的 id 属性，请不要在您的 CSS 中使用它。相反，找到 select/target 元素的不同方式。
在 Squarespace 7 中，您可以在 CSS 中使用部分 ID（它们不是动态生成的）。但是，根据您 copy/pasted 的代码，您使用的是 7.1 版的 Squarespace 模板，这意味着您需要使用 data-section-id 属性来定位特定部分。如果您读到一些内容告诉您使用某个部分的 ID 来定位它，那么该信息可能指的是 Squarespace 7，而不是您正在使用的模板版本，即 7.1。属性选择器使用括号语法，不像 ids 和 classes 那样简单明了。但这并不太难。如果需要，请阅读 more about attribute selectors。
即使您可以使用 id 属性，您的代码也可能无法按预期工作。如果这是真的，那可能是因为在 id 和 .page-section class 之间有一个 space。在 CSS 中，这意味着 "target elements with 'page-section' class that are descendants of the element with the given id"。您可能想要的是定位具有给定 id 本身的部分。为此，删除 id 和 class 之间的 space。

将所有这些放在一起，您最终得到：

[data-section-id="5db3673a86bd8571acb9b055"].page-section {
  background: linear-gradient(90deg, black, blue);
}

请注意，在上面的代码中，您可以在技术上摆脱选择器的 .page-section 部分，它仍然可以正常工作（假设您正在尝试使用该 ID 定位一个部分）。我将其包括在内纯粹是为了演示上面的第 3 点。当然，如果您试图定位后代，请保留 space 并相应地设置 class。

使用 CSS 访问网页背景

Accessing Background of a Webpage with CSS

html

css

squarespace