CSS3 属性セレクターのいくつかの使用法 (コード例)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 属性セレクターのいくつかの使用法 (コード例)

易达

Jun 09, 2020 pm 06:05 PM

css3

この記事の目標:

1. CSS3 での属性セレクターのいくつかの使用法をマスターする

質問:

1. を達成するには div css を使用する必要があります。次のような効果がありますが、CSS が必要です。すべての属性セレクターは、要素スタイルを設定するためにファイル内で使用されます。

CSS3 属性セレクターのいくつかの使用法 (コード例)

補足:

1. div 全体の幅は次のとおりです。 850、ページの中央に表示する必要があります

2。タイトルサイズは 28、太字表示

3。その他のフォントサイズは 14px

4有名人のゴシップをクリックして tobagua.html にジャンプし、軍事ニュースをクリックして toaffairs.html にジャンプします。追加の資料が必要ないため、資料を準備するステップを省略できます

2.index.html を作成し、アーキテクチャを記述します。アーキテクチャを分析するにはどうすればよいですか?

アイデア分析:

1. 目標は左と右の 2 つの部分に分かれており、それぞれのセクションにはニュースのリストが表示されますが、各ニュースのカテゴリが異なり、一部のスタイルも異なります

2. Lin Xinru を含むニュースの色は別途設定する必要があります

3. f15 を含むニュースの色は別途設定する必要があります

4. F15 を含むニュースの色も別途設定する必要があります。 2 つのパートのタイトルも個別に設定する必要があるため、属性セレクター

5 を使用して一致できるように、いくつかの属性を個別に設定する必要があります。各パートはリストであるため、次を使用できます。 ul ですが、どちらの ul もフラッシュであるため、float を使用する必要があります。float なので、外側のコンテナがまだ浮動要素を確実にラップできるようにするために、最後に float をクリアするクリア要素を追加する必要があります

分析によると、次のコードが得られます

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
</head>

<body>
    <div container="true">
        <div left="true">
            <span title="true"><a href="tobagua.html">明星八卦</a></span>
            <ul>
                <li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 </li>
                <li class="news">->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ </li>
                <li class="news">->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 </li>
                <li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li>
            </ul>
        </div>
        <div right="true">
            <span title="true"><a href="toaffairs.html">军事新闻</a></span>
            <ul>
                <li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li>
                <li class="affairs news">->越南的骑兵警队，马略矮了点啊 </li>
                <li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li>
                <li class="affairs news">->不到一个月又出事：美军F-35降落时起落架折断 </li>
            </ul>
        </div>
        <div class="clear"> </div>
    </div>
</body>
</html>

3. スタイルを記述し、css フォルダーを作成し、その中に新しいindex.cssを作成します。スタイルの記述方法内部では、以下が分析アイデアです。

アイデア分析:

コンテナーコンテナーのすべてのサブ要素

1。 style は設定に一致するように属性セレクターを使用する必要があります。私たちのアイデアは、最初に属性 container=true を持つ要素を取得し、次に最も一般的なパディングやマージンなどの一般的なスタイルをその要素に設定することです。これは当てはまらないためです。設定する際、一部の要素のデフォルトのパディングがわからない場合がありますが、ロジックの作成に集中できるように、パディングとマージンを 0

に統一しましたので、次のコードをindex.cssに追加します。

div[container =true] *{
    padding:0;
    margin:0;
}

container コンテナ

1. 要件によると、最も外側のコンテナの幅は 850 で、中央に配置され、上部と下部にパディングがあります。、左右にグレーの境界線があり、デフォルトのフォントサイズは 14px です。コンテナコンテナはどれですか? それは、コンテナ属性 = true の要素です。

したがって、次のコードをindex.css に追加します。

div[container =true] {
   width: 850px;
   margin: 0 auto;
   font-size: 14px;
   border: 1px solid lightgray;
   padding: 10px;
}

2 タイトルのパブリックスタイル設定

1. タイトルは中央に配置し、フォントサイズ 28 ピクセルで太字で表示する必要があるため、どれがタイトルであるか、つまり、属性 title=true を持つすべての要素

したがって、次のコードをindex.css に追加します。

span[title=true] {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
}

2 つのタイトル接続の個別の設定

##1. ゴシップのタイトルの色は赤です

##2. 軍事タイトルの色は青です

3. 八卦文字列を含む href 属性は、左側のタイトル接続です。 toaffairs で始まる href 属性は、右側のタイトル接続です。

*= は包含を意味し、^= は先頭を意味します

したがって、次のコードをindex.css に追加します。

左右のフローティング div 設定

1. 左の div は左にフローティングする必要があるので、どれが左の div ですか? 実際には、left 属性を持つ div です。 true

2 となります。右の div は右にフロートする必要があるので、どの div が右の div ですか? 実際、それは true

3 という正しい属性を持つ div です。この関数は、float をクリアすることです。 div は、実際には、clear で終わるクラスを持つクラスです。注: $= は、何で終わるかを示します。

したがって、次のコードをindex.cssに追加します:

a[href *=bagua] {
   color: rgb(234, 84, 23);
}

a[href ^=toaffairs] {
   color: green;
}

li settings

1. li には黒い点が含まれていないため、list-style:none

2. 属性クラスにニュースが含まれる要素文字列は li

3. 効果に従って、上下左右の間に一定の間隔が空きますそこで、次のコードをindex.cssに追加します:

div[left =true] {
   float: left;
}

div[right =true] {
   float: right;
}

div[class $= clear] {
   clear: both;
   float: none;
   width: 0;
   height: 0;
}

Ruby Lin のタイトル設定が含まれています

1. このタイトルの色は土っぽい黄色で、フォントは太字です

2. クラス属性の末尾lxr は Ruby Lin のタイトルなので、$=

li[class =news] {
   list-style: none;
   height: 42px;
   line-height: 42px;
   padding:3px 10px;
}

f15

1 を含むタイトル設定を使用します。タイトルの色は青、フォントは太字です

2. class 属性に f15 文字列が含まれるタイトルがターゲットのタイトルとなるため、*=

[class $=lxr]{
    color:peru;
    font-weight: bold;
}

を使用します。これまでのところ、index.css の全体の内容は次のとおりです。 #
[class*=f15]{ color:blue; font-weight: bold; }
次に、index.css をindex.html

div[container =true] *{
    padding:0;
    margin:0;
}
div[container =true] {
   width: 850px;
   margin: 0 auto;
   font-size: 14px;
   border: 1px solid lightgray;
   padding: 10px;
}

span[title=true] {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
}

a[href *=bagua] {
   color: rgb(234, 84, 23);
}

a[href ^=toaffairs] {
   color: green;
}

div[left =true] {
   float: left;
}

div[right =true] {
   float: right;
}

div[class $= clear] {
   clear: both;
   float: none;
   width: 0;
   height: 0;
}

li[class *=news] {
   list-style: none;
   height: 42px;
   line-height: 42px;
   padding:3px 10px;
}
[class $=lxr]{
    color:peru;
    font-weight: bold;
}
[class*=f15]{
    color:blue;
    font-weight: bold;
}

に導入して実行します。結果は次のようになります:

CSS3 属性セレクターのいくつかの使用法 (コード例)

これまでのところ、必要な結果が達成されています