You are correct that a CSS Selector can crafted that is specific enough to target the contents of @TheGrowingBrain 's original example.
However, generally for one CSS rule to override another it either needs to be defined later in the sequence of definitions than the original rule, or its CSS Selector needs to be more specific than the original’s. But inline based CSS styling generally overrides both of the above methods, which makes it difficult to override using external rules.
So while your color property assignment works, because it is altering a property that isn’t included in the list set by either the (box:) or the (border:) macros, changing the default padding being applied by the (box:)
macro won’t.
eg. If you changed your example CSS to the following…
tw-expression[name="border"] + tw-hook { color:red; padding: 0; }
…you will see that the color change still happens, but the above rule’s padding assignment gets overwritten by the inline CSS.
note: The next CSS example comment will be using the following Passage content as the target of the styling…
(box: "X")+(border: 'solid')[BOX CONTENT]
…as there will not be a need for the (css:)
macro call.
There is one technique that can be used to overwrite inline based styling, but it should only be used when there is no other means to achieve a required outcome, because it stops further assignment being possible to the target property of the target element.
And that technique is the !important flag…
tw-expression[name="box"] + tw-expression[name="border"] + tw-hook {
padding: 0 !important;
}
The above can also be used in the situation what a Named Hook has been used to identify content that contains the bordered box…
|padless>[(box: "X")+(border: 'solid')[BOX CONTENT]]
…and the associated CSS rule…
tw-hook[name="padless"] tw-hook {
padding: 0 !important;
}