1

CSSルールを機能させるのに少し苦労しています。ルールが適用される順序に関係していると思いますが、私よりもHTMLとCSSの経験が豊富な方がお役に立てば幸いです。

基本的に、私の目標は、現在フォーカスされているテキスト入力（テキストボックスとテキストエリア、およびドロップダウン）の周囲に色付きの境界線を配置することでした。CSSはかなり短いです（私は思います...）しかし、私に問題を与えているルールは一番下にあります（.userinput：focus）

body
{
    font-family: Arial;
}
.header
{
    color: #004c85;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    padding-bottom: 5px;
}
.titleCell
{
    background-color: #004c85;
    font-family: Arial; 
    color: White;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    padding: 2px 2px 2px 2px;
}
.subtitleCell
{
    background-color: #aaaaaa;
    font-family: Arial;
    color: #092548;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    padding: 2px 2px 2px 2px;
}
.normalCell
{
    background-color: #f1f1f1;
    font-family: Arial;
    color: #092548;
    font-size: 9pt;
    font-weight: bold;
    text-align: left;
    padding: 1px 2px 1px 2px;
}
.errorText
{
    font-family: Arial;
    color: #d01d00;
    font-size: 9pt;
    font-weight: bold;
    text-align: left;
}
.button
{
    font-size: 12px;
    color: #f1f1f1;
    background-color: #004c85;
}
.userinput:focus
{
    border: 2px ridge #00a2ff !important;
}

単一のテーブルを使用して単純なページを作成しましたが、正常に機能しました（ここでのターゲットブラウザーはIEです）。複数のテーブルとdivを使用して大きなページを作成すると、このルールはIEに適用されなくなったようです。読んだときに、ルールに！importantを追加しましたが、役に立ちませんでした。Firebugをダウンロードしましたが、Firefoxでも同じページが表示されます（境界線が表示されます）。

この時点でのヒントをいただければ幸いです。

編集：残念ながら、全体へのリンクを投稿することはできません。以下は私が成功したテストページです。より大きなHTMLへのリンクを投稿することもできますが、ダウンロードしてローカルで実行する必要があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Demo Page</title>

    <link href="base.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form name="FormName" method="post" style="text-align: center">
        <table cellpadding="0" cellspacing="0" width="900" border="0" style="text-align:left">
            <tr>
                <td class="header">
                    Header
                </td>
            </tr>
            <tr>
                <td class="errorText">
                    Error Text
                </td>
            </tr>
            <tr>
                <td class="titleCell">
                    Title Cell
                </td>
            </tr>
            <tr>
                <td class="subtitleCell">
                    Subtitle Cell
                </td>
            </tr>
            <tr>
                <td class="normalCell">
                    Normal Cell
                </td>
            </tr>
            <tr>
                <td class="normalCell">
                    <input type="text" class="userinput" size="25" />
                </td>
            </tr>
            <tr>
                <td class="normalCell">
                    <input type="checkbox" value="ON" />&nbsp;
                        Checkbox
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" class="button" value="Button" />
                </td>
            </tr>

        </table>
    </form> 
</body>
</html>

これが正常に機能したテストページです。Webサーバーにcssファイルがありますが、内部からしかアクセスできないことに注意してください。jqueryを実行することを考えましたが、これは簡単だと思いました。どうやらそうではありません。

再度、感謝します。必要に応じて、後で大きなページのHTMLを投稿することもできます。

もう一度編集：マークアップを今見ています。W3Cサイトでは問題ないようですが、何かが足りないのかもしれません。興味のある方は、txtファイルの大きなページのHTMLへのリンクをご覧ください。http://cloudstor.pogoplug.com/share/xGQzP43X9FsEq5Z1XqafYQ/LNtISrGuLxJsaxhZ3iPZUw/form.txt

以前に投稿したCSSだけが使用されていることにも言及する必要があります。また、あまり役に立ちませんが、CSSはFirefoxだけでなくChromeでも機能します。IEは唯一のホールドアウトです（そこには大きな驚きがあります...）

リンクとコメントをありがとうございました。私はこれを理解することを決意しています。

4

4 に答える 4

1

完全なマークアップが表示されない場合は、ページに無効なマークアップ（つまり、閉じられていないタグ、無効な文字）があるため、スタイルやページ構造が壊れたり、ブラウザ間で異なる場合があります。または、クラス宣言が上書きされている可能性があります。スタイルシートの別の場所。フォーカスセレクターは有効であり、jqueryは必要ありません。

于 2012-07-06T22:14:45.883 に答える
1

セレクターを壊す可能性のある2つのことについて考えることができます。

  • 別のスタイルシート/スタイルタグには同じセレクター+プロパティがあり、!importantこれも含まれています。このため、独自のcssを表示することはできません。

  • HTMLページのマークアップが無効です。少し時間を取って、W3C検証サービスを使用して検証してください。

于 2012-07-06T22:18:17.553 に答える
0

RyetとNadavが言ったように、無効なhtmlマークアップが含まれている可能性があります。しかし、問題を引き起こすのは無効なhtmlマークアップだけではなく、無効なcssも同様です。無効なcssには、角かっこがない、セミコロンがない、IDとクラスの誤用などが含まれる可能性があります。このサイトhttp://jigsaw.w3.org/css-validator/を使用して、無効なcssマークアップを見つけることができます。

于 2012-07-06T22:19:25.867 に答える
0

理解した。そして、私はとてもばかげています。コメントが私のページを壊しました。

私はC、C ++、C＃のような人です。まっすぐなHTMLを最初から作成してから、しばらく経ちました。私は、すべてのHTMLフォームのベースとなるテンプレートを作成しようとしていました。ページの最上部に、テンプレートの目的を説明するブロックコメントがありました（コードファイルの上部にテンプレートの機能を説明するブロックコメントを配置するのは珍しいことではありませんよね？）

簡単に言うと、HTMLの断片を取り出して、残りが1つのテーブル、1つの行、1つの列、およびテキストボックスになるまで続けました。それでもうまくいかないときは、コメントを出すことを考えました。コメントは、ページの上の最初のものでした

<!DOCTYPE ...

ご協力いただきありがとうございます。HTMLでコメントを使用する際のヒントやベストプラクティスへのリンクがあれば、とてもありがたいです。

すべての提案を再度ありがとう。

于 2012-07-07T15:37:01.120 に答える