How to select an element based on its data attribute in CSS?

Will-change should only be declared for transform and opacity attributes that will change frequently and can trigger synthesis; avoid abusing invalid attributes such as all, left, top, etc., which must be added/removed dynamically, and be used with caution in scrolling containers. Mobile terminals need to take into account compatibility and memory limitations.

The main reason why bottom:0 does not take effect is that the ancestor element triggers transform/will-change/filter to create a new containing block, so that the fixed element is positioned relative to it rather than the viewport; dynamic changes in the iOS Safari address bar cause occlusion; fixed elements need to be given way with padding-bottom; z-index failure is often caused by the parent creating a cascading context.

If the floating element cannot open the parent container, BFC needs to be triggered. Overflow:hidden is commonly used; box-sizing:border-box must be set on the floating element itself; the percentage exceeds 100% due to whitespace characters, border/padding and pixel rounding; in IE, pay attention to the box-sizing prefix and margin parsing bugs.

In Safari, the background-filter needs to be prefixed with -webkit- and the background is opaque to take effect; the blur value cannot be 0; the size of the blurred area affects performance more than the numerical value; text needs to be enhanced with contrast and strokes to ensure readability.

object-fit:cover is the most common choice - it maintains the aspect ratio, crops excess parts, and ensures the container is completely filled.

Shake animation should use translateX() to achieve left and right displacement instead of rotate(); it needs to be combined with @keyframes to define a 0%/25%/50%/75%/100% offset sequence, and the offset is controlled within ±2px~±6px; animation-fill-m must be added ode:forwards (or use both), select cubic-bezier(.36,.07,.19,.97) for easing; the old animation must be cleared and forced to rearrange before JS is triggered; use will-change with caution on the mobile terminal, and only add translateZ(0) to ensure hardware acceleration.

The main reason why CSShover animation is not smooth is that the transition is not written in the default state or acts on non-animable properties; the transition should be placed in a non-hover style, and transform should be used instead of left/relative. Pay attention to mobile hover invalidation and browser compatibility issues.

:not() only supports a single simple selector, disabling composite writing methods such as descendants/descendants; to exclude multiple conditions, you need to write repeatedly, such as: not(.a):not([b]); when mixed with :nth-child, it will still match the original sequence number, and will be rearranged after non-filtering.