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

1. 要素セレクター

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

と

で構成されています。各宣言ブロックには 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, h2, h3, h4, h5, h6, p {font-family: 黑体;}

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

(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 つのカテゴリを含む要素は選択されません。

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选择器的唯一性，也使其用法变得相对简单。

属性选择器在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 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."] {...}  

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

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

body li { ...}

h1 span { ...}

.warning li { ...}

div.warning li { ...}

ul li li { ...} 

ul > li { ...}

h1 > span { ...}

li + li { ...}

h1 + p { ...}

h1.warning + p { ...}

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