CSSの研究ノート--cssセレクター

CSS1定義セレクタ

タイプセレクタ

要素の指定されたタイプを選択するために次のように一般的に使用される、（実際には、彼は、HTMLタグセレクタです）。

body {
    /*对 body 元素定义样式*/
}

body,div {
    /*同时选择多种标签元素*/
}

IDセレクタ

次のように指定したIDのHTML要素を選択するために、一般的な使用法は次のとおりです。

<div id="nav">
    
</div>

<style>
    #nav {
        /*定义 ID 为 nav 的元素的样式*/
    }
</style>

因为 CSS 的渲染顺序是从右往左进行渲染的，而 ID 则是全唯一的，那么就可以省略掉前面的类型选择器。

クラスセレクタ

次のようにクラス名によってhtml要素を選択するために、一般的な使用法は次のとおりです。

<div class="nav">
    
</div>

<style>
    .nav {
        /*定义 class 为 nav 的元素的样式*/
    }
</style>

これはセレクタを含みます

次のように選択レベルのネストされた要素は、一般的な使用です。

<div class="nav">
    <div class="nav-tools">
        
    </div>
</div>

<div class="nav">
    <div>
        <div class="nav-tools">
        
        </div>
    </div>
</div>

<style>
    .nav .nav-tools {
        /*定义元素的父级元素 class 包含 nav，且子元素class 包含 nav-tools 的元素*/
    }
</style>

需要注意的是：包含选择器不关心层级，只要后面的选择器是被包含在前一个元素中的即可。如上述例子，两个 nav-tools 都会被选择器选中！

疑似クラスセレクタ

：Link--リンク擬似クラスセレクタ

次のようにアクセス可能なスタイルは、リンクの状態を定義するために使用されていない、一般的な使用法は次のとおりです。

<div class="nav">
    <div class="nav-tools">
        <ul>
            <li><a href="#"></a></li>
        </ul>
    </div>
</div>

<style>
    a:link {
        text-decoration: none;
        color: blue;
    }
</style>

：Visited--リンク擬似クラスセレクタ

次のようにリンクがアクセスされたスタイルを定義するために使用され、一般的な使用法は次のとおりです。

<style>
    a:visited {
        text-decoration: none;
        color: red;
    }
</style>

：Active--ユーザは、擬似クラスセレクタを操作します

次のようにアクティブ化されたスタイル要素を定義するために使用され、一般的な使用法は次のとおりです。

<style>
    a:active {
        text-decoration: none;
        color: green;
    }
</style>

：Hover--ユーザは、擬似クラスセレクタを操作します

マウスが要素は、一般的に使用されているのスタイルを定義するために使用された後、次のとおりです。

<style>
    a:hover {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>

：Focus--ユーザは、擬似クラスセレクタを操作します

フォーカスを取得するスタイル要素を定義するために使用され、次のように、一般的な使用法は次のとおりです。

<style>
    input:focus {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>

::最初の行

次のように定義されたテキスト要素のための最初の行を使用するスタイル共通：

<div class="doc">
    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</div>

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-line {
        color: red;
    }
</style>

:: =最初の文字

次のように要素の一般的な使用の定義の最初の文字のスタイルは、次のとおりです。

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-letter {
        font-size: 2em;
        color: red;
    }
</style>

CSS2セレクタで定義されています

* - ワイルドセレクタ

次のようにDOMの一般的な使用のすべての要素のための一般的なスタイルが定義されています。

<div class="nav">
    <div>
        <div class="nav-tools">
        
        </div>
    </div>
</div>

<style>
    .nav * {
        margin: 0;
    }
</style>

如果要重置默认样式的话，不建议使用通配选择器

[属性] - 属性セレクタ

属性は、スタイル属性要素は、以下のように一般的に使用される要素が含まれて定義するために使用されます。

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active>Menu</li>
                <li>Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li[active] {
        color: red;
    }
</style>

[属性=「値」] - 属性セレクタ

次のようにスタイルプロパティの値は、一般的な用途指定されている要素を定義するために使用されます。

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="active">Menu</li>
                <li active>Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li[active="active"] {
        color: red;
    }
</style>

[属性〜= "値"] - 属性セレクタ

次のような値を定義するために指定された属性は、一般的な使用に空間および要素の性質によって分離含むことです。

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li[active~="active"] {
        color: red;
    }
</style>

前述したように、最初の李フォアグラウンドカラーの赤が定義されます！

[属性| = "値"] - 属性セレクタ

属性が指定された値を定義するために使用され、ハイフン含まれる（ - ）次のように一般的に使用されるリンクされた属性値を、。

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li[active|="active"] {
        color: red;
    }
</style>

上記のように：第二のLiのみフォアグラウンド色が赤のように定義されます！

まず-child--構造疑似クラスセレクタ

次のように一般的な使用の要素を定義するためのスタイルの最初の要素は次のとおりです。

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    li:first-child {
        color: red;
    }
</style>

注意 :first-child 是作用于同级，且相同标签的第一个元素。如上所示，如果要定义第一个 li 的样式，那么久需要使用 li:first-child，而不是 ul:first-child!

：ロング（1）

属性は、LANG =次のように一般的に使用される「エン」のスタイル要素を定義するために使用されます。

<div>
    <p lang="en">Hello World</p>
</div>

<style>
    p:lang(en) {
        color: red;
    }
</style>

：：前

次のようにコンテンツとスタイルの前に要素を定義するために、一般的な使用法は次のとおりです。

<div>
    <a>World</a>
</div>

<style>
    a::before {
        content: "Hello ";
    }
</style>

::後

要素がコンテンツとスタイルを定義するために使用された後、次のように、一般的な使用法は次のとおりです。

<div>
    <a>Hello</a>
</div>

<style>
    a::after {
        content: "World";
    }
</style>

div>のP

次のように一般的な方法で、要素を定義するための第1のレベルのサブエレメントの形式：

<div class="nav">
    <div>
        <div class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </div>
    </div>
</div>

<style>
    .nav-tools > ul {
        background-color: red;
    }
    .nav-tools > li {
        /*这个不会生效，因为 li 不是 ul 的直接子元素*/
    }
</style>

H1 + P

次のように要素が隣接する要素のスタイルを定義するために使用される、一般的な使用です。

<div>
    <h1>CSS</h1>
    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
</div>

<style>
    h1 + p {
        color: red;
    }
</style>

新しいCSS3の属性セレクタ

[FOO ^ = "バー"]

スタイル属性は、バー要素の先頭に要素を定義するために使用されます

<div>
    <a href="http://www.betterde.com">Betterde Inc.</a>
    <a href="https://www.betterde.com">Betterde Inc.</a>
</div>

<style>
    a[href^="https"] {
        color:green;
    }
</style>

上述したように、リンクは、HTTPSが緑色標識。

[FOO $ = "バー"]

要素は、bar要素の終わりのためのスタイルを定義するための属性

<div>
    <a href="http://www.betterde.com/logo.png">logo.png</a>
    <a href="http://www.betterde.com/style.css">style.css</a>
    <a href="http://www.betterde.com/main.js">main.js</a>
</div>

<style>
    a[href$="png"] {
        background: url(system/filetype/png.png) no-repeat left center;
        padding-left: 18px;
    }
    
    a[href$="css"] {
        background: url(system/filetype/css.png) no-repeat left center;
        padding-left: 18px;
    }
    
    a[href$="js"] {
        background: url(system/filetype/js.png) no-repeat left center;
        padding-left: 18px;
    }
</style>

上記に示したように、ハイパーリンクの識別は、ファイル形式、ファイルタイプのアイコンをリンクし、フロントを追加します！

[FOO * = "バー"]

要素の属性のスタイル定義は、バーの要素を含んで、このバーがあり、長いプロパティ値として3連続した文字が選択されるように、その手段を問わず、どのような組み合わせのこと、これが含まれていることに注意する必要があります！

<div>
    <h1 class="title big full-right"></h1>
    <h2 class="title big full-right"></h1>
    <h1 class="big-title"></h1>
</div>
<style>
    a[class*="title"] {
        color: red;
    }
</style>

上記のように：div要素内のすべての3つの要素が赤いフォントでレンダリングされます！

虽然 CSS3 中任然保留 CSS2 中定义的属性选择器，但是建议使用 CSS3 的属性选择器来替代！

構造擬似クラスセレクタ

：ルート

HTMLタグは、スタイルの要素を定義するために使用されます

：n番目の子（N）

サブ要素のスタイル定義が、Nいくつかのサブ要素を示す第1です。nは番号またはキーワード奇数、偶数または公式ことができます。次のように一般的な使用法は次のとおりです。

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:nth-child(even) {
        background-color: red; 
    }
</style>

：n番目の最後-子（N）

そして、：n番目の子（n）は同じを使用しますが、前後の順序にあります！

：n番目の型（N）

同一の要素は、以下のように一般的に使用されるn個の要素のスタイルを定義するために使用されます。

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:nth-of-type(even) {
        background-color: red; 
    }
</style>

：第n-最後の型（N）

そして、：n番目の-の型（n）が同じ使用しますが、前の順序に帰ってきました！

：最後の子

次のように一般的な使用の定義の最後の要素のスタイルは、次のとおりです。

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:last-child {
        background-color: red; 
    }
</style>

：第一の型

同じ効果をn番目の型（1）：第一の要素は、同じタイプの要素のパターンを定義し、そして

：最後の型

次のようにスタイル定義要素の同じタイプの最後の要素は、一般的に使用されます：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:last-of-type {
        background-color: red; 
    }
</style>

：一人っ子

次のように、同じタグを持つ要素を定義し、開発するためのサブ要素は、一般的な使用です。

<div>
    <h1>Hello</h1>
</div>

<style>
    h1:only-child {
        /*如果 div 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
    }
</style>

：のみ-の型

それが唯一の先進スタイルの要素を定義するために使用されるラベル、次のように、一般的な使用は含まれています：

<div>
    <h1>Hello</h1>
</div>

<style>
    h1:only-of-type {
        /*如果 div 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
    }
</style>

：空の

スタイル要素は任意の要素が含まれていない定義するために使用され、次のように、一般的な使用法は次のとおりです。

<div>
    
</div>

<style>
    div:empty {
        display: none;
    }
</style>

その他の新CSS3セレクタ

E〜F

スタイルは、兄弟要素を定義するための一般的な方法を使用するなど、次のとおりです。

<div>
    <p>Hello</p>
</div>
<p>CSS</p>

<style>
    div ~ p {
        color: red;
    }
</style>

div 元素中的 p 不会被渲染为红色字体，只有跟 div 是同级的 p 才会被渲染为红色！

：ない（S）

次のように一般的に使用される、Sによって指定指定された要素、およびフィルタ要素セレクタを定義するために使用されます。

<div>
    <p class="red">Hello</p>
    <p class="blue">World</p>
    <p>Welcome!</p>
</div>

<style>
    p:not(.red) {
        color: blue;
    }
</style>

注意：s 是一个简单的结构选择器，不能使用复合选择器，该选择器只匹配第一个复合条件的元素。如上所示，最后一个 p 不会被渲染为蓝色！

：目標

次のようにアクセスされたスタイルチェーンを定義するために使用され、一般的な使用法は次のとおりです。

<div>
    <div id="text-one">
        <p>这是第一个文本段</p>
    </div>
    <div id="text-two">
        <p>这是第二个文本段</p>
    </div>
</div>

<style>
    div:target {
        color: red;
    }
</style>

注意：当我们激活锚链时（url中包含 #text-one 或 #text-two），对应的 div 内的元素字体会被渲染为红色！

CSS3 UI擬似クラスステータスセレクタ要素

：有効

スタイル要素を定義するために有効にすると、以下のように、一般的な使用法は次のとおりです。

<div>
    <input type="text">
</div>

<style>
    input:enabled {
        background: #ffff00;
    }
</style>

注意：元素默认状态为 enabled

：無効

次のように要素がスタイル無効状態を定義するために使用され、一般的な使用法は次のとおりです。

<div>
    <input type="text" disabled="disabled"/>
</div>

<style>
    input:disabled {
        background: #dddddd;
    }
</style>

：チェックします

スタイルは、要素は以下を選択した場合の一般的な定義を使用します。

<div>
    <form>
        <input type="checkbox" />
    </form>
</div>

<style>
    input:checked {
        color: green;
    }
</style>