HTML&CSSプレミアム05-07(セレクタ)

HTML&CSSプレミアム05
セレクタとは、エレメントを選択するための種別エレメントセレクタ、クラスセレクタ、idセレクタ、グループセレクタ、子孫セレクタ、サブエレメントセレクタ(最も一般的なセレクタ)......
要素セレクタの例:

body{
    text-align: center;
    padding: 0;
    margin: 0
}

クラスセレクタ

.right{
    width: 600px;
}

rightはhtmlで規定されています.

section class="right">    </section>

IDセレクタ

#p1{
    font-size: 20px;
    color: orange;
}

ID値もHTMLで規定されており、唯一です.

<p id="p1">      p>

汎用セレクタは、Webページ上のすべての要素のスタイルを指定します.

*{
    font-size: 14px;
}

HTML&CSSプレミアム06(派生セレクタ)グループセレクタに複数のセレクタの下に同じ属性がある場合は、1つのグループセレクタと書くことができます.例えば、headerとsectionは同じ枠線属性を持っていて、以下のコードに書くことができて、簡素で、メンテナンスしやすいです.

header,section{
    border: 1px solid #ccc;
}

子孫セレクタ「.right>header」とは、クラスセレクタrightの直接サブエレメントheaderエレメントを意味します.

.right > header{
    border: none;
    border-bottom: 1px solid  #ccc;
}
.right > section{
    height: auto;
    border:none;
}

HTML:

    <section class="right">
        <header>    header>
        <section>         section>
    section>

セレクタの優先度セレクタには優先度があります.コードに2つのセレクタが異なるスタイルを定義しているが、同じ要素に追加されている場合、ブラウザはレンダリングするスタイルを知る必要があります.優先順位ソート:インライン>id>クラス>ラベル(要素セレクタ)>擬似クラス>ワイルドカード(汎用セレクタ)
HTML&CSSプレミアム07擬似クラスセレクタ擬似クラスは、既存の要素がある状態にある場合に、ユーザーの動作に応じて動的に変化する対応するスタイルを追加するために偽造されたクラスと理解できます.
":hover"ダミークラスマウスが止まるときにこのスタイルを使用します:CSS:

.div-square{
    width: 200px;
    height: 200px;
    background-color: #06f;
    color: #fff;
}
.div-square:hover{
    background-color: #f60;
}

HTML:

    <div class="div-square">        divdiv>

":active"擬似クラスはマウスを押したときにこのスタイルを使用します.
「:last-child」という擬似クラスの役割は、現在のセレクタで選択されている要素グループの最後のものを指します.

.list{
    width: 200px;
    list-style: none;
    border:1px solid #ccc;
    padding: 0;
}
.list li{
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.list li:last-child{
    border:none;
}

HTML:

<ul class="list">
        <li>01.javascrptli>
        <li>02.pythonli>
        <li>03.javali>
        <li>04.C  li>
        <li>05.androidli>
    ul>
body>

「:first-child」という擬似クラスの役割は、現在のセレクタで選択されている要素グループの最初のものを指します.
擬似要素擬似要素は偽造要素とも言え、擬似要素はページに表示されますがdomツリーには表示されません.htmlではなくcssで作成された要素とも言える.

.div-square:before{
    content: "      ";
    display: block;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

div-squareという要素の前に新しい要素を追加します.
beforeもあれば、自然にafterもあります.