html 5セレクタ基本操作
101591 ワード
一、構造性偽類選択器
1、クラスセレクタcssでは、クラスセレクタを使用して同じ要素を異なるスタイルに定義できます.例えば、p.left{text-align:left}p.rigth{text-align:right}
2、疑似選択器クラス選択器と疑似選択器の違いは、クラス選択器は勝手に名前をつけることができ、疑似選択器はCSSで定義された選択器であり、勝手に名前をつけることができないことである.最も一般的な擬似クラスセレクタa:link{color:#ff 6600}アクセスされていないリンクa:visited{color:#87 b 291}アクセスされたリンクa:hover{color:#6535 b 2}マウスポインタがリンク上a:active{color:#55 b 28 e}クリックされているリンクに移動
3、疑似要素選択器疑似要素選択器、CSSで定義した疑似要素に対して使用する選択器.使用方法:セレクタ:擬似要素{属性:値}とクラスを組み合わせてセレクタを使用する.クラス名:擬似要素{属性:値}
4、CSSには主に4つの疑似要素選択器がある.
1)、first-line擬似要素セレクタfirst-line擬似要素セレクタある要素の最初の行の文字にスタイルを使用するために使用されます.
2)、first-letter疑似要素セレクタfirst-letter疑似要素セレクタある要素の文字の頭文字(欧米文字)または最初の文字(中国語または日本語などの漢字)にスタイルを使用します.
3)、before擬似要素セレクタbefore擬似要素セレクタは、ある要素の前にいくつかの内容を挿入するために使用されます.
4)、after擬似要素セレクタafter擬似要素セレクタは、ある要素の後に内容を挿入するために使用される.
<html>
<head lang="en">
<meta charset="UTF-8">
<title> title>
<style>
:root{
background: #126fb0;
}
body{
background: #ffffff;
}
p.aaas{
text-align: left;
color: red;
}
p.right{
text-align: right;
color: green;
}
a:link{
color: #000;
}
a:visited{
color: fuchsia;
}
a:hover{
color :green;
}
a:active{
color: #ff6600;
}
p:first-line{
color: #f60;
}
p:first-letter{
color: green;
font-size: 24px;
}
li{
list-style: none;
}
li:before{
content:"...";
color: red;
}
li:after{
content: "__after ";
color: #ff6600;
}
style>
head>
<body>
<h1> h1>
<p class="aaas"> p>
<p class="right"> p>
<br/>
<a href="index1.html"> a>
<br/>
<p>
CSS ， <br/>
first-line 。
p>
<ul>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
ul>
body>
html>
5、構造的な擬似クラスセレクタroot、not、empty、target 1)、rootセレクタrootセレクタは、ページのルート要素にスタイルをバインドします.2)、notセレクタは、ある構造要素に対してスタイルを使用したいが、この構造要素の下にあるサブ構造要素を排除して、このスタイルを使用しないようにしたい場合は、notセレクタを使用することができます.3)、emptyセレクタemptyセレクタ要素の内容が空白の場合に使用するスタイルを指定します.4)、targetセレクタtargetセレクタは、ユーザがページ内のハイパーリンクをクリックし、target要素にジャンプした後にのみ機能するページ内のtarget要素にスタイルを指定する.
root、not、emptyのコードの合計:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TARGETtitle>
<style>
:target{
background: #000;
color: #fff;
}
style>
head>
<body>
<a href="#A">Aa>
<a href="#B">Ba>
<a href="#C">Ca>
<a href="#D">Da>
<div id="A">
<h2> h2>
<p> .........p>
div>
<div id="B">
<h2> h2>
<p> .........p>
div>
<div id="C">
<h2> h2>
<p> .........p>
div>
<div id="D">
<h2> h2>
<p> .........p>
div>
body>
html>
targetのコード:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TARGETtitle>
<style>
:target{
background: #000;
color: #fff;
}
style>
head>
<body>
<a href="#A">Aa>
<a href="#B">Ba>
<a href="#C">Ca>
<a href="#D">Da>
<div id="A">
<h2> h2>
<p> .........p>
div>
<div id="B">
<h2> h2>
<p> .........p>
div>
<div id="C">
<h2> h2>
<p> .........p>
div>
<div id="D">
<h2> h2>
<p> .........p>
div>
body>
html>
6、セレクタfirst-child、last-child、nth-child、nth-last-child 1)、first-childセレクタfirst-childは、最初のサブエレメントのスタイルを個別に指定します.li:first-child{ background: #ff6600; }
2)、last-childセレクタlast-childは、最後のサブエレメントのスタイルを個別に指定します. li:last-child{
background: green;
}
3)、nth-childセレクタnth-child(n)セレクタマッチング正数でN番目のサブエレメントnth-child(odd)セレクタマッチング正数で奇数番目のサブエレメントnth-child(even)セレクタマッチング正数で偶数番目のサブエレメントli:nth-child(odd){
background: red;
}
4)、nht-last-childセレクタnth-last-child(n)セレクタマッチング逆数N番目のサブエレメントnth-last-child(odd)セレクタマッチング逆数奇数番目のサブエレメントnth-last-child(even)セレクタマッチング逆数偶数番目のサブエレメントli:nth-last-child(odd){
background: green;
}
li:nth-last-child(even){
background:gray;
}
7、セレクタnth-of-typeとnth-last-of-type
1)、nth-childとnth-last-childを使用する場合に発生する問題は、ケースで奇数記事のタイトル背景が黄色、偶数記事のタイトルが緑であることを指定します.h2:nth-child(even){
background: #693ada;
}
h2:nth-of-type(odd){
background: #126fb0;
}
2)、nth-of-typeとnth-last-of-type nth-of-typeとnth-last-of-typeを用いることはcss 3において上記のような問題の発生を回避するために用いられ、統計的には同じタイプのサブ要素のみに対して計算される.nth-of-type正数nth-last-of-type逆数h2:nth-last-of-type(even){
background: #f60;
}
互換性:nth-of-typeとnth-last-of-typeはいずれもCSS 3が提供を開始するにはIE 8以上のブラウザがサポートされ、Chromeブラウザ、Firefoxブラウザ、Operaブラウザ、Safariブラウザがサポートされています!
8、ループ使用スタイルnth-child(An+B)Aは、ループごとにいくつかのスタイルが含まれていることを示し、Bは指定されたスタイルがループ中に位置している位置を示している.li:nth-child(3n+1){
background: #126fb0;
}
li:nth-child(3n+2){
background: #ff6600;
}li:nth-child(3n+3){
background: #ff1b00;
}
li:nth-child(4n+3){
background: #000000;
}
li:nth-child(4n+4){
background: green;
}
9、only-childセレクタonly-childセレクタは、唯一のサブエレメントにのみ機能します.li:only-child{
background: #ff1b00;
}
二、UI要素状態擬似クラス選択器
1、セレクタE:hover、E:active、E:focus
1)、E:hoverセレクタは、マウスポインタを要素に移動するときに要素が使用するスタイルの使用方法を指定するために使用されます.hover{CSSスタイル}では、「」に要素のtype属性を追加できます.例:input[type=“text”:hover{CSSスタイル}
2)、E:activeセレクタは、エレメントがアクティブ化されたときに使用されるスタイルを指定するために使用されます3)、E:focusセレクタは、主にテキストボックスコントロールがフォーカスポイントを取得し、文字入力を行うときに使用されるエレメントを指定するために使用されます.4)、小例:控訴と結びつけて、マウスが移動するとテキストボックスが緑になり、マウスがクリックすると(クリックしても話さない)テキストボックスが青になり、入力可能な状態にあるとテキストボックスがオレンジになるという効果を実現した.
<html>
<head lang="en">
<meta charset="UTF-8">
<title> E:hover、E:active E:focustitle>
<style>
input[type="text"]:hover{
background: green;
}
input[type="text"]:focus{
background: #ff6600;
color: #fff;
}
input[type="text"]:active{
background: blue;
}
input[type="password"]:hover{
background: red;
}
style>
head>
<body>
<h1> E:hover、E:active E:focush1>
<form>
：<input type="text" placeholder=" ">
<br/>
<br/>
：<input type="password" placeholder=" ">
form>
body>
html>
2、E:enabled擬似クラスセレクタ
1)、E:enabledセレクタを使用して、要素が使用可能な状態にあるときのスタイルを指定します.2)、E:disabledセレクタを使用して、要素が使用できない場合のスタイルを指定します.3)、小例:控訴と結びつけて以下の効果を実現し、テキストボックスが使用可能な場合は背景色が緑色で、使用できない場合は背景が薄い灰色になる.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:enabled E:disabled title>
<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
style>
head>
<body>
<h1>E:enabled E:disabled h1>
<form>
：<input type="text" placeholder=" " disabled>
<br/>
<br/>
：<input type="text" placeholder=" ">
form>
body>
html>
3、E:read-only擬似クラスセレクタ
1)、E:read-onlyセレクタを使用して、要素が読み取り専用の場合のスタイルを指定します.2)、E:read-writeセレクタを使用して、要素が読み取り専用でない場合のスタイルを指定します.3)、小例:控訴と併せて以下の効果を実現し、テキストボックスが使用可能な場合は入力文字が赤になり、使用できない場合は、背景が黒、文字が緑になるように設定します.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>read-only E:read-write title>
<style>
input[type="text"]:read-only{
background: #000;
color: green;
}
input[type="text"]:read-write{
color: #ff6600;
}
style>
head>
<body>
<h1>read-only E:read-write h1>
<form>
：<input type="text" placeholder=" " value=" " readonly>
<br/>
<br/>
：<input type="text" placeholder=" ">
form>
body>
html>
4、疑似クラス選択E:checked、E:defaultとindeterminate
1)、E:cehcked擬似クラスセレクタは、フォームのradioラジオボックスまたはcheckboxチェックボックスが選択されている場合のスタイルを指定します.2)、E:defaultセレクタは、ページが開いているときにデフォルトで選択されているラジオボックスまたはチェックボックスのコントロールのスタイルを指定します.3)、E:indeterminateセレクタは、ページが開いたときに、ラジオボックスのセットの中で選択された状態に設定されていないラジオボックスのスタイルを指定します.4)、小さいケース:A、1つの不動産情報を発表する選択枠のコントロールをシミュレートして、選択した後に、彼に2 px実線の緑色の枠をあげます!
<html>
<head lang="en">
<meta charset="UTF-8">
<title>checked title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
style>
head>
<body>
<h1>checked h1>
<form>
：
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
form>
body>
html>
B、1つのデフォルトの選択の中のコントロールを実現して、デフォルトは彼に1つの2 px実線の緑色の枠をあげます!彼がチェックを外すとまたスタイルがあります
<html>
<head lang="en">
<meta charset="UTF-8">
<title>default title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
style>
head>
<body>
<h1>default h1>
<form>
：
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
form>
body>
html>
C、デフォルトで開いても選択されていないときに、2 px実線緑色の枠線を実現します!
<html>
<head lang="en">
<meta charset="UTF-8">
<title>indeterminate title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
style>
head>
<body>
<h1>indeterminate h1>
<form>
：
<input type="radio">
<input type="radio">
form>
body>
html>
5、擬似クラスセレクタE::selection
1)、E:selection擬似クラスセレクタは、要素が選択されているときのスタイルを指定します.2)、ケース:ページのp段落の文字とテキストボックスの文字を選択し、背景の色を緑に変更します.
<html>
<head lang="en">
<meta charset="UTF-8">
<title> E::selectiontitle>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
style>
head>
<body>
<h1> E::selectionh1>
<p> ， ， ， ， ， ， 、 ， 、 。p>
<input type="text" placeholder=" ">
body>
html>
6、E:invalid擬似クラスセレクタとE:valid擬似クラスセレクタ
1)、E:invalid擬似クラスセレクタは、エレメントコンテンツがHTML 5で使用されているエレメントのrequirdeなどの属性で指定されたチェックやエレメントコンテンツがエレメントで規定されたフォーマットに合致しない場合のスタイルを指定するために使用されます.2)、E:valid擬似クラスセレクタは、エレメントコンテンツがHTML 5を介して使用可能なエレメントのrequirdeなどの属性で指定されたチェックやエレメントコンテンツがエレメントに規定されたフォーマットに合致する場合のスタイルを指定するために使用されます.3)、小さいケース:Email属性のフォームで入力が正しいかどうかを判断し、正しく入力した内容は緑で、入力エラーは赤です!
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:invalid E:valid title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
style>
head>
<body>
<h1>E:invalid E:valid h1>
<form>
<input type="email" placeholder=" ">
form>
body>
html>
7、E:required擬似クラスセレクタとE:optional擬似クラスセレクタ
1)、E:required擬似クラスセレクタは、requiredプロパティの使用を許可し、requiredプロパティが指定されているinput要素、select要素、textarea要素のスタイルを指定します.2)、E:optional擬似クラスセレクタは、requiredプロパティの使用を許可し、requiredプロパティが指定されていないinput要素、select要素、textarea要素のスタイルを指定します.3)、小さいケース:名前は必ずフォームの背景の赤色を記入して、年齢はオプションでフォームの背景の緑色を記入します
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:required E:optional title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
style>
head>
<body>
<h1>E:required E:optional h1>
<form>
：<input type="text" placeholder=" " required>
<br/>
<br/>
：<input type="text" placeholder=" ">
form>
body>
html>
8、E:in-range擬似クラスセレクタとE:out-of-range擬似クラスセレクタ
1)、E:in-range擬似クラスセレクタは、要素の有効値が範囲内に限定され、実際の入力値が範囲内にある場合のスタイルを指定します.2)、E:out-of-range擬似クラスセレクタは、要素の有効値が一定の範囲内に限定されているが、実際に入力値が超過している場合に使用されるスタイルを指定するために使用されます.3)、小さいケース:0-100以内の数字で、0未満または100を超えるフォントは赤になります.そうしないと緑になります.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:in-range E:out-of-range title>
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;
}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
style>
head>
<body>
<h1>E:in-range E:out-of-range h1>
<input type="number" min="0" max="100" value="0">
body>
html>
三、汎用兄弟要素選択器
汎用兄弟要素セレクタ同じ親要素の中にある要素の後にある他のすべての種類の兄弟要素で使用されるスタイルを指定します.
使用方法:~{CSSスタイル}
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
span~p{
background: green;
}
style>
head>
<body>
<div>
<span>123465164span>
<span>123465164span>
<p> p>
<p> p>
<p> p>
div>
<span>123465164span>
<p> p>
<p> p>
<p> p>
<p> p>
<div>
<p> p>
<p> p>
<p> p>
div>
<p> p>
<p> p>
body>
html>
四、セレクタを使ってページに内容を挿入する
1、文字を挿入
1)セレクタを使用してコンテンツをCSS 2に挿入し、beforeセレクタを使用してエレメントの前にコンテンツを挿入し、afterを使用してエレメントの後ろにコンテンツを挿入し、セレクタcontentプロパティで挿入するコンテンツを定義します.
例えば、H 2に対してbeforeセレクタを用いて、H 2の前に「Title」という文字を挿入する. <style type="text/css">
h2:before{
content:"Title";
}
style>
また、スタイルを定義したり、美化したりすることもできます.例えば、「Title」の文字を白に設定したり、緑の背景をつけたり、内余白を上下1画素程度5画素、外余白を右5画素に設定したり、もちろんフォントを設定したりすることもできます.
2)コンテンツを挿入する必要のない要素を除外contentプロパティを使用してnoneプロパティ値を追加します.例:
2、挿入画像
1)挿入画像ファイルbeforeまたはafterを使用すると、要素の前後に文字を挿入できるほか、画像を挿入することもできます.挿入画像はURLを使って画像の経路を指定する必要があります.例えば、タイトルの前に画像を挿入します.
例:<style type="text/css">
h2:before{
content:url(1.gif);
}
style>
2)画像ファイルを挿入する利点開発者の作業量を節約し,例えばクラス方式で異なるタイトル画像の追加を行うことができる.例えば、タイトルに「hot」「digest」を定義して、1つのステーションのアイコンのトップの小さなアイコンを呼び出します.<style type="text/css">
h2.hot:before{ content:url(hot.gif); }
h2.digest:before{ content:url(digest.gif); }
style>
<h2 class="hot"> h2>
<h2 class="digest"> h2>
<h2 class="hot"> h2>
<h2> h2>
<h2> h2>
3、項目番号の挿入
1)複数のタイトルの前に連続番号を付けcontentプロパティでcounterプロパティを使用して、項目に連続番号を追加します.使用方法: :before{
content:counter( );
}
カウンタを使用して番号を計算し、カウンタは任意に名前を付けることができます.カウンタの使用に加えて、要素の属性にcontent属性値で指定したカウンタ名を要素のスタイルに追加する必要があります. {
counter-increment:content
}
<html>
<head lang="en">
<meta charset="UTF-8">
<title> title>
<style>
:root{
background: #126fb0;
}
body{
background: #ffffff;
}
p.aaas{
text-align: left;
color: red;
}
p.right{
text-align: right;
color: green;
}
a:link{
color: #000;
}
a:visited{
color: fuchsia;
}
a:hover{
color :green;
}
a:active{
color: #ff6600;
}
p:first-line{
color: #f60;
}
p:first-letter{
color: green;
font-size: 24px;
}
li{
list-style: none;
}
li:before{
content:"...";
color: red;
}
li:after{
content: "__after ";
color: #ff6600;
}
style>
head>
<body>
<h1> h1>
<p class="aaas"> p>
<p class="right"> p>
<br/>
<a href="index1.html"> a>
<br/>
<p>
CSS ， <br/>
first-line 。
p>
<ul>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
<li><a href="index1.html"> a>li>
ul>
body>
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TARGETtitle>
<style>
:target{
background: #000;
color: #fff;
}
style>
head>
<body>
<a href="#A">Aa>
<a href="#B">Ba>
<a href="#C">Ca>
<a href="#D">Da>
<div id="A">
<h2> h2>
<p> .........p>
div>
<div id="B">
<h2> h2>
<p> .........p>
div>
<div id="C">
<h2> h2>
<p> .........p>
div>
<div id="D">
<h2> h2>
<p> .........p>
div>
body>
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TARGETtitle>
<style>
:target{
background: #000;
color: #fff;
}
style>
head>
<body>
<a href="#A">Aa>
<a href="#B">Ba>
<a href="#C">Ca>
<a href="#D">Da>
<div id="A">
<h2> h2>
<p> .........p>
div>
<div id="B">
<h2> h2>
<p> .........p>
div>
<div id="C">
<h2> h2>
<p> .........p>
div>
<div id="D">
<h2> h2>
<p> .........p>
div>
body>
html>
li:last-child{
background: green;
}
li:nth-child(odd){
background: red;
}
li:nth-last-child(odd){
background: green;
}
li:nth-last-child(even){
background:gray;
}
h2:nth-child(even){
background: #693ada;
}
h2:nth-of-type(odd){
background: #126fb0;
}
h2:nth-last-of-type(even){
background: #f60;
}
li:nth-child(3n+1){
background: #126fb0;
}
li:nth-child(3n+2){
background: #ff6600;
}li:nth-child(3n+3){
background: #ff1b00;
}
li:nth-child(4n+3){
background: #000000;
}
li:nth-child(4n+4){
background: green;
}
li:only-child{
background: #ff1b00;
}
1、セレクタE:hover、E:active、E:focus
1)、E:hoverセレクタは、マウスポインタを要素に移動するときに要素が使用するスタイルの使用方法を指定するために使用されます.hover{CSSスタイル}では、「」に要素のtype属性を追加できます.例:input[type=“text”:hover{CSSスタイル}
2)、E:activeセレクタは、エレメントがアクティブ化されたときに使用されるスタイルを指定するために使用されます3)、E:focusセレクタは、主にテキストボックスコントロールがフォーカスポイントを取得し、文字入力を行うときに使用されるエレメントを指定するために使用されます.4)、小例:控訴と結びつけて、マウスが移動するとテキストボックスが緑になり、マウスがクリックすると(クリックしても話さない)テキストボックスが青になり、入力可能な状態にあるとテキストボックスがオレンジになるという効果を実現した.
<html>
<head lang="en">
<meta charset="UTF-8">
<title> E:hover、E:active E:focustitle>
<style>
input[type="text"]:hover{
background: green;
}
input[type="text"]:focus{
background: #ff6600;
color: #fff;
}
input[type="text"]:active{
background: blue;
}
input[type="password"]:hover{
background: red;
}
style>
head>
<body>
<h1> E:hover、E:active E:focush1>
<form>
：<input type="text" placeholder=" ">
<br/>
<br/>
：<input type="password" placeholder=" ">
form>
body>
html>
2、E:enabled擬似クラスセレクタ
1)、E:enabledセレクタを使用して、要素が使用可能な状態にあるときのスタイルを指定します.2)、E:disabledセレクタを使用して、要素が使用できない場合のスタイルを指定します.3)、小例:控訴と結びつけて以下の効果を実現し、テキストボックスが使用可能な場合は背景色が緑色で、使用できない場合は背景が薄い灰色になる.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:enabled E:disabled title>
<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
style>
head>
<body>
<h1>E:enabled E:disabled h1>
<form>
：<input type="text" placeholder=" " disabled>
<br/>
<br/>
：<input type="text" placeholder=" ">
form>
body>
html>
3、E:read-only擬似クラスセレクタ
1)、E:read-onlyセレクタを使用して、要素が読み取り専用の場合のスタイルを指定します.2)、E:read-writeセレクタを使用して、要素が読み取り専用でない場合のスタイルを指定します.3)、小例:控訴と併せて以下の効果を実現し、テキストボックスが使用可能な場合は入力文字が赤になり、使用できない場合は、背景が黒、文字が緑になるように設定します.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>read-only E:read-write title>
<style>
input[type="text"]:read-only{
background: #000;
color: green;
}
input[type="text"]:read-write{
color: #ff6600;
}
style>
head>
<body>
<h1>read-only E:read-write h1>
<form>
：<input type="text" placeholder=" " value=" " readonly>
<br/>
<br/>
：<input type="text" placeholder=" ">
form>
body>
html>
4、疑似クラス選択E:checked、E:defaultとindeterminate
1)、E:cehcked擬似クラスセレクタは、フォームのradioラジオボックスまたはcheckboxチェックボックスが選択されている場合のスタイルを指定します.2)、E:defaultセレクタは、ページが開いているときにデフォルトで選択されているラジオボックスまたはチェックボックスのコントロールのスタイルを指定します.3)、E:indeterminateセレクタは、ページが開いたときに、ラジオボックスのセットの中で選択された状態に設定されていないラジオボックスのスタイルを指定します.4)、小さいケース:A、1つの不動産情報を発表する選択枠のコントロールをシミュレートして、選択した後に、彼に2 px実線の緑色の枠をあげます!
<html>
<head lang="en">
<meta charset="UTF-8">
<title>checked title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
style>
head>
<body>
<h1>checked h1>
<form>
：
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
form>
body>
html>
B、1つのデフォルトの選択の中のコントロールを実現して、デフォルトは彼に1つの2 px実線の緑色の枠をあげます!彼がチェックを外すとまたスタイルがあります
<html>
<head lang="en">
<meta charset="UTF-8">
<title>default title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
style>
head>
<body>
<h1>default h1>
<form>
：
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
form>
body>
html>
C、デフォルトで開いても選択されていないときに、2 px実線緑色の枠線を実現します!
<html>
<head lang="en">
<meta charset="UTF-8">
<title>indeterminate title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
style>
head>
<body>
<h1>indeterminate h1>
<form>
：
<input type="radio">
<input type="radio">
form>
body>
html>
5、擬似クラスセレクタE::selection
1)、E:selection擬似クラスセレクタは、要素が選択されているときのスタイルを指定します.2)、ケース:ページのp段落の文字とテキストボックスの文字を選択し、背景の色を緑に変更します.
<html>
<head lang="en">
<meta charset="UTF-8">
<title> E::selectiontitle>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
style>
head>
<body>
<h1> E::selectionh1>
<p> ， ， ， ， ， ， 、 ， 、 。p>
<input type="text" placeholder=" ">
body>
html>
6、E:invalid擬似クラスセレクタとE:valid擬似クラスセレクタ
1)、E:invalid擬似クラスセレクタは、エレメントコンテンツがHTML 5で使用されているエレメントのrequirdeなどの属性で指定されたチェックやエレメントコンテンツがエレメントで規定されたフォーマットに合致しない場合のスタイルを指定するために使用されます.2)、E:valid擬似クラスセレクタは、エレメントコンテンツがHTML 5を介して使用可能なエレメントのrequirdeなどの属性で指定されたチェックやエレメントコンテンツがエレメントに規定されたフォーマットに合致する場合のスタイルを指定するために使用されます.3)、小さいケース:Email属性のフォームで入力が正しいかどうかを判断し、正しく入力した内容は緑で、入力エラーは赤です!
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:invalid E:valid title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
style>
head>
<body>
<h1>E:invalid E:valid h1>
<form>
<input type="email" placeholder=" ">
form>
body>
html>
7、E:required擬似クラスセレクタとE:optional擬似クラスセレクタ
1)、E:required擬似クラスセレクタは、requiredプロパティの使用を許可し、requiredプロパティが指定されているinput要素、select要素、textarea要素のスタイルを指定します.2)、E:optional擬似クラスセレクタは、requiredプロパティの使用を許可し、requiredプロパティが指定されていないinput要素、select要素、textarea要素のスタイルを指定します.3)、小さいケース:名前は必ずフォームの背景の赤色を記入して、年齢はオプションでフォームの背景の緑色を記入します
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:required E:optional title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
style>
head>
<body>
<h1>E:required E:optional h1>
<form>
：<input type="text" placeholder=" " required>
<br/>
<br/>
：<input type="text" placeholder=" ">
form>
body>
html>
8、E:in-range擬似クラスセレクタとE:out-of-range擬似クラスセレクタ
1)、E:in-range擬似クラスセレクタは、要素の有効値が範囲内に限定され、実際の入力値が範囲内にある場合のスタイルを指定します.2)、E:out-of-range擬似クラスセレクタは、要素の有効値が一定の範囲内に限定されているが、実際に入力値が超過している場合に使用されるスタイルを指定するために使用されます.3)、小さいケース:0-100以内の数字で、0未満または100を超えるフォントは赤になります.そうしないと緑になります.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:in-range E:out-of-range title>
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;
}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
style>
head>
<body>
<h1>E:in-range E:out-of-range h1>
<input type="number" min="0" max="100" value="0">
body>
html>
三、汎用兄弟要素選択器
汎用兄弟要素セレクタ同じ親要素の中にある要素の後にある他のすべての種類の兄弟要素で使用されるスタイルを指定します.
使用方法:~{CSSスタイル}
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
span~p{
background: green;
}
style>
head>
<body>
<div>
<span>123465164span>
<span>123465164span>
<p> p>
<p> p>
<p> p>
div>
<span>123465164span>
<p> p>
<p> p>
<p> p>
<p> p>
<div>
<p> p>
<p> p>
<p> p>
div>
<p> p>
<p> p>
body>
html>
四、セレクタを使ってページに内容を挿入する
1、文字を挿入
1)セレクタを使用してコンテンツをCSS 2に挿入し、beforeセレクタを使用してエレメントの前にコンテンツを挿入し、afterを使用してエレメントの後ろにコンテンツを挿入し、セレクタcontentプロパティで挿入するコンテンツを定義します.
例えば、H 2に対してbeforeセレクタを用いて、H 2の前に「Title」という文字を挿入する. <style type="text/css">
h2:before{
content:"Title";
}
style>
また、スタイルを定義したり、美化したりすることもできます.例えば、「Title」の文字を白に設定したり、緑の背景をつけたり、内余白を上下1画素程度5画素、外余白を右5画素に設定したり、もちろんフォントを設定したりすることもできます.
2)コンテンツを挿入する必要のない要素を除外contentプロパティを使用してnoneプロパティ値を追加します.例:
2、挿入画像
1)挿入画像ファイルbeforeまたはafterを使用すると、要素の前後に文字を挿入できるほか、画像を挿入することもできます.挿入画像はURLを使って画像の経路を指定する必要があります.例えば、タイトルの前に画像を挿入します.
例:<style type="text/css">
h2:before{
content:url(1.gif);
}
style>
2)画像ファイルを挿入する利点開発者の作業量を節約し,例えばクラス方式で異なるタイトル画像の追加を行うことができる.例えば、タイトルに「hot」「digest」を定義して、1つのステーションのアイコンのトップの小さなアイコンを呼び出します.<style type="text/css">
h2.hot:before{ content:url(hot.gif); }
h2.digest:before{ content:url(digest.gif); }
style>
<h2 class="hot"> h2>
<h2 class="digest"> h2>
<h2 class="hot"> h2>
<h2> h2>
<h2> h2>
3、項目番号の挿入
1)複数のタイトルの前に連続番号を付けcontentプロパティでcounterプロパティを使用して、項目に連続番号を追加します.使用方法: :before{
content:counter( );
}
カウンタを使用して番号を計算し、カウンタは任意に名前を付けることができます.カウンタの使用に加えて、要素の属性にcontent属性値で指定したカウンタ名を要素のスタイルに追加する必要があります. {
counter-increment:content
}
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
span~p{
background: green;
}
style>
head>
<body>
<div>
<span>123465164span>
<span>123465164span>
<p> p>
<p> p>
<p> p>
div>
<span>123465164span>
<p> p>
<p> p>
<p> p>
<p> p>
<div>
<p> p>
<p> p>
<p> p>
div>
<p> p>
<p> p>
body>
html>
1、文字を挿入
1)セレクタを使用してコンテンツをCSS 2に挿入し、beforeセレクタを使用してエレメントの前にコンテンツを挿入し、afterを使用してエレメントの後ろにコンテンツを挿入し、セレクタcontentプロパティで挿入するコンテンツを定義します.
例えば、H 2に対してbeforeセレクタを用いて、H 2の前に「Title」という文字を挿入する.
<style type="text/css">
h2:before{
content:"Title";
}
style>
また、スタイルを定義したり、美化したりすることもできます.例えば、「Title」の文字を白に設定したり、緑の背景をつけたり、内余白を上下1画素程度5画素、外余白を右5画素に設定したり、もちろんフォントを設定したりすることもできます.
2)コンテンツを挿入する必要のない要素を除外contentプロパティを使用してnoneプロパティ値を追加します.例:
2、挿入画像
1)挿入画像ファイルbeforeまたはafterを使用すると、要素の前後に文字を挿入できるほか、画像を挿入することもできます.挿入画像はURLを使って画像の経路を指定する必要があります.例えば、タイトルの前に画像を挿入します.
例:
<style type="text/css">
h2:before{
content:url(1.gif);
}
style>
2)画像ファイルを挿入する利点開発者の作業量を節約し,例えばクラス方式で異なるタイトル画像の追加を行うことができる.例えば、タイトルに「hot」「digest」を定義して、1つのステーションのアイコンのトップの小さなアイコンを呼び出します.
<style type="text/css">
h2.hot:before{ content:url(hot.gif); }
h2.digest:before{ content:url(digest.gif); }
style>
<h2 class="hot"> h2>
<h2 class="digest"> h2>
<h2 class="hot"> h2>
<h2> h2>
<h2> h2>
3、項目番号の挿入
1)複数のタイトルの前に連続番号を付けcontentプロパティでcounterプロパティを使用して、項目に連続番号を追加します.使用方法:
:before{
content:counter( );
}
カウンタを使用して番号を計算し、カウンタは任意に名前を付けることができます.カウンタの使用に加えて、要素の属性にcontent属性値で指定したカウンタ名を要素のスタイルに追加する必要があります.
{
counter-increment:content
}