CSSセレクター

Aug 10, 2016 am 08:49 AM

CSS は HTML 構造内の要素を取得できます。これはどのように実現されますか?

私たちの意見では、これはページの外にもページ内にも影響を与えずに CSS を記述できる、とても魔法のようなものです

この要素を取得すると、HTML 構造がどれほど複雑であっても、この CSS は必要な HTML 要素を正確に取得できます。

とても強力なので、実装プロセスも非常に難しいですか?

これはとても、とても、とても簡単だとしか言えません。

次のセレクターを覚えておいてください。ああ、前の記事でもいくつかの

セレクター を紹介しました。

サブセレクター

E 要素の子であるすべての要素 F を選択します。 E>F

例:

リーリー

隣接セレクター

E要素の直後にあるF要素を選択します。 E+F

リーリー

ブラザーセレクター

要素 E の兄弟要素 F をすべて選択します。え〜ふ

リーリー

このセレクターの選択には、あなた自身を除くすべての F セレクターが含まれているわけではありません。

IDとクラスセレクター

リーリー
リーリー

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。

Web ページ内では、各 ID 名は 1 回のみ使用でき、重複して使用することはできません。

IDとは異なり、クラスは再利用が可能です。たとえば、ページ上の複数の要素はすべて同じスタイル定義を使用できます。

疑似クラスセレクター

E:link は、ハイパーリンクにアクセスする前にそのスタイルを設定します。

E:visited は、リンク アドレスが訪問されたときのハイパーリンクのスタイルを設定します。

E:hover は、マウスをホバーしたときの要素のスタイルを設定します。

E:active は、要素がユーザーによってアクティブ化されたとき (マウスのクリックとリリースの間に発生するイベント) のスタイルを設定します。

リーリー

注: これらの 4 つの疑似クラス セレクターの順序は、 link-visited-hover-active に従っています。

順序が間違っていると問題が発生します。この問題を前の拡張コンテンツに移動してください。

E:focus 要素が入力フォーカスになったとき(要素のonfocusイベントが発生したとき)のスタイルを設定します。

カーソルを取得できるフォームまたは要素で使用します。

リーリー
E:lang(fr) 特別な言語を使用して E 要素と一致します。ほとんど使用されません

中国語版と英語版の両方に対応しており、使用できます。

リーリー

E:not(s) s セレクターを含まない要素 E と一致します。

リーリー
E:root ドキュメントのルート要素の E 要素と一致します。多くの場合、HTML 要素を指します

リーリー
E:first-child 親要素の最初の子要素 ​​E と一致します。

リーリー

最初の li が一致します。

E:last-child 親要素の最後の子要素 ​​E と一致します。

リーリー

最後の li が一致します


E:一人っ子

リーリー

入力が一致しました。

E:nth-child(n) 親要素の n 番目の子要素 ​​E と一致します。

リーリー

ul の下の最初の li が一致します。

E:nth-last-child(n) 親要素の下から n 番目の子要素 ​​E と一致します。

リーリー

ul の最後から 2 番目の子要素 ​​li が一致します。

E:first-of-type 同じ型の最初の兄弟要素 E と一致します。

リーリー

同じタイプの最初の li が選択されます;

E:last-of-type 同じ型の最後の兄弟要素 E と一致します。

リーリー

同じタイプの最後の li が選択されています;

E:only-of-type 同じ型の唯一の兄弟要素 E と一致します。

リーリー

E:nth-of-type(n) 同じ型の n 番目の兄弟要素 E と一致します。

リーリー

 

第三li被匹配;

E:nth-last-of-type(n)   匹配同类型中的倒数第n个同级兄弟元素E。

<span style="color: #000000;">    li:nth-last-of-type(3){
        background: green;
    }</span>
ログイン後にコピー

 

倒数第三个被匹配;

E:empty    匹配没有任何子元素(包括text节点)的元素E。

E:checked  匹配用户界面上处于选中状态的元素E。 (用于input type为radio与checkbox时)

<span style="color: #000000;">    input:checked{
            width: 100px;
        }

    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="4"</span><span style="color: #0000ff;">></span>
ログイン後にコピー

E:enabled    匹配用户界面上处于可用状态的元素E。

E:disabled    匹配用户界面上处于禁用状态的元素E。

E:target     匹配相关URL指向的E元素。

<span style="color: #000000;">ul li a:target{
    color: red;
    }


</span><span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav1"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav1"</span><span style="color: #0000ff;">></span>导航一<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav2"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav2"</span><span style="color: #0000ff;">></span>导航二<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav3"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav3"</span><span style="color: #0000ff;">></span>导航三<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
ログイン後にコピー

这个一定要设置路径URL,不是不行。只能使用与锚点,就是本页跳转。

不过可以使用来代表激活状态,以前是需要js实现的。

 

ok~

 

扩展小知识:

接上一篇又补充一些,让我们对css的理解更加深刻。

层叠样式表

层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里。

层叠可以简单地理解为冲突的解决方案。


优先级规则可以表述为

行内样式>ID样式>类别样式>标记样式


在复杂的页面中,某一个元素有可能会从很多地方获取样式,例如一个网站的某一级标题整体设置为使用绿色,而对某个特殊栏目

需要使用蓝色,这样在栏目中就需要覆盖通用的样式设置。在很简单的页面中,这样的特殊需求实现起来不会很难,但是如果网站

的结构很复杂,就完全有可能代码变得非常混乱,可能出现无法找到某个元素的样式来自于哪条规则的情况。因此,必须要充分理

解css中“层叠”的原理。


计算冲突样式的优先级是一个比较复杂的过程,并不仅仅是上面这个简单的优先级规则可以完全描述的。但是使用者可以把把握 一个大的

原则,就是“越特殊的样式,优先级越高”行内样式对指定的一个元素产生影响,非常特殊,ID是针对某个元素的,因此它一定比应用于多个

元素的类别样式特殊。特殊性越高的元素,优先级越高。

 

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles