CSS属性セレクタ
[]：属性セレクタ
試合の始め^ =
1a[href ^= "page2"] {
2 color: green;
}
<p>
<a href="page2/1.html">page2/1.html</a>
</p>
マッチ$の終わり=
<p>
<a href="page2/1.html">page2/1.html</a>
</p>
/*结尾匹配*/
a[href $= "page2"] {
color: green;
}
* =いずれかに一致
<p>
<a href="page2/1.html">page2/1.html</a>
</p>
/*任意匹配*/
a[href *= "page2"] {
color: blue;
font-weight: bold;
}- HTML5は、それがデータ - で始まる必要があり、プロパティをカスタマイズすることができます
- ダッシュ試合：| =
- パケットが一致します〜=
息子シーケンス選択
すべての人の息子の古い要素のいくつかを選択します。懸念は、すべての点であるの息子総合ランキング
：まず、子長男
：最後の子の最後の息子
：N番目の子（n）は、n型の息子
：N番目の子（+ b）は、連続する複数の
：N番目-最後の子（n）は、nの逆数を表し、
息子型配列セレクター
いくつかの要素に古いタグタイプの息子のすべての同じ種類を選択します。同じ種類のことが懸念されるラベルの息子でランキング
：長男の同じ種類の最初の-の型タグ
：最後の息子の同じ種類で最終-の型タグ
：N番目-の型（n）は、n型の息子アイソタイプタブ
：N次の型（+ B）連続タグの同じ種類の複数の
：第N-最後の型は、（N）のラベル逆数の同じ種類を表します
息子シーケンスセレクタ と、その1つのセレクタに区別息子型配列タグアイソフォームの複数を制御する単一ラベル制御要素
関係ノードセレクタ
DIVのP {}
>：子セレクタは、他の唯一の息子の子孫要素を選択することはできませんノードを選択します
+：最初の兄弟の後に
〜：すべての兄弟の後ろ
/*> 只能选中儿子节点*/
.box > p {
color: red;
}
/*+ 后面第一个亲兄弟*/
h3 + p {
color: green;
font-weight: bold;
}
/*~ 后面所有的亲兄弟*/
h3 ~ p {
color: blue;
}
疑似クラス
1. ホバーは、いずれかを持っています
：ホバー擬似クラスホバー
2 形式の擬似クラス
：チェック擬似クラスが表す選択されたタブは、スタイルを変更するために選択されています
：フォーカスは、チェックボックスに共通の焦点擬似クラスを取得します
input:focus {
/*外轮廓*/
outline: none;
border: 1px solid red;
}：無効使用形態擬似グレー不変クラス
：有効擬似クラス利用可能なフォームを書くことはできません書き込むために使用することができます
擬似ノードクラス
：選択した要素の唯一の子は、特定の要素の唯一の子でなければなりません
：空の空のノードの擬似クラス
擬似要素
::前の元のコンテンツに明確な前に浮かんで共通の増加
私たちは、コンテンツを設定する必要があります。コンテンツの書き込みのプロパティの値を大きくします
行内元素
:: した後、元のコンテンツの後に追加
我々は、インライン要素をコンテンツプロパティを設定する必要があります
应用：清除浮动
::after{
content:" ";
display:block;
clear:both;
}
或者在文字加入小圆点改变颜色都可以使用
box ul li a::before {
2 /*必须设置content*/
3 content: "";
4 /*行内元素 不能设置宽高
5 1小圆点设置宽高
6 2位置便于调整
7 定位
8 */
9 position: absolute;
10 left: 10px;
11 top: 20px;
12 width: 10px;
13 height: 10px;
14 border-radius: 50%;
15 background-color: #eee;
16}
17 .box ul li a:hover {
18 color: orange;
19}
20 .box ul li a:hover::before {
21 background-color: orange;
}
<div class="box">
<ul>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
<li><a href="">新闻新闻新闻新闻新闻新闻</a></li>
</ul>
</div>
他の擬似要素
::最初の文字の最初の文字
テキストの::最初の行の最初の行
効果を選択する::選択マウス
丸みを帯びました
ボーダー半径
/ *半円：限度を設定しないいくつかの丸い縁が短辺とすることができるすべての* /
方法を設定半円
境界半径：200pxの200pxの0。
また、設定することができます
- ボーダー-左上半径：
- border-top-右半径：
- border-bottom-左半径：
-
border-bottom-右半径：
シャドーボックス
右オフセット
オフセット
ブラー半径
拡張の量（省略）
カラー
インナー影：インセット
文字阴影/*没有内阴影和延伸量*/
text-shadow: 0 0 0px rgba(255,0,0,.5);box-shadow: 5px 10px 10px 10px rgba(0,0,0,.5);影要素の複数のカンマで区切られ、同時に提供することができます
/*多个阴影使用逗号隔开*/
3 box-shadow: 0 0 5px rgba(255,0,0,.9),
4
5 5px 5px 5px rgba(0,255,0,.5);6 }
シャドウ（内側）
1 .no3 {
2 box-shadow: inset 5px 5px 5px rgba(255,255,0,.5);3 }
背景
背景の起源：コンテンツ・ボックス;からボックスの内容レンダリングを開始するコーナーを左上
背景位置：背景に対してオフセットは、原点の位置を表し 、一般的に垂直に使用してバックグラウンド結合位置を中心に達成される効果を
.box {
width: 300px;
height: 300px;
padding: 50px;
border: 50px solid #000;
background-image: url(images/baby.png);
background-repeat: no-repeat;
/*内容盒width*height*/
background-origin: content-box;
color: red;
background-position: 0 0;
}
背景クリップ：コンテンツ・ボックス、背景のみのコンテンツボックス領域を残して、他のバックグラウンドカットオフ背景領域を示す切断
.box2 {
width: 300px;
height: 300px;
padding: 50px;
border: 50px solid #000;
background-image: url(images/baby.png);
background-clip: content-box;
}
背景サイズ：幅と高さ、背景サイズ
訓練は、背景のサイズを決定するために、ピクセル境界maginパディング幅とボックス自体の高さを使用することができます
あなたもやって割合を使用することができます
背景サイズ：カバー1つの背景2背景不完全表示することができなくなる白地領域3を変形しない（可能な限り大きく、カバー）カバー
.box6 {
width: 300px;
height: 400px;
padding: 50px;
border: 50px solid #000;
color: red;
background-image: url(images/baby.png);
background-repeat: no-repeat;
/*大背景区域4:5 背景图1:1*/
background-size: cover;
}
不留白占整个盒子但是图片会变形背景サイズ：完全な領域は空白のままにしてもよい示す1つの背景2は、いくつかのバックグラウンド・コンテキスト3は修正されない含む（受信全て表示）含まれ
.box7 {
width: 300px;
height: 400px;
padding: 50px;
border: 50px solid #000;
color: red;
background-image: url(images/baby.png);
background-repeat: no-repeat;
/*大背景区域4:5 背景图1:1*/
background-size: contain;
}
图片完整但是可能会留白
背景位置決め背景位
背景リピート：なし繰り返し、そうでない場合タイルタイル
背景アタッチメント：卷动
あなたは、背景画像をロードする際に直面したスプライトがある場合は、バックグラウンドを半分半分マージントップの位置で親ボックスセットボックスの幅と高さに高い子に限定することができます
背景画像により得られた勾配背景
背景画像：-webkit-線形勾配（勾配開始方向、グラデーション色、グラデーション色）
異なるブラウザの互換性ChromeとSafariの-webkit-
Firefoxの-moz-
すなわち-ms-
仕事-O
第一引数：漸次開始方向
その他のパラメータ：グラデーションの色は、書き込みは、カンマで区切られた、より多くのことができます
色は、色の位置を指示する全体勾配に表示され、パーセンテージの後ろのスペースで分離されていてもよいです
1 .box1 {
2 width: 200px;
3 height: 200px;
4 border: 1px solid #000;
5 background-image: -webkit-linear-gradient(top,red,green);
6 background-image: -moz-linear-gradient(top,red,green);
7 background-image: -ms-linear-gradient(top,red,green);
8 background-image: -o-linear-gradient(top,red,green);
9 background-image: linear-gradient(top,red,green);10 }
そして、より多くの背景
カンマで区切られた背景をレンダリングすることができる複数の要素は、他の単一の属性はコンマで区切られ、対応背景
background: url(images/baby.png) content-box,
url(images/xiaoming.png);
/*单一属性也是逗号隔开*/
background-repeat: no-repeat, no-repeat;
background-size: 100px 100px,cover;
トランジション効果
遷移：遷移特性（すべての） 遷移完了時間（S） バッファディスクリプタ（線形、均一な不均一を緩和する） 遅延時間（0秒ユニットが提供されなければならない場合）
ベジェ立方ベジェ不均一
ドライジャンプは直接影響を与えるプラス：ホバー
遷移プロパティ：プロパティの移行
遷移期間：遷移時間
遷移タイミング機能：バッファディスクリプタ
遷移遅延：遅延時間
/*过渡
8 第一个参数：参与过渡属性 all
9 二：时间，单位是s
10 三：缓冲描述 linear匀速 ease非匀速 贝塞尔曲线
11 四：延迟时间，单位是s,如果是0s也必须设置单位
12 */
13 /*transition: width 1s linear 0s;*/
14 transition: all 1s linear 0s;
15 transition: all 1s cubic-bezier(0.14, 1.1, 0.82, -0.04) 0s;
16 }
例グラデーション背景ボタンボタン
.btn {
/*行内元素*/
display: block;
width: 250px;
height: 60px;
border: 1px solid #000;
margin: 50px auto;
border-radius: 5px;
/*先设置背景图在设置渐变*/
background-image: url(images/paopao.png), -webkit-linear-gradient(top,#67BCFD,#1979C4);
text-align: center;
line-height: 60px;
font-size: 30px;
color: #fff;
/*过渡*/
transition: all 1s linear 3s;
}
/*background-position可以参与过渡*/
.btn:hover {
background-position: right bottom;
}結果の表示
2D変換
変換：変形を
回転変換：回転（数度）;正の時計回り方向
.box:hover img {
/*旋转*/
/*一周360deg 可以超过*/
/*transform: rotate(400deg);*/
}ズーム変換：1スケール（1）0-1大きな無限に狭いです
.box2:hover img {
/*缩小0-1*/
transform: scale(0.5);
/*放大1-*/
transform: scale(1.6);
}列のケース
.box2 {
width: 200px;
height: 200px;
background-color: lightblue;
/*border-radius: 50%;*/
border: 1px solid #000;
overflow: hidden;
}
.box2 img {
/*一个元素可以有多个变形 用空格隔开*/
display: block;
transform: rotate(30deg) scale(1.3);
transition: all 1s linear 0s;
}
.box2:hover img {
/*没有变形*/
transform: none;
}マイター変換：傾き（水平度、垂直度）
.box3:hover img {
/*斜切（水平，垂直）*/
transform: skew(50deg,0);
transform: skew(0deg,50deg);
}
モバイルスペース変換：標準ストリームのホームポジションを翻訳（水平ピクセル、縦ピクセル）
絶対位置の相対位置から浮動位置付ける標準ストリーム変換：標準ストリームを翻訳
アプリケーション：絶対位置を水平方向にセンタリングされます
|