When two CSS rules conflict and apply to the same element, the last rule encountered in the stylesheet takes precedence. This is known as the "cascading" nature of CSS.

In SASS or SCSS, the ampersand (&) symbol is used to reference the parent selector within a nested rule. This is useful for creating more specific or complex selectors based on the parent selector's context. For example, you can use &:hover to apply styles when the parent element is hovered.

The :hover pseudo-class is used to target an element when it's being hovered over by a mouse pointer. This is commonly used to apply styles or behaviors to elements when a user hovers their cursor over them. For example, you can change the background color of a button when it's hovered over to provide feedback to the user.

The primary difference between a mixin and a function in SASS/SCSS is that functions are used for reusable styles and can return values, while mixins are used for reusable logic and can generate CSS rules. Mixins can accept arguments, which allows for more dynamic behavior, whereas functions are typically used for calculations and value generation.

The primary goal of the OOCSS (Object-Oriented CSS) methodology is to separate content and layout. OOCSS promotes creating reusable and modular CSS classes that can be applied to various elements in a layout, separating the styling from the content. This improves maintainability and promotes a more organized CSS structure.

The ">" combinator is used to target a direct child element, ensuring that styles are applied only to the immediate child and not to nested descendants.

The property in CSS that allows you to apply a delay before an animation starts is the animation-delay. This property is used to create a pause before the animation begins, which is especially useful for sequencing animations.

To ensure that hyperlinks have no underlines by default but are underlined when hovered over, you should use the CSS rule a { text-decoration: none; } to remove the underlines from all anchor elements and then use a:hover { text-decoration: underline; } to specify that underlines should appear when the link is hovered.

Object-Oriented CSS (OOCSS) emphasizes separating the container and content in your styles and promoting the reuse of styles (i.e., CSS rules). This approach helps keep your CSS modular, making it easier to maintain and reducing redundancy in your code.

In Styled Components, you can dynamically change the style of a component based on its props by using the style prop. You can pass in an inline CSS object and conditionally apply styles based on the values of the props. This allows for the creation of versatile and reusable components.