WEB遠位-cssセレクタ（CSS背景）

交差点セレクタ

セレクタは、最初のタグセレクタである、2つのセレクタの交差によって構成され、第2のセレクタは、クラスである
注記：使用は推奨されない、比較的小さいです。

h3.title{color:red;}

标签下的类名：h3标签下类名叫title

そして、セットセレクタ

選択されたスタイル定義の一部同一又は部分的に同一とは、同一のCSSスタイル定義にセレクタを使用して設定することができれば

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

子要素セレクタ

サブ要素セレクタ：子要素と呼ばれる親クラスを持つ要素

.demo > h3 {color: red;}   类名demo下的子标签h3标签

属性セレクタ

特定の特別な特性を有するタグを選択するセレクタ

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }

<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>

擬似要素セレクタ（CSS3）

E ::最初の単語または（など中国語、日本語、韓国語、など）テキストの最初の文字の単語
E ::テキストの最初の行の最初の行。
E ::選択は、選択したテキストのスタイルを変更することがあり、
E ::和Eの前に::後
要素のEビット内の要素の最初と最後に作成された、要素は、インライン要素であり、及びコンテンツ属性の使用と組み合わされなければなりません。

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}
div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

CSSの背景

透明な背景（CSS3）

CSS3のサポート背景半透明の文言の構文は次のとおりです。

background: rgba(0,0,0,0.3);

最後のパラメータは、0から1までのアルファ透明度範囲の間であります

注：背景が半透明、半透明の背景ボックスを意味し、ボックス内に影響コンテンツを受信しません。

背景スケーリング（CSS3）

私たちは、IMGのサイズを設定すると、背景のサイズ背景画像のサイズを設定することで、などのモバイルWebアプリケーションの開発に非常に大規模な画面適応を行います。

次のようにそのパラメータは次のとおりです。

A）長さの単位は（PX）またはパーセンテージボックスの幅及び高さを基準とした（パーセンテージセット）を設けてもよいです

b）のカバーにセット、それが自動的にオーバーフロー部分が隠される場合、画像は常に背景領域を埋めていることを確認するために、ズーム比を調整します。我々は通常のカバーを使用するほとんどの

c）の設定が自動的に写真が常に完全にバックグラウンド領域に表示されていることを保証するために、含むようにズームを調整します。

background-image: url('images/gyt.jpg');
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */

マルチバックグラウンド（CSS3）

カンマで区切られた複数インスタンスを提供することができる適応アプローチは同じカンマで区切られているため、レイアウトを使用することができます。

要素は、複数の背景画像を設定することができます。
各属性の間にカンマで区切って指定します。
複数の背景のセットとの交点（すなわち、重複関係がある）がある場合、背景の前に、図の背景の上にオーバーレイされます。
背景色画像を覆う回避するために、背景色は、通常、最後のグループで定義され、

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

エンボスレタリング

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }

        </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>

CSS 3つの特徴

のCSSカスケード

いわゆるスタックは、複数のCSSスタイルの重ね合わせを指します。
通常の状況下では、CSSの順序に従って、最終的なスタイルの対象。

スタイル紛争は、以下の原則は、近接の原理です。

CSSの継承

CSSスタイルシートを書くときに、いくつかのサブラベルスタイルタグは、テキストの色やフォントサイズなど、親を継承することを意味し、継承、いわゆる
注：子要素が親要素（テキストベース、font-、ライン-これらの要素のの初めのスタイルを継承することができます継承し、色属性することができます）

CSSの優先順位

重量0のスタイルを継承する権利。入れ子構造に関係なく、スタイルのヘビーウエイトの親要素の多くは、キルトの要素を継承したときに彼の重みがゼロで、子要素定義されたスタイルが継承されたスタイルを上書きすることを意味しますがしていること。
インラインスタイルが優先されます。スタイル属性の要素の適用は、その右の列重みのスタイルは非常に高く、100よりもはるかに大きいが理解することができます。要するに、彼は上記セレクタが大きな優先順位よりも上昇しています。
重みは同じ、CSSは、近接の原則に従っています。それは近い最大の優先順位を持つスタイル要素にある、またはそれが最大の優先事項スタイルの決勝で来ました。
CSSは、コマンドが最大優先され、重要！コマンドを定義します。右の位置との距離スタイルが,!重要なのは、最も高い優先順位を持っているかに関係なく重いこと。

CSSの特殊性（特異性）

CSSの重みについては、私たちが行ったり来たり計算する式を必要とする、これはCSS特異性である、我々はCSSのプロパティと呼ばれるか、異常な自然と呼ばれる次のように、それは、コンクリートにCSS標準仕様の優先順位の値の尺度です。

左から右の値に、より多くのような4つのレベルを示すために4桁の数字列（CSS2が3である）を用いて特異性、最大ではない二進数の間ではなく、レベルの間、1より大きいを残し超えました。

*継承や貢献度の値	0,0,0,0
各要素（タグ）の寄与であります	0,0,0,1
各クラス、擬似クラスの寄与値	0,0,1,0
各ID値の貢献	0,1,0,0
各行のスタイル寄与	1,0,0,0
各！重要な貢献値	∞無限大

重量が重畳することができます

例：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

总结优先级：

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。

注意： 
继承的 权重是 0
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0。