詳細度は同じで、下にあるのになぜ負けるのでしょうか？

前へ 次へ
このQ&Aのポイント
  • CSSでリンクテキストの色を指定しているにも関わらず、下にあるスタイルCSSが優先されてしまう問題について質問です。
  • 具体的には、下にある.u-color-blackというクラスでリンクテキストの色を指定していますが、適用されません。
  • 一方で、上にあるリセットCSSがリンクテキストの色を上書きしてしまうことがあります。なぜこのような現象が起きるのでしょうか？
回答を見る
  • ベストアンサー

詳細度は同じで、下にあるのになぜ負けるのでしょうか

下記のようにしているのですが、リンクテキストの色が黒になりません。 .u-color-black　｛ color: rgba(0, 0, 0, 1)!important; ｝ 上にある下記のリセットcssのほうがなぜか適応されてしまいます。 /* リンクテキストの色など */ a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; color: #FFF; } /* /html5doctorの一部を抜粋 */ http://codepen.io/anon/pen/RopRwz 詳細度は同じで、下にあるのになぜ負けるのでしょうか？

noname#226032
noname#226032
  • CSS
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

.u-color-white｛ .u-color-white{ コメント以外は半角で全部書かないとダメだよ。

その他の回答 (1)

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.1

.u-color-black　｛ color: rgba(0, 0, 0, 1)!important; ｝ この記述が間違っていて認識されていないのだと思います。 まず、.u-color-blackの直後に全角スペースがあるので取り除いてください。 また、全角の｛や｝ではなく半角の{や}を使ってください。

noname#226032
質問者

お礼

そんな理由でしたかね。 ただ下記のようにしても変わりません。 http://codepen.io/anon/pen/RopRwz

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • リンクのスタイルシートについての質問

    スタイルシートを作成しています。 リンクにアクションをつけたのですが 思うような動作にならずに、悩んでします。 ちなみに動作確認はIE６で行っています。 ◆現在の動き リンクにマウスをのせると箱が上下に動いてしまう。 ◆どうしたいか リンクにマウスののせても箱が上下に動かないようにしたい。 固定したいとうことです。 以下に作成したソースをのせておきますので わかる方いましたら教えていただけると幸いです。 a.menu01{ text-decoration:none; text-align: center; border:#FFF solid 1px; background-color:#DACD96; width:280px; font-size:15px; font-weight:bold; color:#FFF; padding:5px; display:block; letter-spacing: 5px; margin-bottom:10px; } a.menu01:active { margin-bottom:10px; } a.menu01:visited{ margin-bottom:10px; text-decoration:none; } a.menu01:hover { text-decoration:none; color:#AA8B62; background-color:#FFFFFF; margin-bottom:10px; }

  • blog CSSのタイトル色の変更指定について！！

    このblog CSSのブログタイトルの色変更はどうすればいいですか？ .blogtitle　の所で色指定してもダメでした？他に方法があるのですか？ livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si

    • 締切済み
    • CSS
  • ホームページ作成について。

    いつも、お世話になっております。 今回、一からサイトを作るのに当たってぶち当たった壁があり どうしても自力では解決出来そうに無いので、皆様のお力をお貸し下さい。 写真を展示するページを二分割上下のフレームを作ってるんですが このフレームの下・・メニュー部分の文字同士がどうしても重なってしまうんです・・。 メニュー部分はスタイルシートを使用してるんですが、幅や高さや上下左右(marginやpadding等) をいくら調節しても、重なってしまいます。 http://cilo.web.fc2.com/photo-studio-room.html 上のURLが問題のページです・・。 そして下のが問題のスタイルシートです・・。 html{ scrollbar-arrow-color:#ccc; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#ccc; scrollbar-track-color:#fff; scrollbar-shadow-color:#ccc; scrollbar-darkshadow-color:#fff; } body{ background-image: url(); background-color:#fff; background-position:right top; background-repeat: no-repeat; background-attachment: fixed; padding:0; margin:0; text-align:left; } #sub{ width:980px; height:800%; } .main{ margin:10px 20px 10px 0px; padding:0px 0px 70px 0px; text-align:left; font-size:12px; line-height:1px; font-family:Verdana,Osaka,'MS P Gothic'; color:#999; } h1{ font-size:12px; color:#666666; text-align:right; font-decoration:none; font-weight:normal; font-family:'Georgia',Verdana,Osaka,'MS P Gothic'; margin:0px 270px 20px 0px; padding:0px 80px 0px 0px; } h2{ font-size:12px; color:#666; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; text-align:left; letter-spacing:10px; line-height:20px; text-decoration:none; margin:30px 0px 0px 10px; padding:5px 13px; } h3{ font-size:11px; color:#333; text-decoration:underline; margin:5px 10px; padding:0px 9px; } /* メニュー部分の設定 */ #menu { text-align:center; letter-spacing:3px; } #menu ul{ list-style:none; margin:50px 0px 0px 0px; padding:0px; } #menu li{ display:inline; } #menu li a{ display:block; color:#666; border:1px solid #666; background-color:#fff; margin:10px 55px 0px 35px; padding:5px; } #menu li a:hover{ background:none; } /* テキスト設定 */ .1{ line-height:15px; padding:10px 10px 0px 10px; } /* メルフォ設定 */ form table{ margin-left:30px; } td.name{ width:8em;color:#000; text-align:right; padding:5px; float:left; } input.name{ width:20em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } input.url{ width:25em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } textarea.text{ font-size:10px; line-height:15px; border:solid #000 1px; margin:0.5em 0; padding:0.5em; } td.post{ text-align: center; } input.post{ width:60px; height:21px; color:#000; font-size:10px; line-height:12px; background:transparent; border:solid #000 1px; text-align:center; margin:0.5em 0 0 1em; padding:0; } /*　リンク　*/ a{ text-decoration:none; } a:link{ color:#999; } a:active { color:#999; } a:visited{ color:#999; } a:hover{ color:#00ccff; } /* 画像のボーダーを0にする */ img { border:none } /* カーソル設定 */ body{cursor:url();} a{cursor:url();} ご回答よろしくお願いします。

  • CSS省略

    a.menu:link { color: #99CC00; background-color: #FFFFFF; margin: 5px; padding: 3px; text-decoration: none; display: block; width: auto; } a.menu:visited { color: #99CC00; background-color: #FFFFFF; margin: 5px; padding: 3px; text-decoration: none; display: block; width: auto; } a.menu:hover { color: #99CC00; background-color: #F0FFC4; margin: 5px; padding: 3px; text-decoration: none; display: block; width: auto; color: magenta; } メニューの部分のリンクについてのスタイルシートです。 訳あってこれとは別に .menu_ss .menu_s として、 width のところを 45px 100px としたものを作ろうとしていますが、 そのままだと全体がずいぶん長くなってしまいます。（３組×３） width の設定以外がほとんどかぶってしまうのですが、 この場合省略して書く方法はあるのでしょうか？ 基礎的質問で申し訳ありませんが、よろしくお願いします。

  • HP全体を左寄せ配置するCSSの記述について。

    HP全体を左寄せ配置するCSSの記述について。 CSS付きで中央表示の無料テンプレートを頂きました。 これを左寄せ配置で表示させる方法を教えて下さい。 (base.css) @charset "Shift_JIS"; /* 基本設定 */ *{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Helvetica, sans-serif; } body{ color:#333; text-align:center; } br{ letter-spacing:normal; } a{ color:#333;text-decoration:none; } a:hover{ color:#fff;text-decoration:none; } img{ border:0px; } /* テンプレート */ #temp{ width:500px; 　text-align:center; 　line-height:18px; letter-spacing:1px; margin:10px auto; } #header{ background:#fff url(img/cat.gif) no-repeat 0px 0px; width:500px;height:120px; text-align:left; border:1px solid #333; } #menu{ background-color:#333; width:500px;height:24px; color:#fff; margin:10px 0px; border:1px solid #333; } #main{ background:#fff; width:480px; text-align:left; padding:10px; border:1px solid #333; } #footer{ background:#fff; width:500px;height:30px; color:#333; line-height:30px; margin:10px 0px; border:1px solid #333; } /* タイトル部分 */ #header h1{ padding:30px 0px 0px 190px; } /* メニュー部分 */ #menu ul{ list-style-type:none; height:24px; margin-left:30px; } #menu li{ display:inline; padding:0px } #menu a{ color:#fff; line-height:24px; float:left; text-decoration:none; padding:0px 5px; } #menu a:hover{ color:#DB9400; text-decoration:none; } /* メインコンテンツの見出し */ #main h2{ background:url("img/mark.gif") no-repeat; padding:1px 0px 3px 25px; color:#DB9400; よろしくお願いします。

    • ベストアンサー
    • HTML
  • プログラミングについて勉強してます。このコード意味

    AppleIDが更新されましたという詐欺メッセージが届いたのですがそ下にコード書かれてました。どの言語でどんな意味か教えてください font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important; font-size: 17px; line-height: 25px; font-weight: normal; color: #333 !important; background-color: #ffffff !important; margin: 0 !important; padding: 0 !important; width: 100%/* !important */ ; /* was 685px */ ; } /* same width as body, because Rover adds this div */ body /*, .main*/ {} .main { width: 685px; } #apple-logo-left-margin { width: 538px !important; } #logo-row-box { width: 100% !important; /* text-align:right; */ padding-bottom: 20px !important; } div[dir="rtl"] #logo-row-box { /* text-align:left !important; */ } h1 { font-size: 32px; line-height: 36px; padding-bottom: 10px; border: 0 !important; color: 333 !important; } b { font-weight: 500 !important; } p { margin-top: 0 !important; word-wrap: break-word; color: #333; font-weight: normal; } td.h1-header { padding: 0px 0px 0px !important; } td.signature { padding-right: 0 !important; padding-left: 0 !important; } td.no-padding-bottom { padding-bottom: 0 !important; } #signature { padding-top: 18px !important; /* was 41px */ padding-bottom: 50px !important; } em a { color: #333 !important; } a { color: #0070c9; text-decoration: none; } a:hover, a:focus { text-decoration: underline !important; } span.unlink a, em a, b a, td.unlink a { color: #333 !important; cursor: text; pointer-events: none; padding-top: 0 !important; margin-top: 0 !important; } #main { margin-top: 40px; padding-right: 15px; padding-left: 15px; padding-bottom: 30px; } footer, footer p, footer span.unlink a, footer td.paragraph { font-size: 12px; line-height: 18px; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #888 !important; } .center-text, footer nav, footer a:hover { text-decoration: underline; } .no-margin-bottom { margin-bottom: 0 !important; } td.spacer-36 { padding-bottom: 36px; } html[dir=rtl] #apple-logo { left: 0; right: 538px; } p#copyright { margin-bottom: 0; } .display-block { display: block; } .nowrap { white-space: nowrap; } #apple-logo-margin-bottom { height: 44px !important; } #left-align-on-reply { /* moved from body */ margin: 0px auto 50px; padding: 0; width: 685px; } #apple-logo-cell { width: 100%; padding-top: 40px; padding-bottom: 44px; } #apple-logo-in-cell { height: 28px !important; width: 24px !important; } #apple-logo-in-row-box-mobile { display: none; height: 20px !important; width: 17px !important; } /* If the email client is reading the style element: */ /* - then we don't need spacer divs */ div.paragraph-spacer { display: none; height: 0px !important; margin-bottom: 0px !important; } /* - and margin-top already is in effect on #main */ #apple-logo-margin-top { height: 0px !important; } #logo-row-box { padding-top: 0 !important; } div[dir="rtl"] #logo-row-box { /* text-align:left !important; */ }

  • スクロールバーによって表示がズレます。

    下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。（IEはOKなのですが・・・） どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }

    • ベストアンサー
    • HTML
  • 外部CSSファイルからのリンク色指定

    外部CSSファイルでヘッダー・フッター・左・右と４種類の枠をそれぞれ違ったリンク色に設定したいのですが、下記の記述で個々にリンク色を設定することはできますか？ できるのであればどのように記載すればいいですか？ body{ text-align:center; background-image: url("image/back.gif"); margin: 0 auto; } #container{ width:800px; margin:0px; text-align:left; } .header{ height: 120px; background-image: url("access/top.gif"); background-repeat: no-repeat; background-position: bottom; margin: 0px; } .main{ width:600px; height:100%; float:right; background-color: #FFFF99; padding: 10px; margin: 0px; } .side{ width:200px; float:left; background-color: #0000FF; padding: 10px; margin: 0px; text-decoration:none; color:#FFFFFF; } .footer{ font-size: 10px; } .clear{ clear:both; line-height:0; height:0; }

    • ベストアンサー
    • CSS
  • CSS

    boxのサイズを文字に合わせたいです。 .box1 { /* Box */ padding: 0.5em 1em; margin: 2em 0; font-weight: ; border: solid 1px #fff; text-align: center; } .box1 p { margin: 0; padding: 0; color: white; }

    • 締切済み
    • CSS
  • ブログの下線

    fc2ブログでアフィリエイトをしています。 私のブログのテンプレートは、ブログタイトルと記事のタイトルにカーソルをもって行くとリンクの下に下線が表示されるのですが、それ以外は色が変わるだけで下線が表示されません。 画面右側(プラグインカテゴリ2)のフリーエリアは、テキストリンクに常に下線が表示されるようにしたいんです。 他のリンクはカーソルがきた時だけ、下線がでるようにしたいです。 ブログ初心者なので分かりやすくお願い致します。 /* リンクの設定 */ a{cursor : pointer ;} a:link{ color : #000000; text-decoration: none; } a:visited{color : #000000; text-decoration: none; } a:active{color : #008B8B;} a:hover{color : #2F4F4F;} .entry a{font-weight: nomal;} h1, h2, h3{ color : #808080; text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; } h2 a{ text-decoration: none; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する