• 締切済み

CSSの添削をお願いします。リンク色が反映しません

閲覧ありがとうございます。下記CSSの 「.CLASS li a:link,a:visited{ color:red; text-decoration:none;」 の部分が反映されず、ブラウザの標準設定のままになってしまいます。 本来のstyleの全文はbodyや他のクラスの記述もしているのですが、それらが影響しているわけではないことを確認してあります。 <style> .CLASS ul{ padding:0; } .CLASS li{ border-top: solid pink 1px; list-style-type: none; } .CLASS li a:link,a:visited{ color:red; text-decoration:none; background-color:lightgray; display: block; } .CLASS li a:hover { background-color:gray; } </style> <div class="CLASS"> <ul> <li> <a href=""> 反映されてない…リンク文字色red、デコレーションnone</a> </li> <li> <a href="">反映されてる…リンク背景色lightgray、ホバー背景色gray</a> </li> </ul> </div> 宜しくお願いします

  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

回答No.2

試してはいませんが、 .CLASS li a:link,a:visited ↓ .CLASS li a:link, .CLASS li a:visited なのでは。 それでダメなら、a:visitedというのはhrefに対してvisitedなわけで、 href=""ではなく#でもいいから何かしら値を入れたら変わったりしませんか? あとは他の方も回答されているように、 もう少し情報がないと追えない感じですね。 ・どのブラウザなのか ・HTML宣言はどうか などなどなど。

回答No.1

コピペしてHTML作ってみましたが、赤色で下線なしになってますよ? firefox opera で確認しました。 実物をどこかにアップしたほうがいいかも・・・ あとそうなる環境も提示したほうがいいかも。OS ブラウザ

関連するQ&A

  • cssでの擬似リンク(a:hover)の複数指定

    cssでidに囲まれた範囲で複数リンクカラーを指定したいのですが、擬似リンク(a:hover)はうまく表現出来るのですが、その他のリンクの色の指定がうkまく行きません。 FireFoxでは、きちんとスタイルが適用されるのですが、Ie6やNetScape7だと、a, a:link, a:visitedの文字色のスタイルが効かなくなります。どうしたらうまくできるのか教えてください。 ■css /* menu-1 */ #menu-1 { width: 200px; height: auto; margin: 0; padding:0; } #menu-1 ul.support, #menu-1 li.support { margin: 0; padding: 0; list-style: none; } #menu-1 li.support { width: auto; height: auto; padding: 5px 10px; } #menu-1 a, #menu-1 a:link, #menu-1 a:visited { padding: 0.2em 10px; height:1.4me; color: #ff0000; text-decoration: none; } #menu-1 a:hover { color: #9f0f0f; text-decoration: underline; } /* menu-2 */ #menu-2 { width: 200px; height: auto; } #menu-2 ul, #menu li.list1, #menu li.list2 { margin: 0; padding: 0; list-style: none; } #menu-2 ul li.list1, #menu-2 ul li.list2 { width: auto; height: auto; } #menu-2 ul li.list1 { font-weight: bold; } #menu-2 .list1 a, #menu-2 .list1 a:link, #menu .list1-s a:visited { text-decoration: none; color: #0e2159; } #menu-2 .list1 a:hover { color: #9f0f0f; text-decoration: underline; } #menu-2 li.list2 a, #menu-2 li.list2 a:link, #menu li.list2-s a:visited { text-decoration: none; color: #000000; } #menu-2 li.list2 a:hover { color: #9f0f0f; text-decoration: underline; } ■html <div id="menu-1"> <a href="#"> <ul> <li class="support">テスト</il> </ul> </a></div> <div id="menu-2"> <a href="#"> <ul> <li class="list1">スタイル1</il> <li class="list2">スタイル2</il> </ul> </a></div>

    • ベストアンサー
    • HTML
  • リンクの色について

    スタイルシート部分を .navi1 a:link, .navi1 a:visited{ display:block; background-image:url(images/1.gif); text-decoration:none; line-height:30px; font-size:12px; text-align:left; height: 30px; padding-left:11px; font-weight: bold; color: #00FF00; } .navi1 a:hover, {text-decoration:none; color:#FFFF00;} .top a:link, .rank a:visited{ color:#379E02; } .top a:hover{ color: #FF0066;} HTML部分を <div class="navi1"><a href="#">テキスト1</a></div> <div class="top"><a href="#">テキスト2</a></div> とした時に、IEでは思ったように表示されるのですが FirefoxやChromeではテキスト1は#00FF00のままマウスを乗せても色が変わらず テキスト2は色が紫になっています。 これをIEと同じ様に表示させるにはどうすればいいのでしょうか?

    • ベストアンサー
    • HTML
  • CSSで表示が異なってしまう

    下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか? よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>

    • ベストアンサー
    • HTML
  • divでくくったけれど、反映が変になります。

    divで指定した2つのリンク要素なのですが、 mainのくくりの中の文字にleftsideの設定が反映されてしまいます。 でも、mainで指定した div#main a:hover { color: #6699FF ; text-decoration: underline; }だけはそのまま活きています。 どこが間違っているのでしょうか。 div#main a:link, a:visited { color: #3300FF ; text-decoration: underline; } div#main a:hover { color: #6699FF ; text-decoration: underline; } div#leftside a:link, a:visited { color: #000000 ; text-decoration: none; } div#leftside a:hover { color: #6699FF ; text-decoration: none; }

    • ベストアンサー
    • HTML
  • IEでCSSのアンカー色指定が反映しない

    <style type="text/css"> a:visited { color:blue;} div.testB { padding-left:12px; clear:both; } div.testB a{ color:#000000; text-decoration:none; font-weight:bold; } div.testB a:hover{ color: #cc0000; font-weight:bold; text-decoration:underline; } </style> <div class="testB"> <div><a href="#">リンク</a></div> </div> このようなソースで、FireFoxでは理想どおり表示されるのですが、IEではtestBで指定したリンク色が反映されず、先のa:visited{}のカラーでボールドだけ効いた状態になってしまいます。hoverしても色は変わらずです。visitedの指定がなければ、きちんと反映されるようなのですが… 解決策ありますでしょうか。 よろしくおねがいします。

    • ベストアンサー
    • CSS
  • cssがhtmlに反映しません

    .style01 { font-size: 120%; color: red; font-weight: bold; } .style02 { color: blue; font-weight: bold; } .style03 { background-color:yellow; text-decoration: underline; } .style01.style02は反映しますが、 .style03 の{ background-color:yellow; text-decoration: underline; } background-color:yellow;の部分が全く反映しません。 なぜでしょう。

  • IE以外で:hoverの内容が無視されてしまう

    独学でCSSを勉強している者です。 ちょっと躓いてしまったのでどなたかお知恵を貸してください。 下記のように指定しています。 IE6ではちゃんとhover時に背景色が変わるのですが、 opera,firefoxで動作確認したところいずれもうまく動作しませんでした。 どこが間違っているのか分からず、困っています。 御指摘頂けると助かります。 ---------------- pagelist.htmlの内容 ---------------- <ul class="comout">  <li class="comrow compar">ページリスト   <ul class="comin">    <li class="comrow"><a href="001.html">1</a></li>    <li class="comrow"><a href="002.html">2</a></li>   </ul>  </li> </ul> ---------------- 001.htmlの内容 ---------------- <ul class="comout">  <li class="comrow compar">ページリスト   <ul class="comin">    <li class="comrow comself"><a href="001.html">1</a></li>    <li class="comrow"><a href="002.html">2</a></li>   </ul>  </li> </ul> ---------------- スタイルシート ---------------- ul.comout{ padding:0px; margin:0px 0px 20px 0px; } ul.comin{ padding:0px; margin:0px 0px 0px 10px; } li.compar{ display:block !important; padding:5px; margin:0px; } li.comrow{ display:inline; color:#395158; list-style-type:none; text-decoration:none; } li.comrow a:link{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } li.comrow a:visited{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } }li.comrow a:hover{ background-color:#D1C9BD; border:1px #EFECE7 solid; text-decoration:none; color:#395158; } li.comself a{ background-color:#D1C9BD !important; border:1px #EFECE7 solid !important; } --------------------------- 以上です。 いままでIEのみで動作確認をしてきたため、 今回のような自体にどう対応して良いのか分かりません。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSのmarginが反映されません

    HPを製作中メニューページを縞々のデザインにしようと下のようなCSSで製作をしているのですが、どうしても左に空白が出来てしまいます。 marginは0にしてあるのですが、どこか間違って居る所があるのでしょうか…自分で見直してもさっぱりわからないんです;; ::::CSS:::: #body{ text-align:center; font-family: 'HGS創英角ポップ体'; color:#5d5c70; width:100%; float:left; padding:180px 0px 0px 0px ; margin:0px; font-size:13px; background: #000000; } #body a{ width:100%; color:#5a5d73; } #body a:hover{ color:#7c7f95; } ul.list li { margin:0; padding:8px 0px 8px 0px; list-style: none; width:100%; } ul.list li.1 { background: #ffb6c1; } ul.list li.2 { background: #ffabbb; }ul.list li.3 { background: #ffa0b7; } ul.list li.4 { background: #ff95b4; } ul.list li.5 { background: #ff8ab3; } ul.list li.6 { background: #ff7fb2; } }ul.list li.7 { background: #ff74b2; } ul.list li.8 { background: #ff69b4; } ::::HTML:::: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <link rel="stylesheet" href="style.css" type="text/css" media="all"> <title>NO-NAME</title> </head> <body id="body" style="overflow:hidden;"> <ul class="list"> <li class="1"><a href="top" Target="right">TOP</a></li> <li class="2"><a href="about" Target="right">ABOUT</a></li> <li class="3"><a href="main" Target="right">MAIN</a></li> <li class="4"><a href="obi.jp/" Target="right">BLOG</a></li> <li class="5"><a href="nu0/" Target="right">MEMO</a></li> <li class="6"><a href="off" Target="right">OFF</a></li> <li class="7"><a href="bkm" Target="right">BKM</a></li> <li class="8"><a href="8797" Target="right">INDEX</a></li></ul> </div> </body> </html>

  • プログラミング html css css3

    プログラミングについての質問です a{text-decoration:none;} a:hover {color:white; background:black;} a:visited{color:red;} a:active{color:silver;} このプログラム(スタイルシート)のhoverの部分が うまくいきません。 何を直せばいいでしょうか

    • ベストアンサー
    • CSS
  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません) 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

専門家に質問してみよう