Does Squarespace not allow for class and id selectors to be used in custom HTML and then targeted in the CSS editor?

问题

Hello StackOverflow Community,

I just started using Squarespace to create a site for a client & friend offering some safety and equipment training courses, I love the templates, it's quite easy to use with the drag and drop of it all. However, I'm running into a problem with the course catalog page. I'm adding custom HTML to allow for a nicely laid out list with descriptions but the class and id selectors just don't target the elements. Targeting the <li> and <ul> elements targets them all, site wide. Anyone with any experience using Squarespace, could you possibly share your knowledge on how I might target specific elements? Thanks so much in advance.

I did post in the Squarespace forum but haven't gotten any replies, so here I am.

回答1:

For Squarespace-related questions (both on the Answers forum and here on SO), it's usually easiest to provide a solution if you provide the URL of the page in question and the view-only password if applicable (necessary for sites that are in trial mode and not yet paid for).

In any case, assuming that you are using a code block in order to insert your HTML, you can add a classes to your elements in your HTML and then target them by adding CSS via the CSS Editor, or within a style tag with the code block itself.

For example, if putting it all inside the code block itself, something like:

<ul class="myclass1 myclass2">
  <li>List item one.</li>
  <li>List item two.</li>
</ul>

<style>
  .myclass1 li {
    color: red;
  }
</style>

Now, if you were to add the CSS via the CSS Editor, you would exclude the <style>...</style> bit from the code block above, and instead insert the following via the CSS Editor.

.myclass1 {
  color: red;
}

Note that, when using the CSS Editor, the <style> tag is excluded.

If neither of the above work, it is likely because you are dealing with Squarespace's own rules having a greater level of specificity. That simply means that Squarespace's default CSS rules are overriding your own. To compensate for this, you can either rewrite the rule above as color: red !important; or use your browser's developer tools web inspector to select the element in question, inspect the CSS rules that are applying to it (which will reveal Squarespace's default rules), then rewrite your rules with the same or greater specificity.

Finally, if my original assumption that you are using a code block is incorrect, then you are in fact using a text block. It is still possible to target specific elements within specific blocks in Squarespace. To do so, you must use the block ID.

To obtain the block ID, you must be comfortable using your browser's web inspector (mentioned earlier). Using it, locate the block in question.

Note that you do not want to use block IDs starting with yui.... Those IDs are dynamically generated and change with each page load. IDs starting with anything else are fine to use, such as block-yui....

Once you have the block ID, you can use it as part of your CSS, like so:

#block-yui_3_17_2_3_1425032049582_4670 ul li {
  color: red;
}

Here again, specificity may be an issue and you may therefore have to add !important or write the rule with greater specificity as mentioned above.

Generally, it's difficult to actually get answers on Answers; StackOverflow is probably more effective.

来源：https://stackoverflow.com/questions/57947369/does-squarespace-not-allow-for-class-and-id-selectors-to-be-used-in-custom-html

标签

html

css

css-selectors

squarespace