このビデオでは、CSSAセレクターの問題セットの解決策を説明します。
そして、私はすべての問題を上から順に説明します。
あなたが問題を抱えているのが1つか2つしかない場合は、早送りをしてください。
最初のビデオで最初のものを一緒にして、ボディエレメントにこの色の背景を与えました。
だから、体の背景は私たちのために保存されている色です。
先に進んでブラウザの最新表示にロードして、灰色の背景が表示されていることがわかります。
したがって、次の要素はH要素をこの色にします。
バックグラウンドではなく、同じことが、私たちはただ色づけしただけです。
我々はinheresまたはH-1を保存すると紫色に変わります。
ページに複数のH-1がある場合は、すべてが紫色になることを忘れないでください。
この次はH-2要素をすべてオレンジ色にします。
上記の2つのセレクタとまったく同じセレクタ。
そしてそれをオレンジ色にするには、オレンジ色のカラーを使用するだけですが、他のカラーシステムを使うこともできます。
彼らはオレンジ色に変わります。
次は、これを横にシフトして、すべての味方の要素を青色にします。
独自の16進数の青を選びます。
そうするために、我々はすべての同盟国を選択し、次に彼らに色を与え、我々は16進の青を行うつもりです。
だから、他の何よりも青い限り、ここに何かを置くことができます。
最初のチャンネルが赤色で、次の2つが緑色であることを忘れないでください。
だから、私たちは少し緑色をして、次に青色の束をやります。
それを保存し、連合国を見てみましょう。あなたは青い光を得ることができます。
だから、すべての段落の背景を黄色に変更してください。
これは、タイプのすべての要素を選択する場所です。
だから、すべての段落は黄色の背景に保存され、私たちは黄色の段落の束を取得します。
次にすべての入力を選択し、3ピクセルの赤い枠線を与えます。
境界線を入力すると、これを行うためのいくつかの方法があります。すべてを一度に行うことができます。
3つの画素が赤く塗りつぶされていると、2つの入力にプレフィックスまたはソリッドの境界線があることがわかります。これを別々に行うこともできます。赤色の境界線は3ピクセルです。
これを行う方がずっと簡単です。
しかし、時には、あなたはJavaScriptを取得するときにこれをしたいと思うことがあります。
1つの部分を更新するだけです。
したがって、ユーザーが何かの上を移動すると、赤い枠線から緑の枠線に変更する必要があります。
さて、色を変えたいと思うかもしれませんし、そのスタイルのままにすることもできます。
だから、私はこれのように残すつもりです。
次に、クラスセレクタに移動します。
だからクラスHelloですべてを与える。
白い背景。
実際には1つのことがあります。
このdiv内のこの最初の段落はクラスです。
こんにちは。
そこで、クラスドットを選択します。
こんにちは背景の白。
そして、ここでこの段落を見ることができます。
それは白くなる。
次は、IDが特別な2ピクセルのソリッドな青いボーダーの要素を与えます。
あなた自身のRを選んでください。 G. 青い。
今度は同じことを今度はドットの代わりにハッシュ・サインやソープを使用してIDの名前をもう一度見ることができます。
そして、2ピクセルの実線のボーダーにピクセルのソリッドを、そしてRにそれを与えたいと思います。 G. 青い。
それで、0赤100緑200青があります。新鮮ならば、この段落の周りに2ピクセルの青い境界線があります。
次は、divs内にネストされた段落をすべて25ピクセルフォントにし、ヒントはこのプロパティフォントDaschサイズ25ピクセルを使用します。
ですから、私たちがここで行う必要があるのは、div内にある段落だけを必要とするすべての段落を選択するのではなく、div内にない段落があることがわかります。
フォントサイズが25ピクセルになることは望ましくありません。
だから私たちはこの子孫のセレクタをdivとし、そのdivの中にすべての段落を使用するので、どのdivにも存在する段落は問題ではありません。どのdivでも段落を選択してフォントサイズを25ピクセルにしますこれらはすべて大きくなることがわかりますが、div内ではない段落がdivの代わりではないため、大きくなることはありません。次に、タイプテキストの入力だけが灰色の背景を持つようにします。
これはセレクタの別のタイプであり、属性に基づいています。
だからあなたがしたい属性は、型がテキストと等しいところを見つけることです。
したがって、基本的には、ここの入力はテキストと同じです。
それで、私たちは、入力を入力してから、中括弧を四角い中括弧で囲みます。
そしてそこにタイプの属性があり、それがテキストと等しいところを探していれば、背景グレーと言うだけです。
そして、ここで下にスクロールして目を覚ますと、灰色の背景が見えます。
あなたがGoogleに行ったすべてのリンクを選択したい場合は、これもまた便利です。
私たちは、Hに基づいて選択します。 F. 他の属性を選択することもできます。
だから次の段落には3番目のdivの中にピンクの背景があります。
だから、これは少し狂ってしまいます。
それでは、HMOを見てみましょう。
ここに3番目のdivがあります。 最初のものがここにあります。
2番目のものがここにあり、3番目のものがここにあり、2つの段落があり、それらの両方を選択してピンクの背景を与えたいとします。
だから私たちが以前にしたことは、ここでは動作しないすべてのdivの中のすべての段落を選択することでした。
私たちがやりたいことは、ページ上の3番目のdiv内のすべての段落を選択することです。
そして、3番目のdivを指定する方法は、end of typeを使用することです。
だから、divとタイプ3と言うでしょう。
だからそれは私たちに3番目のdivを与え、次にそのすべての段落の代わりに、背景をピンク色にしてリフレッシュを保存して二重チェックしてみましょう。
ここに最初のdivがあります。
ここに2番目のdivがあります。
そしてここに3番目のdivがあります。
段落をカーディガンで始めると、私は2番目の段落です。
私たちはカーディガンに行く。
私は2番目の段落です。
次に、この2番目の段落に3番目のdiv内に5ピクセルの境界線の白い枠線を付けます。
だから、これは3番目のdivの中の2番目の段落だけを必要とすることを除いて、非常に似ています。
だからちょうどこれ。
だから私たちは3番目のdivとタイプ3のものを選んだのと同じことをやって、次にすべての段落ではなく、段落と型をします。
そして、我々はそれらを組み合わせることができるように2番目のものを望んでいます。
これは3番目のdivの代わりに2番目の段落を選択し、5ピクセルの白い枠線の境界線に5ピクセルの白い空白を付けたいとします。
そこに行く。
divの2番目の段落には、5つのピクセルの白い枠線があります。
最初のものではありません。
次に、3番目のdiv要素のE-Mを白で20ピクセルフォントにします。
それで、ここはこのE-Mです。ここはクロナットのスケートボードです。
あなたがクラウンを知らないなら、それはとても美味しいです。
おそらく過大評価されるかもしれない。
間違いなく、ニューヨーク市出身のペストリー。
それはドーナツとクロワッサンを持っています。
だから、ここではヒップスターipsumの語彙の代わりに自宅で間違いなく。
そして、私たちはそのE-Mを取るつもりです。そしてそれを白くし、20ピクセルのスワンにするつもりです。
3を選択し、次にE-Mを選択する必要がありました。
前と同じように、3番目のdiv
これにより、すべてのIEMが選択され、ただ1つしかないということが起こります。
しかし、複数ある場合は、最初にE-Mの最初の型やE-Mという段落の代わりに言いたいかもしれませんが、今のところこれをそのまま残しておきます。
そして、我々はそれを白と20ピクセルの色の白とフォントサイズ20ピクセルに色を付けたい。
そして、あなたに思い出させるために、私たちは、フォントやフォントサイズ、そして将来のビデオでは他のことについて話す時間を費やすつもりです。
そこに行く。
それは白で、フォントサイズが変わります。
だから今私はいくつかの私のお気に入りのボーナス練習の上にいる。
物を選択して操作する、より面白い方法をもっとあいまいにするものがいくつかあります。
だから始める。
すべてのチェックボックスに50ピクセルの左マージンをつけて見てみましょう。
50ピクセルの余白を残す必要があります。
したがって、チェックされる要素を選択するセレクタがあります。
そしてそれはちょうどこのように見えます。
それは型のn番目のような擬似セレクタです。
だから私たちが探しているものがチェックされていると言う必要があります。
だから私は、チェックボックスが入力タイプの等しいチェックボックスを覚えているので、チェックされているすべての入力を言うつもりですが、主にラジオボタンだけでチェックできる他の要素があります。
これにより、チェックされているラジオボタンも選択されます。これは今のところうまくいきます。
したがって、この入力コロンがチェックされているように見えます。
そして、私たちがやりたいことは、余白を50ピクセル残して使用することです。
これは、将来のビデオのいくつかでこれを追加したときに起こっていることを少しプレビューしたものです。チェックボックスの左側にスペースを追加すると、移動したものが表示されます。
今私はこれをチェックするとこれがチェックされ、右の50ピクセルに移動します。
チェックを外して左に戻すと
だからそれはチェックされています。
次のもの。
これはおそらく私のお気に入りです。
HMOを変更せずにラベル要素をすべて大文字にします。
だから私はあなたが間違いなくそれを見ることを望んでいると言いました、そして、それは間違いなくこれを超えてしまったからです。
ですから、すべてのラベル要素を選択し、HMOを変更せずに大文字にする方法がわからないとしましょう。
ですから、Googleを立ち上げて検索してみましょう。これは私が以前に間違いなく行ったことです。
そこで上に上がって、検索をしてみましょう。大文字の評価を見ると、最初にポップアップするのは、テキスト変換とテキスト変換です。要素テキストを大文字にする方法を指定しています。
これは、大文字でも小文字でも、各単語が大文字で表示されるようにするために使用できます。
それでは、下にスクロールして構文を見てみましょう。
資本家の最初の文字は大文字と小文字になりますか？
だから、大文字が欲しい。
したがって、テキストは大文字に変換されます。
私はちょうどあなたに何かを見せてくれるだけではなく、実際に私が何かをしていることを見ているだけでなく、Googleの型入力に行くようになっています。
そして、私は検索結果を見ます。なぜなら、思い出すことができるプロパティがたくさんあるからです。
それらのすべてを覚えることはできません。
だから、これはもっと曖昧なものの一つです。
絶対に。
これをリフレッシュすると、ここにあるラベルが表示されます。
だから私はちょうど私たちの時間を示すためにそれを取り除くことができます。
これらはラベルです。
そして、これを追加し、上部ケースをリフレッシュします。
次に、IDの特殊な緑色と100ピクセルのフォントサイズの要素の最初の文字を作成します。
だから、最初の手紙を目標にすることは、私たちが最初の手紙を見て、私たちが何を得るかを見てみたいかもしれない別のものです。
だから、別の疑似セレクタがあるように見えます。
最初の文字C Ss要素は、ブロックの最初の行の最初の文字を選択します。
したがって、最初の手紙の例を見てください。
それを試してみましょう。
私たちは最初に特別なIDを選択し、最初にそれの手紙を選びます。
そして、それを緑色にし、100ピクセルのフォントサイズで、緑色とフォントサイズ100ピクセルを保存して、その要素がここにあるようにします。
だから私たちがリフレッシュする最初の手紙に目を留めて、この巨大な緑の目を得る。
次の1つは、H-1要素の色を、ホバリングしたときに青色に変えます。
だから、これは実際にはある種の効果を持つのがかなり一般的です。
あなたが何かの上にマウスを置くと、それはかなり微妙かもしれません。ボタンとその上にマウスを置くと、色が少しだけシフトして見える小さな影があります。気を散らすことなく、インタラクティブ性のビット。
だから私たちはH-1を選ぶつもりです。そして、これは実際にはそれぞれ1つです。
しかし、この場合、それは唯一のものであり、擬似セレクターはホバーであり、ここに入れるものは、ユーザーが要素の上を移動したときにのみ適用されます。
色は青で保存します。
ここに私たちのH-1があります。
私がホバリングをやめたときにホバーが青に変わると、前にあったものに戻ります。
最終的に訪問された要素を灰色にして、2つの要素を見ることができるようになりました。これらの2つのリンクは、実際にFacebookにリンクしています。
だからこそ、彼らはデフォルトで紫色のChromeを使用しているため、訪問したすべての人が紫色に思うようになります。
それでは、私が以前に行ったことのないリンクを作ってみましょう。何かを始めるにはちょうどいいものを作るつもりです。私はページをリフレッシュすることを示します。
今は青です。
私はそこにいなかったので。
だから今のところ私はそれをクリックしないつもりです。
そして、私たちは訪れたものを紫色にするのではなく、紫色にします。
私は一度訪れた人を紫色ではなく灰色にしたいと申し訳ありません。
そこで、擬似セレクタがvisitedと呼んでいるタグを選択して、それをグレーで保存します。
リフレッシュすれば
ここでこのことに注目してください。
私はフォントを少し大きくします。
私はリフレッシュする前にそこに行っていたので、現在紫色です。
今は素晴らしいです。
OK、あなたはその運動を楽しんでください。
そこに解き放つことはたくさんあります。
さまざまなセレクタ。
さらに、私が追加することの1つは、私が持っている、あるいはほぼすべてのソリューションに対して、まったく同じ結果を達成するための少なくとも1つまたは2つの方法があるということです。
だから私と違う何かがあっても、それでも効果があったらそれは素晴らしいです。
コメントに自由に追加してください。
他の人と共有してください。
それは完全に有効です。
これはちょうど私がそれをした方法です。
もう一つのこと。
明らかにこのサイトは特に魅力的ではありません。
これは実際のサイトではありません。
私たちは次の練習ビデオですぐに実際のプロジェクトに取り組んでいきます。
私たちは実際には、ちょっとしたデザインのブログサイトを作るつもりです。
これはこれよりもはるかによく見えます。
これは単なる練習です。