Why Are My :visited CSS Styles Not Working on Font-Weight and Other Properties?

Why Doesn't This a:visited CSS Style Work?

When applying the :visited pseudoclass to style elements that users have previously accessed, developers may encounter issues where certain properties, such as font-weight, do not function as expected in browsers like Internet Explorer or Chrome.

Problem Explanation

This behavior is not a result of case sensitivity but rather a security concern. Modern browsers (Firefox 4, Internet Explorer 9, Chrome) have restricted the functionality of the :visited pseudoclass to prevent CSS exploits. Essentially, these browsers will return CSS values for visited links as if they had never been visited.

Specifically, browsers implement certain protective measures to mitigate potential security vulnerabilities:

• The window.getComputedStyle method and similar functions report visited links as unvisited.
• If a sibling selector is used (e.g., :visited span), the adjacent element will be styled as if the link were unvisited.
• In nested link scenarios, if the element being styled is different from the link with visited status, it will also be rendered as unvisited.

Workaround

Unfortunately, there are no reliable workarounds for this issue. Changing accessibility or modifying accessibility settings may not provide a permanent solution. Therefore, it's recommended to avoid using the :visited pseudoclass to style sensitive elements such as font-weight in web applications.

The above is the detailed content of Why Are My :visited CSS Styles Not Working on Font-Weight and Other Properties?. For more information, please follow other related articles on the PHP Chinese website!