CSS Pseudo-class ที่มีสไตล์อินไลน์

เป็นไปได้ไหมที่จะมีคลาสหลอกโดยใช้สไตล์อินไลน์

ตัวอย่าง:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

ฉันรู้ว่า HTML ข้างต้นใช้ไม่ได้ แต่มีบางอย่างที่คล้ายกันหรือไม่

ปล. ฉันรู้ว่าฉันควรใช้สไตล์ชีตภายนอกและฉันก็ทำ ฉันแค่อยากรู้ว่าสามารถทำได้โดยใช้สไตล์อินไลน์

ไม่นี่เป็นไปไม่ได้ ในเอกสารที่ใช้ CSS styleแอตทริบิวต์แบบอินไลน์สามารถมีได้เฉพาะการประกาศคุณสมบัติเท่านั้น ชุดคำสั่งเดียวกันที่ปรากฏในชุดกฎแต่ละชุดในสไตล์ชีต จากข้อมูลจำเพาะคุณสมบัติลักษณะ :

ค่าของแอตทริบิวต์ style ต้องตรงกับไวยากรณ์ของเนื้อหาของบล็อกการประกาศ CSS (ไม่รวมวงเล็บปีกกา) ซึ่งมีการระบุไวยากรณ์อย่างเป็นทางการไว้ด้านล่างในข้อกำหนดและรูปแบบของไวยากรณ์หลักของCSS :

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

ไม่อนุญาตให้ใช้ตัวเลือก (รวมถึงองค์ประกอบหลอก) หรือกฎระเบียบหรือโครงสร้าง CSS อื่น ๆ

ลองนึกถึงสไตล์อินไลน์เป็นสไตล์ที่ใช้กับตัวเลือก ID เฉพาะเจาะจงสุดที่ไม่ระบุชื่อ: สไตล์เหล่านั้นใช้กับองค์ประกอบที่มีstyleแอตทริบิวต์เท่านั้น (มีความสำคัญเหนือกว่าตัวเลือก ID ในสไตล์ชีตด้วยเช่นกันหากองค์ประกอบนั้นมี ID นั้น) ในทางเทคนิคแล้วมันไม่ได้ผลเช่นนั้น นี่เป็นเพียงเพื่อช่วยให้คุณเข้าใจว่าเหตุใดแอตทริบิวต์จึงไม่รองรับรูปแบบ pseudo-class หรือ pseudo-element (มีส่วนเกี่ยวข้องกับการที่คลาสหลอกและองค์ประกอบหลอกให้ความเป็นนามธรรมของโครงสร้างเอกสารที่ไม่สามารถแสดงได้ ภาษาของเอกสาร)

โปรดทราบว่ารูปแบบอินไลน์จะมีส่วนร่วมในการเรียงซ้อนเช่นเดียวกับตัวเลือกในชุดกฎและมีความสำคัญสูงสุดในการเรียงซ้อน ( !importantแม้ว่าจะมี) ดังนั้นพวกเขาจึงมีความสำคัญเหนือกว่าสถานะระดับหลอก การอนุญาตคลาสหลอกหรือตัวเลือกอื่น ๆ ในรูปแบบอินไลน์อาจทำให้เกิดระดับน้ำตกใหม่และด้วยความซับซ้อนชุดใหม่

โปรดทราบว่าการแก้ไขข้อกำหนดคุณลักษณะสไตล์ที่เก่ามากเดิมเสนอให้อนุญาตสิ่งนี้อย่างไรก็ตามถูกยกเลิกโดยสันนิษฐานว่าน่าจะเป็นด้วยเหตุผลที่ระบุไว้ข้างต้นหรือเนื่องจากการนำไปใช้งานนั้นไม่ใช่ตัวเลือกที่ทำได้

ไม่ใช่ CSS แต่เป็นแบบอินไลน์:

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

ดูตัวอย่าง→

แทนที่จะต้องใช้แบบอินไลน์คุณสามารถใช้ Internal CSS ได้

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

คุณสามารถมี:

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>

คุณสามารถลองhttps://hacss.io :

<a href="http://www.google.com" class=":hover{text-decoration:none;}">Google</a>

การสาธิต