css selector_html/css_WEB-ITnoseの詳しい説明

1. 要素セレクター

2. クラスセレクター

4. 属性セレクター

1. 最も一般的な CSS セレクター要素セレクターで。 HTML ドキュメントでは、セレクターは通常、p、h2、span、a、div、または html などの特定の HTML 要素を参照します。

使用法は非常に簡単です。例:

html {background-color: black;}p {font-size: 30px; backgroud-color: gray;}h2 {background-color: red;}

上記の CSS コードは、すべての p 要素のフォント サイズを 30 ピクセルに設定し、すべてに赤い背景を追加します。ドキュメント内の h2 要素。

上記の例を通じて、CSS の基本的なルール構造もわかります。CSS は、

selector

と

宣言ブロック

で構成されています。各宣言ブロックには 1 つ以上の宣言が含まれます。各宣言の形式は、属性名:属性値です。以下の図に示すように:

各ステートメントはセミコロン「;」で終わります。 宣言で不正な属性値または不正な属性が使用されている場合、宣言は無視されます。 また、各ステートメントの後のセミコロンを忘れないように注意してください。 間違った例を挙げてみましょう:

p { background-color: red    font-family: 黑体;    wordsize: 20px;    float: left;  }

上記の例の最初のステートメントにはセミコロンがありません。 上記のステートメント ブロックは次のように解析されます:

p {  background-color: red font-family: 黑体;     wordsize: 20px;     float: left;     }

red font-family: 太字全体が背景として解析されます。 color の属性値は当然ながら正当な属性値ではないため、このステートメントは無視されます。さらに、2 番目のステートメントでは間違った属性名 wordsize が使用されていますが、このステートメントも無視されます。その結果、次と同等の 3 番目のステートメントのみが正しく処理されます。また、複数の HTML を処理することもできます。要素宣言:

p {float: left;}

これにより、ドキュメント内のすべての h1 ～ h6 および p 要素のフォントが「黒」に設定されます。

すべての要素を一度に選択したい場合は、ワイルドカード「*」を使用できます:

h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}

この方法では、一部の要素では font-size 属性が無効であっても、すべての要素が選択されます。無視されました。

2. クラスセレクター

(1) 単一クラスセレクター

単純な要素セレクターでは大まかすぎるように思えます。たとえば、原稿の締め切りなど、文書内の一部の重要なコンテンツを強調表示して太字にしたいとします。問題は、原稿の締め切り日がどの要素に表示されるかがわからないこと、または複数の異なる要素に表示される可能性があることです。現時点では、クラス セレクターの使用を検討できます。

クラス セレクターを使用するには、まずファイル要素にクラス属性を追加する必要があります。たとえば、有効期限は次の要素に表示される場合があります:

* { font-size: 20px;}

したがって、クラス セレクターは次の方法で使用できます:

<p class="deadline">...</p><h2 class="deadline">...</h2>

ポイント「.」とクラス名を組み合わせてクラスセレクターを形成します。

上記の 2 つのセレクターは、「deadline」クラスを含むすべての p 要素と h2 要素を選択します。この属性を含む残りの要素は選択されません。

.deadline の前の要素名を省略すると、このクラスを含むすべての要素が選択されます:

p.deadline { color: red;}h2.deadline { color: red;}

通常、より興味深いスタイルを取得するには、上記 2 つの組み合わせを使用します:

.deadline { color: red;}

上記code first 期限を含むすべての要素のフォントが赤に設定され、span 要素のテキストに斜体の効果が追加されます。このようにして、テキストに特別な斜体効果を加えたい場合は、そのテキストを に入れるだけです。

(2) マルチカテゴリセレクター 実際には、要素の calss 属性には 1 つの単語だけでなく、各単語がスペースで区切られた単語の文字列も含まれる場合があります。

たとえば、一部の要素には「警告」クラスが含まれ、一部の要素には「重要」クラスが含まれ、一部の要素には「警告重要」クラスの両方が含まれます。属性名の出現順序は重要ではありません:

.deadline { color: red;}span.deadline { font-style: italic;}

上記 2 つは同等です。

警告クラスを含む要素には印象的な赤いフォントが、重要な属性を含む要素には太字のフォントが、そして上記の 2 つの属性を含む要素には青色の背景が使用されることを希望します (可能かどうかは関係ありません)。まだ表示されるかどうか) テキストをクリアするには、次の CSS コードを使用できます:

class = "warning important"class = "important warning"

もちろん、3 番目の項目を次のように記述することもできます:

.warning { color: red;}.important { font-weight: bold;}.warning.important { background: blue;}

これは語順とは関係ありません。

.warning は、要素に含まれる他の属性の数に関係なく、warning 属性を含むすべての要素と一致することを説明します。 .重要は同じです。また、. important.warning は、要素に他のクラスがいくつ含まれていても、クラス リストに表示される順序に関係なく、これら 2 つの属性が含まれている限り、上記の 2 つの属性の両方を含むすべての要素と一致します。選ばれますよ！

同様に、マルチクラス セレクターの場合、要素名を前に追加すると、指定されたクラス名を含む指定された要素と一致します。 例:

.important.warning { background: blue;}

は、警告属性と重要な属性の両方を含む p 要素と一致します。 、その他も同様 上記 2 つのカテゴリを含む要素は選択されません。

3. ID セレクター

ID セレクターとクラス セレクターは似ていますが、違いは非常に重要です。

首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。

类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：

<p id="top-para">...</p><p id="foot-para">...</p>

使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如下：

#top-para {}#foot-para {}

这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。

4、属性选择器

属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。下面分别来说明：

(1)简单属性选择器

简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为:

元素名[属性名] 或 *[属性名]

比如我们希望选择带有alt属性的所有img元素：

img[alt] { ...}

选择带有title属性的所有元素：

*[title] { ...}

同类选择器类似，我们也可以根据多个属性信息进行选择，例如同时拥有href和title的a元素：

a[href][title] { ...}

组合使用类选择器使我们的选择更加富于灵活性。

(2)具体属性值选择器

如果我们希望更加精确地根据属性值来选择元素，我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为http://www.baidu.com的锚元素：

a[href="http://www.baidu.com"] { font-weight: bold;}

要特别注意的是，这里的具体值匹配实质上是一个字符串匹配，所以在这里对于class属性而言，词条的顺序是有关系的！

p[class="warning important"] { ...}

将不会匹配到

，也不会匹配到

，这里就是一个生硬的字符串匹配。

另外，想要同时匹配多个属性的值也是可以的：

p[class="warning"][title="para"] { ...}

将匹配到类为warning(仅有warning)，title属性为para的p元素。

(3)部分属性值选择器

根据属性值来匹配元素无疑比简单的属性匹配更加精细化了，但是似乎有些精细化过头了，字符串的完全匹配显得过于生硬。比如我们希望选择在一串属性值中出现了某个关键字的元素，不妨再次以class属性为例，我们希望选择所有包含了warning类的p元素，属性值匹配将无法做到，好在还是有办法的，我们可以使用以下的部分值匹配选择器：

p[class~="warning"] { ...}

该选择器在等号”=”前面添加了一个波浪号~，含义为包含后面的字串的匹配。以上代码将会选择所有class属性中包含”warning”的p元素。为了更加清楚地说明问题，它和以下的选择器是等价的：

p.warning { ...}

当然~=不仅仅只是用在class属性上，这只是一个示例。

再比如说，我们的文档中包含一系列人物介绍的div元素：

<div title="intro 1">...</div><div title="intro 2">...</div><div title="intro 3">...</div>

我们可以使用以下的方式选择所有人物简介div：

div[title~="intro"] { ...}

不过遗憾的是

也将会被选择进来，这是需要我们特别注意的地方。

关于部分值选择器也有其局限性，它匹配的是由空格分隔的单词，如果我们将上面的div写成下面的样子就会匹配失败：

<div title="intro-1">...</div><div title="intro-2">...</div><div title="intro-3">...</div>

对于这种情况，我们可以使用子串匹配属性选择器。规则如下：

div[title^="intro"] {...}  //title以intro开头的div元素div[title$="intro"] {...}  //title以intro结尾的div元素div[title*="intro"] {...}  //title中包含"intro"子串的div元素

举例来说：

a[href*="google."] {...}  

将包含所有链接中包含”google.”的a元素。

div[title$="y"] {...}

将包含以下所有div元素：

<div title="cloudy">...</div><div title="snowy">...</div><div title="rainy">...</div>

可以看出部分值属性选择器的功能是十分强大的。

5、派生选择器

派生选择器，乍一看名字不知所云，它又名上下文选择器，它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了，但为了更加清楚地说明问题，我们这里给出一个DOM树作为参考：

(1)后代选择器(descendant selector)

如上图，如果想要选择body元素的所有li子元素，方法如下：

body li { ...}

这里会选择所有的li后代，也就是图中的body下的所有li，不论他们之间相隔的代数有多少。

同理，如果想要选择h1元素下的span，可以使用以下代码：

h1 span { ...}

如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法：

.warning li { ...}

当然，如果希望只选择拥有warning类的div元素的li后代，可以写作：

div.warning li { ...}

由上面的例子不难看出，后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为：…的后代。多个选择器的情况如下：

ul li li { ...} 

这样，就会选择所有ul下包含在li元素下的所有li元素了，听起来十分拗口，参考我们的DOM树，会选择到文档树种最后一排li元素。

(2)子元素选择器(child selector)

子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取，用法如下：

ul > li { ...}

两个子元素中间用一个大于号>连接。上面的代码会选择到所有ul元素的直接li子元素。对应到DOM树中，所有的li元素都会被选中，原因是图中所有的li元素都是ul的子元素。

但是，以下代码将不会选中任何元素：

h1 > span { ...}

由于span是h1的”孙子元素”，h1没有直接的span子元素，因而上面的代码将不会选到任何结果。其他方面和后代元素类似，需要特别注意的就是子元素选择器不能隔代选取。

(3)相邻兄弟选择器(Adjacent sibling selector)

相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。

相邻兄弟选择器在实践中有比较不错的应用，例如，你想在一个h2标题后面的段落应用某种独到的样式或者希望在某类p段落后的table上添加一个额外的边距等等。

它的用法如下：

li + li { ...}

以上代码会选择所有作为li相邻元素的li元素，听起来又有点拗口，参考DOM树，它会选择除了排在第一个li元素的其余4个li元素，因为2个排在第1的li元素没有更靠前的兄弟元素来选择它。

再比如：

h1 + p { ...}

会选择所有紧跟h1后面的p兄弟元素。

h1.warning + p { ...}

会选择所有有用warning类的h1元素后面紧跟的p兄弟元素。

(4)几种派生选择器的结合使用

实际上，以上介绍的几种派生选择器可以结合使用，看下面的例子：

html > body li.warning + li { ...}

上面的选择器含义为：html元素的body子元素中，所有拥有warning类的li元素的相邻兄弟元素。

声明：

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