what's the shortest way to write this css? [duplicate]

问题

This question already has answers here:

What do commas and spaces in multiple classes mean in CSS? (9 answers)

Using regular expression in css? (8 answers)

Closed 2 months ago.

What's the shortest way to to make this css shorter in some kind of combined way?

[data-pageid="187"] .sidebar-nav-heading {
    display: none;
}
[data-pageid="188"] .sidebar-nav-heading {
    display: none;
}
[data-pageid="189"] .sidebar-nav-heading {
    display: none;
}

回答1:

[data-pageid="187"] .sidebar-nav-heading, [data-pageid="188"] .sidebar-nav-heading, [data-pageid="189"] .sidebar-nav-heading {
    display: none;
}

or if you really want to minify:

[data-pageid="187"] .sidebar-nav-heading,[data-pageid="188"] .sidebar-nav-heading,[data-pageid="189"] .sidebar-nav-heading{display:none}

回答2:

There are ways to handle data attributes in css: https://css-tricks.com/almanac/selectors/a/attribute/

/* staying true to the data-pageid numbers */

[data-pageid="187"] .sidebar-nav-heading,
[data-pageid="188"] .sidebar-nav-heading,
[data-pageid="189"] .sidebar-nav-heading {
    display: none;
}

/* or if you want any with that attribute */

[data-pageid] .sidebar-nav-heading {
    display: none;
}

EDIT: you can then minify it by removing the spaces or running it through a minifier.

Hopefully this can help you, Jason.

来源：https://stackoverflow.com/questions/58270370/whats-the-shortest-way-to-write-this-css