ホームページ > 記事 > ウェブフロントエンド > 擬似クラスのホバーが無効、CSS_html/css_WEB-ITnoseの優先度について
擬似クラスのホバーが無効、CSS_html/css_WEB-ITnoseの優先度について
- WBOYオリジナル
- 2016-06-24 11:41:28854ブラウズ
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> a:hover{ color: #B61D1D; } .tag_a{ color: #333; } .tag_ul a{ color: #333; } </style></head><body> //hover失效 <ul class="tag_ul"> <li><a>用ul标签选中</a></li> </ul> //hover失效有效 <ul> <li><a class="tag_a">用a标签选中</a></li> </ul></body></html> 有没有大神 帮我解释一下 关于class的优先级！
回复讨论(解决方案)
25edfb22a4f469ecb59f1190150159c670fc1228f17d1dc106bac25faac1017a用a标签选中5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
加上href
既然楼主自己都试出加class后有效，，，那就加个class不就好了。。。
顺序为
a
a:visited
a:hover
a:active
权重(摘自《CSS实战手册》)
引入
示例
f2a2f5eb7ce6ea9f9046b879ccd8ccc5
9a2d986b0a01d0ca882b4d7eaaacb8b8
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8121115db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8122225db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a8123335db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
.nav li a {背景色: シルバー;}
背景色セレクターの値でスタイルの重みを決定します
スタイルの最も具体的なスタイルの属性は次のようになります。
タグセレクター 1 ポイント
クラス選択デバイス 10 ポイント
1 つの ID で 100 ポイント
組み込みスタイルの 1000 ポイント
例
navBox a
10 + 1 = 11 ポイント
.navBox .nav a
10 + 10 + 1 = 21 ポイント
.nav a
10 + 1 = 11 ポイント
.nav li a
10 + 1 + 1 = 12 ポイント
注
1) 継承された属性には重み値がありません
2)重み値が同じ場合、最後のスタイルが優先されます
3) 最初にすべての外部スタイル シートをリストし、次に内部スタイルを含めます
重み値を無視します
説明
CSS は重みを完全に無視する方法を提供します。
特定の属性が別のより具体的なスタイルによってオーバーライドされないことを絶対に保証する必要がある場合、
この手法を使用できます
保護する必要がある属性が属性によって上書きされるのを避けるために、後で挿入する必要があります。
例
.navBox .nav a {background-color: red;}
a {background-color: black! important;}