如何为href实现内联样式

huangapple
go评论94阅读模式
英文:

How to implement inline styling for href

问题

I am trying to perform inline styling for anchor tags. I know you can do a style in the head but that is not what I am trying to do. I looked online and saw that you can do a simple <a href="#link" style="color: #ff600">Link 1 </a>. However I cannot seem to find an answer to do inline styling for when it is visited.

I am trying to convert these below to inline style.

  1. <style>
  2.     a:link {
  3.         color: red;
  4.     }
  6.     a:visited {
  7.         color: blue;
  8.         text-decoration: purple; 
  9.     }
  10. </style>

I have tried the following, but it does not work.

  1. <a style="a:link color: red; a:visited color: blue text-decoration: purple;" href="https://www.google.com">search here</a>

Here is a sample code if it helps to visualize it.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  7. <h1>Hello World!</h1>
  9. <a style="a:link color: red; a:visited color: blue text-decoration: purple;" href="https://www.google.com">search here</a>
  11. </body>
  12. </html>

How can I do this translation into inline styling?

英文:

I am trying to perform inline styling for anchor tags. I know you can do a style in the head but that is not what I am trying to do. I looked online and saw that you can do a simple &lt;a href=&quot;#link&quot; style=&quot;color: #ff600&quot;&gt;Link 1 &lt;/a&gt;. However I cannot seem to find an answer to do inline styling for when it is visited.

I am trying to convert these below to inline style.

  1. &lt;style&gt;
  2.   	a:link {
  3.      color: red;
  4.     }
  5.     
  6.     a:visited {
  7.       color: blue;
  8.       text-decoration: purple; 
  9.     }
  10. &lt;/style&gt;

I have tried the following, but it does not work.

&lt;a style=&quot;a:link color: red; a:visited color: blue text-decoration: purple;&quot; href=&quot;https://www.google.com&quot;&gt;search here&lt;/a&gt;

Here is a sample code if it helps to visualize it.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;!--  &lt;style&gt;
  5.   	a:link {
  6.      color: red;
  7.     }
  8.     
  9.     a:visited {
  10.       color: blue;
  11.       text-decoration: purple; 
  12.     }
  13.   &lt;/style&gt;   --&gt;
  14. &lt;/head&gt;
  15. &lt;body&gt;
  17. &lt;h1&gt;Hello World!&lt;/h1&gt;
  19. &lt;a style=&quot;a:link color: red; a:visited color: blue text-decoration: purple;&quot; href=&quot;https://www.google.com&quot;&gt;search here&lt;/a&gt;
  21. &lt;/body&gt;
  22. &lt;/html&gt;

How can I do this translation into inline styling?

答案1

得分: 3

很抱歉，:link 和 :visited 伪类不能直接应用于内联样式。类似 :link 和 :visited 的伪类属于CSS选择器的一部分，无法在内联样式中表示。

英文:

Unfortunately, the :link and :visited pseudo-classes cannot be directly applied using inline styles. Pseudo-classes like :link and :visited are part of CSS selectors and cannot be represented in inline styles.

huangapple
  • 本文由 发表于 2023年6月8日 22:53:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76433127.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定