この記事では、要素セレクター、クラス セレクター、ID セレクター、属性セレクターなど、CSS のセレクターに関する詳細な知識を提供します。お役に立てれば幸いです。 1. 要素セレクター 最も一般的な CSS セレクターは間違いなく要素セレクターです。HTML ドキュメントでは、このセレクターは通常、特定の HTML 要素を指します。例: p、h2、span、a、p、または html。 使用方法は非常に簡単です。例: html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 上記の CSS コードは、ドキュメント全体に黒い背景を追加します。すべての p 要素のフォント サイズを 30 ピクセルに設定し、灰色の背景; ドキュメント要素にすべての h2 を追加すると、赤色の背景が追加されます。 css の基本的なルール構造は、上の例からもわかります。 セレクター と 宣言ブロック で構成されます。各宣言ブロックには 1 つ以上の宣言が含まれます。各宣言の形式は、属性名:属性値です。次の図に示すように: 各ステートメントはセミコロン「;」で終わります。 不正な属性値または不正な属性がステートメントで使用されている場合、そのステートメントは無視されます。 また、各ステートメントの後のセミコロンを忘れないように注意してください。 間違った例を見てみましょう: p { background-color: red font-family: 黑体; wordsize: 20px; float: left; } 上記の例では、最初のステートメントにセミコロンが欠落しており、上記のステートメント ブロックは次のように解析されます: p { background-color: red font-family: 黑体; wordsize: 20px; float: left; } red font-family: ボールド全体は、background-color の属性値として解析されます。もちろん、これは正当な属性値ではないため、このステートメントは無視されます。さらに、2 番目のステートメントでは、間違った属性名 wordsize が使用されています。このステートメントも無視されます。その結果、3 番目のステートメントのみが正しく処理されます。これは、 p {float: left;} と同等です。また、複数の HTML 要素を宣言します: h1, h2, h3, h4, h5, h6, p {font-family: 黑体;} これにより、ドキュメント内のすべての h1 ～ h6 および p 要素のフォントが「太字」に設定されます。 すべての要素を一度に選択したい場合は、ワイルドカード「*」を使用できます: * { font-size: 20px;} この方法では、font-size 属性が無効であっても、すべての要素が選択されます。一部の要素では無視されます。 2. クラス セレクター (1) 単一クラス セレクター 単純な要素セレクターでは大まかすぎるように思えます。たとえば、文書内の太字を強調表示したい場合などです。原稿の締め切りなどの重要な情報。問題は、原稿の締め切り日がどの要素に表示されるかがわからないこと、または複数の異なる要素に表示される可能性があることです。現時点では、クラス セレクターの使用を検討できます。 クラス セレクターを使用するには、まずファイル要素にクラス属性を追加する必要があります。たとえば、期限は次の要素に表示される場合があります: ... ... このようにして、クラスを使用できます。次の方法で選択します。 デバイス: p.deadline { color: red;} h2.deadline { color: red;} ドット「.」とクラス名がクラス セレクターを形成します。 上記の 2 つのセレクターは、「deadline」クラスを含むすべての p 要素と h2 要素を選択します。この属性を含む残りの要素は選択されません。 .deadline の前の要素名を省略すると、このクラスを含むすべての要素が選択されます: .deadline { color: red;} 通常、より多くの要素を取得するには、上記の 2 つの組み合わせを使用します。興味深いスタイル: .deadline { color: red;} span.deadline { font-style: italic;} 上記のコードは、まず、期限を含むすべての要素のフォントを赤に設定し、さらに、span 要素内のテキストに斜体効果を追加します。このようにして、テキストに特別な斜体効果を加えたい場合は、そのテキストを に入れるだけです。 (2) マルチカテゴリセレクター 実際には、要素の calss 属性には 1 つの単語だけでなく、各単語がスペースで区切られた単語の文字列も含まれる場合があります。 たとえば、一部の要素には「警告」クラスが含まれ、一部の要素には「重要」クラスが含まれ、一部の要素には「警告重要」クラスも含まれます。属性名の出現順序は重要ではありません。 class = "warning important" class = "important warning" 上記 2 つは同等です。 警告クラスを含む要素には印象的な赤いフォントが表示され、重要な属性を含む要素には太字のフォントが表示され、上記の 2 つの属性を含む要素には青色の背景が表示されることを希望します (関係なく)テキストはまだはっきりと見えますか?) の場合は、次の CSS コードを使用できます: .warning { color: red;} .important { font-weight: bold;} .warning.important { background: blue;} もちろん、3 番目の項目を次のように記述することもできます: .important.warning { background: blue;} は何も関係ありません語順。 .warning は、要素に含まれる他の属性の数に関係なく、warning 属性を含むすべての要素と一致することを説明します。 .重要同様に。そして、. important.warning は、要素に含まれる他のクラスの数に関係なく、クラス リスト内での出現順序に関係なく、上記の 2 つの属性の両方を含むすべての要素と一致します。これら 2 つの属性が含まれているため、選択されます。 同様に、複数のクラス セレクターの場合、要素名を前に追加すると、指定されたクラス名を含む指定された要素と一致します。例: p.warning.important {} は両方の警告と一致します。および important 属性を持つ p 要素は、上記 2 つのカテゴリを含む他の要素は選択されません。 3、ID选择器 ID选择器和类选择器有些类似，但是差别又十分显著。 首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。 类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如： ... ... 使用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属性上，这只是一个示例。 再比如说，我们的文档中包含一系列人物介绍的p元素： ... ... ... 我们可以使用以下的方式选择所有人物简介p： p[title~="intro"] { ...} 不过遗憾的是也将会被选择进来，这是需要我们特别注意的地方。 关于部分值选择器也有其局限性，它匹配的是由空格分隔的单词，如果我们将上面的p写成下面的样子就会匹配失败： ... ... ... 对于这种情况，我们可以使用子串匹配属性选择器。规则如下： p[title^="intro"] {...} //title以intro开头的p元素 p[title$="intro"] {...} //title以intro结尾的p元素 p[title*="intro"] {...} //title中包含"intro"子串的p元素 举例来说： a[href*="google."] {...} 将包含所有链接中包含”google.”的a元素。 p[title$="y"] {...} 将包含以下所有p元素： ... ... ... 可以看出部分值属性选择器的功能是十分强大的。 5、派生选择器 派生选择器，乍一看名字不知所云，它又名上下文选择器，它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了，但为了更加清楚地说明问题，我们这里给出一个DOM树作为参考： (1)后代选择器(descendant selector) 如上图，如果想要选择body元素的所有li子元素，方法如下： body li { ...} 这里会选择所有的li后代，也就是图中的body下的所有li，不论他们之间相隔的代数有多少。 同理，如果想要选择h1元素下的span，可以使用以下代码： h1 span { ...} 如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法： .warning li { ...} 当然，如果希望只选择拥有warning类的p元素的li后代，可以写作： p.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元素的相邻兄弟元素。 （学习视频分享：css视频教程）
