ホームページ > 記事 > ウェブフロントエンド > CSSセレクターの種類と使い方の紹介

CSSセレクターの種類と使い方の紹介

不言オリジナル: 2018-06-21 17:09:332103ブラウズ

一般的に使用されるものには、タグセレクター、クラスセレクター、IDセレクターなどが含まれます。実際には、これらのセレクターの種類と用途について、次の記事で詳しく紹介します

まず、最初のセレクター
1. タグセレクター (例: body、p、p、ul、li)
2. クラスセレクター (例: class="head"、class="head_logo")
3.セレクター (例: id="name"、id="name_txt")
4. グローバルセレクター (例: *)
5. 結合セレクター (例: .head .head_logo、2 つのセレクターは次のように区切られていることに注意してください)スペースバー)
6 .継承セレクター (例: pp、2 つのセレクターがスペースバーで区切られていることに注意)
7. 疑似クラスセレクター (例: リンクスタイル、要素の疑似クラス、4 つの異なる)状態: link、visited、active、hover )
8. 文字列一致の属性セレクター (^ $ * 開始、終了、包含に対応する 3 種類)
タグ内での style=" " の記述方法は次のようになります。 CSS を導入する方法であり、セレクターはまったく使用されないため、セレクターではありません。
これらのセレクターを個別に見てみましょう:
1: タグ名セレクター
XHTML ドキュメントには、p タグ、h1 タグなど、多くのタグがあります。ドキュメント内のすべての p タグに同じ CSS スタイルを使用させるには、タグセレクターを使用する必要があります。

p {color:red;border:1px blue solid;} 
p {color:#000;}

2: クラスセレクター
タグセレクターを使用して、XHTML ドキュメント全体の同じタグに同じ CSS スタイルを指定します。しかし、実際のアプリケーションでは、XHTML 文書内の同じタグが繰り返し使用されることになります。同じタグに異なる CSS スタイルを割り当てたい場合は、クラスセレクターを使用する必要があります。

<p class="test">测试代码</p> 
.test {color:red;border:1px blue solid;}

HTML文書ではスタイルを制御するタグの開始タグにclass="xxx"を追加し（inputなどペアになっていないタグはタグ内に直接配置）、ページに対応するCSSファイルでは、 .xxx を使用するこのタグを指定してこのタグを制御できます。クラスを定義することでタグを検索するこの方法をクラスセレクターと呼びます。

このクラス定義方法は、フロントエンド開発で最も一般的に使用されるセレクターです。これには、いくつかの優れた機能があります。異なるタグに同じクラスを設定できるため、1 つの CSS コマンドを使用して複数のタグを制御でき、コードの量が大幅に削減されます。第二に、バックグラウンドスタッフはクラスの関連設定を使用する必要がなく、さらにバックグラウンドスタッフと対話する必要もありません。、ラベルのクラス名は js などを通じて動的に変更できるため、ラベル全体のスタイルが変更され、フロントエンドの動的効果の実装が容易になります。
3: ID セレクター
ID セレクターはクラスセレクターと似ていますが、違いは ID セレクターを再利用できないことです。 XHTML ドキュメントでは、ID セレクターは CSS スタイルを 1 つのタグにのみ割り当てることができます。

<p id="test">测试代码</p> 
#test {color:red;border:1px blue solid;}

ID を持つ HTML 要素は JavaScript で操作できます。また、ID はバックエンド開発者によって使用されることが多いため、フロントエンド開発者はできるだけ使用しないようにしてください。
4. グローバルセレクター
グローバルセレクターはアスタリスクです。これは、XHTML ドキュメント内のすべての要素に対して機能します。

*{margin:0; padding:0;}

5. セレクターの組み合わせ
タグセレクター、クラスセレクター、IDセレクターを組み合わせて使用できます。一般的な組み合わせ方法としては、タグセレクタとクラスセレクタの組み合わせ、タグセレクタとIDセレクタの組み合わせがあります。これら 2 つの組み合わせ方法の原理と効果は同じであるため、タグセレクターとクラスセレクターの組み合わせのみを紹介します。組み合わせセレクターは単なる組み合わせの形式であり、実際のセレクターではありませんが、実際にはよく使用されます。
例: .orderlist li {xxxx} または .tableset td {}
これを使用する場合、通常、li td dd など、繰り返し表示され、同じスタイルを持ついくつかのタグで使用されます。
例:

H1.red {color: red}
グループセレクター

.test1,span,test2 {border:1px blue solid;} 
p,span,img {border:1px blue solid;}

グループセレクターは実際には CSS を記述するための簡略化された方法ですが、同じ定義を一緒に使用すると、多くのコードが節約されます。
6. 継承されたセレクター
継承されたセレクターの使用方法を学ぶには、まずドキュメントツリーと CSS 継承を理解する必要があります。各 XHTML はドキュメントツリーとみなすことができ、ドキュメントツリーのルートは html タグであり、head タグと body タグはその子要素です。 head および body の他のタグは、html タグの孫要素です。 XHTML 全体は、祖先と子孫の間のツリーのような関係を表します。 CSS の継承とは、子孫要素が祖先要素の特定の属性を継承することを意味します。以下では、これら 2 つの重要な CSS 概念を例を通して詳しく説明します。
ドキュメントツリーCSS継承継承セレクター

<p class="test"> 
<span><img src="xxx" alt="示例图片"/></span> 
</p> 
.test span img {border:1px blue solid;} 
p span img {border:1px blue solid;}

后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。
7.伪类选择器
伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:visited、:hover和:active。
a的这四个伪类，分别表示了a的四种状态，要注意的是，a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上
8.字符串匹配的属性选择符--主要有三种
语法：E[att^="val"] ： {attribute}
说明：匹配具有att属性、且值以val开头的E元素。

<span style="font-size:18px;"><style type="text/css"> 
p[title^="val"] {color:#FF0000;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="value">匹配具有att属性、且值以val开头的E元素</p> 
</p></span>

语法:E[att$="val"] ： {attribute}
说明：匹配具有att属性、且值以val结尾的E元素

<style type="text/css"> 
p[title$="val"] {font-weight:bold;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="this is val">匹配具有att属性、且值以val结尾的E元素</p> 
</p> 
</body>

语法:E[att*="val"] ： {attribute}
说明：匹配具有att属性、且值中包含val的E元素。

<style type="text/css"> 
p[title*="val"] {text-decoration:underline;} 
</style> 
<title>子串匹配的属性选择符 E[att*="val"]</title> 
</head> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="have val word">匹配具有att属性、且值中含有val的E元素</p> 
</p> 
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

CSSセレクターの種類と使い方の紹介

関連記事