CSS3複合セレクターの詳しい説明-CSSチュートリアル-php.cn

CSS3複合セレクターの詳しい説明

高洛峰

リリース： 2017-03-24 11:22:24

オリジナル

1601 人が閲覧しました

今日は動画のCSS3複雑セレクター部分を見終わったので、学んだ知識を整理してみます。

1. 兄弟セレクター: 同じ位置レベルで、兄弟要素と呼ぶことができます

a、隣接する兄弟セレクター: 現在の要素の後に [one] (one) が続く next
を指定します。 selector 要素構文: 結合記号として「+」を使用します
例: p+p -> p の直後の p 要素

<!-- demo.html -->
<html>
    <head>
        <title></title>
    </head>
    <body>
        <p>这是第一个段落</p>
　　  <div id="d1">这是一个div</div>
　　  <span>这是一个span</span>
        <p class="p1">这是第二个段落</p>
　　  <b>Hello World</b>
　　  <p class="p2">这是第三个段落</p>
    </body>
</html>

/*demo.css*/
div+p{
    background: yellow;
}
#d1+p{
    background: red;
}
span+.p1{
    background: blue;
}

ログイン後にコピー

ユニバーサル兄弟セレクター: next_all 要素に一致します【後続のすべて指定されたセレクターを満たす兄弟要素
構文: 共役として「~」を使用します
例: p~p{} -> p 以降のすべての p に一致

2、

属性セレクター: 要素を使用します。要素を選択する条件としてのセレクター構文: [属性関連コンテンツ]
例: [id] ->id 属性を持つすべての要素
p[id] ->id 属性を持つ p 要素
a, [id], p[id]
b, p[id][
class] -> id と class の両方を持つ p 要素 c, p[id="p1"] - >id 値が「p1」の p 要素
d, p[class~="value"]
e, p[class^="b"] -> class 属性値が b で始まる p タグと一致します
f , p[class*="b"] - > class 属性値に b
g が含まれる p タグと一致する、p[class$="b"] -> class 属性値が b

<!-- demo.html -->　　　　　
 <html>
     <head>
         <title></title>
     </head>
     <body>
        <p class="clear p1 myself">
        这是第四个段落
        </p>
        <div class="userContent">
        文本内容
        </div>
     </body>
</html>

/*demo.css*/
p[class]{
color: #e4393c;
}
p[class~=&#39;p1&#39;]{
background-color: #cd2c2d;
color: #fff;
}
div[class ^= "us"]{
background-color: #bfb;
}
div[class$="t"]{
background-color: #bfb;
color: #333;
}

ログイン後にコピー

で終わる p タグと一致する

a . ターゲット疑似クラス : アクティブな HTML
アンカーを強調表示 b. 要素ステータス疑似クラス: ほとんどの場合、フォーム要素で使用されます
1 , :enabled -> すべての有効な要素と一致します
2. -> すべての無効な要素に一致します 3. :checked -> 選択されたフォーム要素に一致します (チェックボックス、ラジオのみに適用されます) C. 擬似 -structural pseudo -category 1.
: first -child
-& gt;親要素内の最初のサブ要素
2.: Last -child -& gt; 子要素のない要素と一致します (テキストコンテンツまたはスペースも子要素としてカウントされます)
4 . :only-child -> 親要素に属する唯一の子要素と一致します
d 、否定疑似クラス: 指定されていないセレクターを持つ要素と一致します構文:: not (selector)

<!-- demo01.html 目标伪类 -->
 <html>
     <head>
         <title></title>
     </head>
     <body>
    <a href="#Tom">猫和老鼠(Tom and Jerry)</a>
    <a href="#Atongmu">铁臂阿童木</a>
    <a href="#BlackCat">黑猫警长</a>
    <br>
    <a name="Tom">第一部：Tom and Jerry</a>
    <p style="height: 500px;">Tom and Jerry</p>
    <div id="Atongmu" style="height: 500px;">我是阿童木</div>
    <div id="BlackCat" style="height: 500px;">I am Mr Black Cat</div>    
     </body>
</html>

/*demo01.css*/
a:target,div:target{
    background-color: #bfb;
    font-size: 20pt;
}

ログイン後にコピー

<!-- demo02.html 结构伪类 -->　　　　　
 <html>
     <head>
         <title></title>
     </head>
     <body>
    <div id="d1"></div>
    <div id="d2">
        <p>This is a p</p>
    </div>
    <div id="d3">
        This id d3
    </div>
    <div id="d4">
        <b>first</b>
        <b>second</b>
        <b>third</b>
        <b>last</b>
    </div>    
     </body>
</html>

/*demo02.css*/
div{
    width: 100px;
    height: 100px;
}
b{
    display: block;
}
div:empty{
    background-color: #bfb;
}
p:only-child{
    background-color: #fbf;
}
b:first-child{
    font-size: 2em;
    color: #fbb;
}
b:last-child{
    font-size: 3em;
    font-weight: normal;
    color: #bbf;
}

ログイン後にコピー

<!-- demo03.html 伪元素状态伪类 -->
  <html>
      <head>
          <title></title>
      </head>
      <body>
         用户名称：<input type="text"><br>
    用户昵称：<input type="text" disabled value="请输入您的昵称">
    <br>
    性别：<input type="radio" name="rdoGender">男
              <input type="radio" name="rdoGender">女 
      </body>
 </html>
 
 /*demo03.css*/
 input:enabled{
    color: red;
}
input:disabled{
    border: 1px solid #f00;
}
input[name=rdoGender]:checked{
    background-color: #bfb;
}

ログイン後にコピー

rreee
4. 疑似
要素selector
: 一致するのはすべてテキストコンテンツです
a,
:first-letter

-> ; 最初の文字と一致します

b, :first-line -> 先頭の行と一致します
上記 2 つのセレクタ、インライン要素は無効です、インラインブロックとブロックレベルは c、::selection -> ヨーロッパの補償ユーザーに使用されます選択されたテキストスタイル (Firefox には互換性がないようです)

<!-- demo04.html 否定伪类 -->
  <html>
      <head>
          <title></title>
      </head>
      <body>
         <div>
        用户名称：<input type="text"><br>
        用户密码：<input type="password"><br>
        <input type="submit" value="提交">
        <input type="button" value="按钮">
    </div>
      </body>
 </html>
 
 /*demo04.css*/
input:not(:last-child){
    border: 1px solid #f00;
}

ログイン後にコピー

エラーやエラーがある場合は、上記がすべてです。欠陥がある場合は、視聴者が指摘して、時間内に修正してくれることを願っています。。今日はブログを開設して2日目ですが、これは私自身の成長記録として純粋にここに公開します。

以上がCSS3複合セレクターの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。