css3セレクター(3)_html/css_WEB-ITnose

css3 セレクターに接続する (1)

css3 セレクターに接続する (2)

この記事は、主にいくつかの css3 ステータス セレクターに関係するため、タイトルは最初から始まります。

1. [:enabled] セレクター

この属性を見ると、それがフォーム要素に特別に提供されていることがすぐにわかります。フォーム内の入力ボックス、パスワード ボックス、チェック ボックスにはすべて、使用可能な状態 (:enabled) と使用できない状態 (:disabled) があります。デフォルトでは、これらのフォーム要素は使用可能な状態です。これらのフォーム要素は、selector:enabled を介してスタイル設定できます。

例: 入力ボックスを使用してスタイルを設定できます。

<meta charset="utf-8"><style>div {    margin: 30px;}input[type="text"]:enabled {    border: 1px solid #f36;    box-shadow: 0 0 5px #f36;}</style><form action="#"><div><label>可用输入框:<input type="text"/></label></div><div><label>禁用输入框:<input type="text" disabled="disabled"/></label></div></form>

2. [:disabled] セレクター

[:enabled] セレクターを見ると、[:disabled] セレクターがある必要があることがわかります。名前からわかるように、:disabled セレクターは :enabled セレクターの逆で、使用できないフォーム要素と一致するために使用されます。 :disabled セレクターを使用するには、フォーム要素に「disbled」属性を設定します。

例:

<meta charset="utf-8"><style type="text/css">form {    margin: 30px;}div {    margin: 10px;}input {    padding: 10px;    border: 1px solid orange;    background: #fff;    border-radius: 5px;}input[type="submit"] {    background: orange;    color: #fff;}input[type="submit"]:disabled {    background: #eee;    border-color: #eee;    color: #ccc;}</style><form action="#"><div><input type="text"/></div><div><input type="submit"value="我要回到上一步"/><input type="submit"value="禁止点下一步"disabled /></div></form>

3. [:checked] セレクター

フォーム要素では、ラジオ ボタンとチェック ボタンには checked と unchecked の状態があります。試してみればわかると思いますが、これら 2 つのボタンのデフォルトのスタイルを設定するのは難しいです。 CSS3 では、:checked セレクターやその他のタグを通じてカスタム スタイルを実装できます。および: チェックが入っている場合は、選択された状態を示します。

これは素晴らしい取り組みであり、多くの労力を節約できます。

例: :checked セレクターを使用して、チェック ボックス スタイルをシミュレートします。

<meta charset="utf-8"><style type="text/css">form {  border: 1px solid #ccc;  padding: 20px;  width: 300px;  margin: 30px auto;}.wrapper {  margin-bottom: 10px;}.box {  display: inline-block;  width: 20px;  height: 20px;  margin-right: 10px;  position: relative;  border: 2px solid orange;  vertical-align: middle;}.box input {  opacity: 0;}.box span {  position: absolute;  top: -10px;  right: 3px;  font-size: 30px;  font-weight: bold;  font-family: Arial;  -webkit-transform: rotate(30deg);  transform: rotate(30deg);  color: orange;}input[type="checkbox"] + span {  opacity: 0;}input[type="checkbox"]:checked + span {  opacity: 1;}</style><form action="#">  <div class="wrapper">    <div class="box">      <input type="checkbox" checked="checked" id="username" /><span>√</span>    </div>    <lable for="username">我是选中状态</lable>  </div>    <div class="wrapper">    <div class="box">      <input type="checkbox"  id="userpwd" /><span>√</span>    </div>    <label for="userpwd">我是未选中状态</label>  </div></form> 

選択されたスタイルと選択されていないスタイルをシミュレートします。

スタイルなしの効果は次のとおりです。

スタイルを追加した後の最終的な効果は次のとおりです。

例: :checked 状態セレクターはラジオ ボタン スタイルをシミュレートします。

<meta charset="utf-8"><style type="text/css">form {    border: 1px solid #ccc;    padding: 20px;    width: 300px;    margin: 30px auto;}.wrapper {    margin-bottom: 10px;}.box {    display: inline-block;    width: 30px;    height: 30px;    margin-right: 10px;    position: relative;    background: orange;    vertical-align: middle;    border-radius: 100%;}.box input {    opacity: 0;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 10;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/}.box span {    display: block;    width: 10px;    height: 10px;    border-radius: 100%;    position: absolute;    background: #fff;    top: 50%;    left: 50%;    margin: -5px 0  0 -5px;    z-index: 1;}input[type="radio"] + span {    opacity: 0;}input[type="radio"]:checked + span {    opacity: 1;}</style><form action="#"><div class="wrapper"><div class="box"><input type="radio" checked="checked" id="male" name="gender"/><span></span></div><label for="male">男</label></div><div class="wrapper"><div class="box"><input type="radio" id="female" name="gender"/><span></span></div><label for="female">女</label></div></form>

4. [::selection] セレクター

選択されたテキストのスタイルを設定します。詳細については、「CSS3::selection セレクター」を参照してください。うまく使えば、驚くほど効果的です。

5. [:read-only] セレクター

:read-only セレクターは、読み取り専用状態の要素のスタイルを指定するために使用されます。簡単に言えば、要素を「readonly」=読み取り専用に設定することを意味します。

例:

<!DOCTYPE HTML><meta charset="utf-8"/><style type="text/css">form {  width: 300px;  padding: 10px;  border: 1px solid #ccc;  margin: 50px auto;}form > input {  margin-bottom: 10px;}input[type="text"] {    border: 1px solid orange;    padding: 5px;    background: #fff;    border-radius: 5px;}input[type="text"]:-moz-read-only {    border-color: #ccc;}input[type="text"]:read-only {    border-color: #ccc;}</style><form>姓名:<input type="text"name="fullname"/><br />国籍:<input type="text"name="country"value="China"readonly="readonly"/><br /><input type="submit"value="提交"/></form></body></html>

6. [:read-write] セレクター

[:read-only] では、反対の [:read-write] は非常に明確な意味を持ちます。読み取りと書き込みの両方が可能な要素のスタイル 。このセレクターはデフォルトで読み書き可能であるため、CSS3 セレクターをシステムにするために追加された単なる埋め込みである可能性があると思います。

上記の例でスタイルを少し変更すると: input[type="text"] に読み書きセレクターを追加します

input[type="text"]:read-write{    border: 1px solid orange;    padding: 5px;    background: #fff;    border-radius: 5px;}

効果は次のとおりです:

つまり、次のことはできません。国籍入力ボックスのスタイルに丸い角を追加します。

7. [::before] と [::after]

MOOCs.com は次のように述べています:

::before と ::after は主に要素の前または後ろにコンテンツを挿入するために使用され、「content」は一緒に使用されます、最も一般的に使用されるシナリオはフロートをクリアすることです。

実際、::before と ::after には非常に多くの内容があります。詳細については、::before および ::after 擬似要素の使用法を参照してください。

追伸: MOOCのようなアイドルを見るたびに、本当に素晴らしいです。ドンドンにはどこか哀愁が漂います。女の子たちの気持ちを考えたことはありますか？

この記事の著者である Starof は、知識自体が変化しているため、著者も常に学習し成長しており、読者の誤解を避け、読みやすくするために記事の内容も随時更新されます。出典をたどり、転載の際は出典を明記してください: ご不明な点がございましたら、お気軽にご相談ください。一緒に進歩していきます。