ลบสไตล์ / การจัดรูปแบบทั้งหมดออกจากไฮเปอร์ลิงก์

157

ฉันกำลังสร้างเมนูการนำทางด้วยคำที่มีสีต่างกัน ( hrefลิงค์) ฉันต้องการสีที่จะไม่เปลี่ยนแปลงในสถานะใด ๆ (โฮเวอร์เยี่ยมชม ฯลฯ )

ฉันรู้วิธีตั้งค่าสีสำหรับสถานะต่าง ๆ แต่ฉันต้องการทราบรหัสเพื่อปล่อยสีข้อความ (และการจัดรูปแบบ / การจัดรูปแบบอื่น ๆ ) ตามที่เป็นอยู่

ข้อเสนอแนะใด ๆ

html css href

— SiteHopper
แหล่งที่มา

248

คุณก็สามารถกำหนดรูปแบบการเชื่อมโยงซึ่งจะแทนที่a:hover, a:visitedฯลฯ .:

a {
  color: blue;
  text-decoration: none; /* no underline */
}

คุณยังสามารถใช้inheritค่าได้หากคุณต้องการใช้คุณสมบัติจากสไตล์ผู้ปกครองแทน:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

— Frxstrem
แหล่งที่มา

4

ส่วนที่สำคัญคือinheritคำหลัก มันไม่ได้รับการสนับสนุน 100% อย่างน่าเสียดาย

— David

2

initialยังมีประโยชน์เมื่อคุณต้องการรีเซ็ต css เป็นสไตล์เริ่มต้น ลิงก์

— SiteHopper

ขอบคุณมากสำหรับinherit!

— parsecer

@ David มันยังคงยืนอยู่หรือไม่ ไม่inheritทำงานเฉพาะเบราว์เซอร์รุ่นเก่าและ Internet Explorer หรือมีปัญหาในเบราว์เซอร์ยอดนิยม (Chrome, Firefox) ด้วยหรือไม่

— parsecer

1

ตรวจสอบการตั้งค่า เช่นกัน >> คำหลัก unset CSS จะรีเซ็ตคุณสมบัติเป็นค่าที่สืบทอดถ้ามันสืบทอดมาจาก parent และไปเป็นค่าเริ่มต้นถ้าไม่ใช่ กล่าวอีกนัยหนึ่งมันจะทำงานเหมือนกับคำหลักที่สืบทอดในกรณีแรกและเช่นเดียวกับคำหลักเริ่มต้นในกรณีที่สอง

— JackMorrissey

4

อย่างที่ Chris พูดต่อหน้าฉันaควรจะลบล้าง ตัวอย่างเช่น:

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

ในกรณีนี้ความ.nav aต้องการจะเป็นสีเขียวเสมอ: การโฮเวอร์จะไม่นำไปใช้กับมัน

หากมีกฎอื่นที่มีผลกระทบคุณสามารถใช้งาน!importantได้ แต่คุณไม่ควรทำ มันเป็นนิสัยที่ไม่ดีที่จะตกลงไป

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

จากนั้นจะเป็นสีเขียวเสมอโดยไม่เกี่ยวข้องกับกฎอื่นใด

— SpoonNZ
แหล่งที่มา

นี่ไม่ใช่สิ่งที่เขาถาม อ่านคำถามอีกครั้ง เขารู้เรื่องนี้แล้ว

— David

@ David ฉันได้อ่านอีกครั้งค่อนข้างแน่ใจว่านั่นคือสิ่งที่เขาถาม รหัสนี้จะช่วยให้เขาสามารถกำหนดรูปแบบaที่จะป้องกันการเปลี่ยนแปลงใด ๆ:hover(หรือ:visitedอื่น ๆ ) แทนที่จะเป็นคนโง่และขยี้ทั้งสามคำตอบที่คุณแนะนำคือทางออกที่แท้จริง?

— SpoonNZ

ขอบคุณสำหรับความช่วยเหลือ แต่ถ้าลิงค์เป็นเช่นนี้ 2 คำใน 2 สี แต่เป็นเพียง 1 ลิงค์: ยอดขายที่ไม่ซ้ำกัน (สีชมพู) (สีดำ) และพวกเขาควรจะอยู่ในสถานะนั้นในทุกสถานะ ฉันเขียนโค้ดแบบอินไลน์ด้วยวิธีนี้ ... <a href="#" style="text-decoration: none" target="_blank"> <span style = "font-family: Arial; font-size: 13px; color: # e91974; font-weight: lighter; "> unique </span> <span style =" font-family: Arial; font-size: 13px; color: # 020202; font-weight: lighter; "> sales </ span > </a> แต่ต้องมีความสะอาดกว่า (มีลิงค์ไหนบ้างในรหัส) มีคำแนะนำอะไรบ้าง?

— SiteHopper

1

คุณสามารถใช้aตัวเลือกในสไตล์ชีทของคุณเพื่อกำหนดสถานะทั้งหมดของตัวยึด / ไฮเปอร์ลิงก์ ตัวอย่างเช่น:

a {
    color: blue;
}

จะแทนที่สไตล์การเชื่อมโยงทั้งหมดและทำให้สีฟ้าเป็นรัฐทั้งหมด

— คริส
แหล่งที่มา

นี่ไม่ใช่สิ่งที่เขาถาม อ่านคำถามอีกครั้ง เขารู้เรื่องนี้แล้ว

— David

-1

หากคุณระบุว่าa.redLink{color:red;}ต้องการให้สถานะนี้อยู่ในสถานะโฮเวอร์และเพิ่มa.redLink:hover{color:red;} สิ่งนี้จะทำให้แน่ใจว่าไม่มีรัฐโฮเวอร์อื่น ๆ ที่จะเปลี่ยนสีของลิงก์ของคุณ

— Danferth
แหล่งที่มา