进击のpython
フロントエンド学習--cssセレクタ
各CSSスタイル宣言は次の2つの部分で構成されています。
选择器{
样式；
}CSSのセクションの「セレクタ」、「セレクタ」は、{}オブジェクトの前に「スタイル」{}アクションを示しています
Webページの役割の「スタイル」のことどの要素
基本および高度なセレクタセレクタ：その選択を分けします
財団セレクタ
タグセレクタ
HTMLタグの名前が示唆するセレクタコードラベルであります
私たちは、HTML、身体、ラベルのHシリーズ、P、DIV、IMG、およびを学ぶ前に、私たちは、対応するCSSスタイルプロパティを設定するには、タグセレクタを使用することができます
むしろ、特定の要素の内容よりも、ページのすべての要素を選択することができますので、選択したページには、属性に共通しています
栗の場合：ページサイズのため、すべての段落の設定は12ピクセルで、フォントの色は赤、フォントの太さが厚くなっています
p{
color:red;
font-size:12px;
font-weight:bold;
}IDセレクタ
誰もがIDカードを持っているようIDは、すべての人のID番号のようなもので、ID番号が同じではありません
だから、ページ上のすべてのラベルは、IDを設定することができ、およびIDを繰り返すことはできません
#ID选择器名称{
css样式代码;
}注意：
1、＃で始まります
IDセレクタ名は任意に（中国をプレイしないことをお勧め）と命名することができる2、
3. IDの名前は一意である必要があります
4、数字で始めることはできません
IDは、ページのセレクタ素子固有の特性により選択されます
私はそれだけではタグセレクタが死ぬことは明らかである、私は、あなたが紫色になっている、希望します
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
color: red;
}
#span1, #span2 {
color: purple;
}
</style>
</head>
<body>
<p>
<span>百因必有果！</span><span id="span1">你</span>的报应就是<span id="span2">我</span>!
</p>
</body>
</html>クラスセレクタ
クラスセレクタは、IDと幾分類似しており、任意のラベル要素を追加することができるクラス（クラス）
しかし、異なるクラスは、「分類」という概念を繰り返すことができること、および同じラベルが複数のクラスを運ぶことができる、スペースで区切っ
このような犬、猫のように、ハリネズミは、プリンタクラスに属する動物、黒と白のプリンタやカラープリンタに属し
そのようなWebページと同じ条件の下では、このようなP、李、ラベルなど、いくつかのラベルは、アクティブの同じクラスに属します
その後、我々はここに表すことができ<p class='active'></p>、次の構文を：
.类选择器名称{css样式代码;}注意：
1、英語がドットで始まります
クラスセレクタ名は任意に（中国を再生しないように最善の）名前を付けることができます2、
3、数字で始めることはできません
クラス追加するために繰り返すことができ、同じクラスラベルを複数追加することができるので
だから我々は、でなければならないクラスセレクタを使用して使用公共类する概念
例えば：
例えば、3つの同一のテキストがあります
<p>同仁堂</p>
<p>同仁堂</p>
<p>同仁堂</p>今需要がある、最初のTongrentangは、テキストの色が緑色である必要があり、フォントサイズが20ピクセルであります
TRT 2番目のテキストの色とテキストは緑の厚さより厚いです
第Tongrentangデフォルトのテキストの色は黒とテキストのフォントサイズおよび厚さより厚いも20ピクセルであります
私たちが書くためにIDセレクタを使用している場合、我々はコードを見てください。コードは以下の通りであります：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#p1{
color:green;
font-size:20px;
}
#p2{
color:green;
font-weight:bold;
}
#p3{
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<p id='p1'>同仁堂</p>
<p id='p2'>同仁堂</p>
<p id='p3'>同仁堂</p>
</body>
</html>私たちは公共のクラスの概念を持っている場合、我々は需要によって見つけます：
P1、P2は、パブリックプロパティフォントの色が緑色である持っています
P1とP3は、フォントサイズは20ピクセルであるパブリックプロパティを持っています
P2、P3がパブリックプロパティフォントの太さが厚くなってい
次のようにその後、我々は、各pに対して、対応するクラスラベルを設定することができます。
<p class="lv big">同仁堂</p>
<p class="lv bold">同仁堂</p>
<p class="big bold">同仁堂</p>CSSコード：
<style>
.lv{
color:green;
}
.big{
font-size:20px
}
.bold{
font-weight:bold;
}
</style>その後、クラスの大幅より効率的な使用を見出す、効果的にいくつかの冗長コードを減らすことができます
シニアセレクタ
子孫セレクタ
名前が示すように、いわゆる子孫は、（子、孫、ひ孫などを含む）すべての子孫の父であります
div p{
css代码样式;
}使用スペースは、子孫セレクタは、上記のdivは親要素で表し表し、pはdiv要素の子孫であります
それが来るとき、私たちはdivタグを説明する前にdivが何かを保持できるコンテナです
このように、私たちは次のようになります。私たちのHTML構造を考えることができます。
<div>
<p>Penglin</p>
</div>私たちは、基本的なセレクタを学び終えて、我々はまた、div要素に命名することができます
たとえば<div class="container"></div>、次のコードを記述するためにCSS：
.container p{
color:red;
}つまり、コンテナクラスの下にあるすべてのpタグが赤
子孫セレクタ
子孫は、唯一の彼の父の息子、唯一の自然の息子を表します。使用して、>子孫セレクタを表し、
div>p{css代码样式;}ここでは、使用の子孫セレクタとの子孫セレクタを取得するには、それぞれ、言及する必要があります
3レベルのメニューがあり、二次メニューの各テキストリストの内容が緑に設定されています
<div class="menu">
<ul class="food">
<li>
水果
<ul>
<li>香蕉
<ul>
<li>仙人蕉</li>
<li>西贡蕉</li>
<li>畦头大蕉</li>
</ul>
</li>
<li>苹果
<ul>
<li>红蛇果</li>
<li>烟台苹果</li>
</ul>
</li>
</ul>
</li>
<li>
蔬菜
<ul>
<li>白菜
<ul>
<li>北京青白</li>
<li>山东胶州大白菜</li>
<li>东北大矮白菜</li>
</ul>
</li>
<li>黄瓜
<ul>
<li>春花瓜</li>
<li>架黄瓜</li>
<li>北京刺瓜</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
あなたが子孫セレクタを使用している場合は、おそらく一部の学生は、節約のために、書くことができます
直接ul li{color:green;}我々はすべてのリストが緑色になっていることがわかります
子孫要素李UL、メニューレベルの両方の選択リストから、需要を満たしていません
そして、のリストは、二次メニューを選択し、レベルのメニューを選択します
私たちは、子孫のセレクターを使用している場合、我々は、ここでCSSのコードを書くことができ、次のようにCSSのコードがあります
.food>li>ul>li{
color:red;
}
3つのメニューも赤くなっわかります、これはプロパティの継承CSSが原因によるものである、我々は後で説明します
ユニバーサルセレクタ
ユニバーサルセレクタは、その役割を示すために*番号を使用して最も強力なオプションは、すべてのHTMLタグ要素と一致することです
それを使用して、我々は、製品が対応するWebページを開発する必要が従ってページのスタイルをリセットすることができます
赤のすべてのテキストの設定ページ：
*{color:red;}コンビネーションセレクタ
あなたは、HTML要素に複数のタグに同じスタイルを設定したい場合には
私たちは、同じクラスを追加すると思うが、Webページなどのラベルであれば非常に多くのでしょうか？
効率を開発することは容易ではない、それは私たちの累積仕事になった、同じクラス名を追加していません
だから我々は、次の構文を選択するために、セレクタの組み合わせを使用することができます。
例えば、ウェブページH1、スパン、Pフォントタグセット色：グレー;フォントサイズ：14px;
h1,span,p{
color:red;
font-size:14px;
}比較します
タグセレクタ：
h1{
color:red;
font-size:14px;
}
span{
color:red;
font-size:14px;
}
p{
color:red;
font-size:14px;
}クラスセレクタ：
.active{
color:red;
font-size:14px;
}
<h1 class='active'></h1>
<span class='active'></span>
<p class='active'></p>疑似クラスセレクタ
さらに興味深い擬似クラスセレクタは、例えば、我々は、HTMLタグ要素与えるされたロールオーバー状態をフォントの色を設定します
a:hover{
color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器的使用</title>
<style type="text/css">
a:hover{
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
ホバーで使用される単なるラベルよりもさらに、「愛憎のガイドライン」に続く、マウスのサスペンションは、いわゆる憎悪は、「愛のHATE」であります
/*没有被访问过a标签的样式*/
a:link {
color: green;
}
/*访问过后a标签的样式*/
a:visited {
color: yellow;
}
/*鼠标悬浮时a标签的样式*/
a:hover {
color: red;
}
/*鼠标摁住的时候a标签的样式*/
a:active {
color: blue;
}注意：ページに使用し、しなければならないためにリンク - > visited->ホバー>アクティブ
ホバーため、それだけでなく適用することができ、それは等DIV、P、リチウム、などの他のタグにも使用することができます