CSS 선택자(자세한 예)에 대해 이야기해 봅시다.

이 글은 요소 선택자, 클래스 선택자, ID 선택자, 속성 선택자 등 CSS 선택자에 대한 자세한 지식을 제공합니다. 도움이 되기를 바랍니다.

1. 요소 선택기 가장 일반적인 CSS 선택기는 의심할 여지없이 HTML 문서에서 이 선택기는 일반적으로 p, h2, 범위, a, p 또는 심지어와 같은 특정 HTML 요소를 나타냅니다. html.

사용법은 매우 간단합니다. 예:

html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 위의 CSS 코드는 전체 문서에 검정색 배경을 추가합니다. 모든 p 요소의 글꼴 크기를 30픽셀로 설정하고 모든 요소에 빨간색 배경을 추가합니다. 문서의 h2 요소.

위의 예를 통해서도 CSS의 기본 규칙 구조를 확인할 수 있습니다. selector 와 선언 블록 으로 구성되어 있습니다. 각 선언 블록에는 하나 이상의 선언이 포함되어 있습니다. 각 선언의 형식은 속성 이름: 속성 값 입니다. 아래 그림과 같이: 属性名 ： 属性值 。如下图所示：

每条声明以分号”;”结尾。 如果在一个声明中使用了不正确的属性值，或者不正确的属性，则该条声明会被忽略掉。 另外请注意不要忘记每条声明后面的分号。

我们举个不正确的例子：

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的属性值，这当然不是一个合法的属性值，该条声明将会被忽略掉。另外第二条声明使用了不正确的属性名wordsize，该条声明也将会忽略掉，结果只会正确处理第三条声明，等价于：

p {float: left;} 此外，我们也可以同时对多个html元素进行声明：

h1, h2, h3, h4, h5, h6, p {font-family: 黑体;} 这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。

如果我们希望一锅粥地选取所有的元素，可以使用通配符”*”：

* { font-size: 20px;} 这样所有的元素都将被选中，虽然font-size属性对于某些元素是无效的，那么它将被忽略。

2、类选择器 (1)单类选择器 单纯的元素选择器似乎还过于粗糙了，比如我们希望在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中，或者它可能出现在多种不同的元素中。这个时候，我们可以考虑使用类选择器(class selector)。

要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:

...

... 这样我们就可以用以下方式使用类选择器了：

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;} 以上代码首先会对所有的包含deadline的元素字体设置为红色，同时会对span元素中的文本添加额外的斜体效果。这样，如果你希望某处文本拥有额外的斜体效果将它们放在 中就可以了。

(2)多类选择器 在实践的做法中，元素的calss属性可能不止包含一个单词，而是一串单词，各个单词之间用空格隔开。

比如某些元素包含一个”warning”类，某些元素包含一个”important”类，某些元素同时包含”warning important”类。属性名出现的顺序没有关系：

class = "warning important" class = "important warning" 以上2者是等价的。

我们希望包含warning类的元素有一个醒目的红色字体，包含important属性的元素有一个加粗的字体显示，而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了)，我们可以使用以下的css代码：

.warning { color: red;} .important { font-weight: bold;} .warning.important { background: blue;} 当然，第三条你也可以写成：

.important.warning { background: blue;} 和词序没有关系。

说明一下， .warning 会匹配所有包含warning属性的元素，不管该元素还包含多少其他的属性。 .important 同理。而 .important.warning

각 문은 세미콜론 ";"으로 끝납니다. 잘못된 속성 값이나 잘못된 속성이 선언에 사용되면 선언이 무시됩니다.

또한 각 명령문 뒤에 세미콜론을 잊지 않도록 주의하세요.

잘못된 예를 들어보겠습니다. 🎜 p.warning.important {} 🎜위 예의 첫 번째 문에는 세미콜론이 누락되어 있으며 위 문 블록은 다음과 같이 구문 분석됩니다. 🎜 ...

...

🎜 red 글꼴 계열: 굵은 글씨 전체는 background-color의 속성값으로 해석될 것이며 이는 물론 합법적인 속성값이 아니며 이 명령문은 무시됩니다. 또한 두 번째 문에서는 잘못된 속성 이름인 wordsize를 사용합니다. 이 문도 무시됩니다. 결과적으로 세 번째 문만 올바르게 처리됩니다. 이는 다음과 같습니다. 🎜 #top-para {} #foot-para {} 🎜 또한 여러 HTML을 처리할 수도 있습니다. 동시에 요소 선언: 🎜 元素名[属性名] 或 *[属性名] 🎜문서의 모든 h1~h6 및 p 요소의 글꼴이 "검은색"으로 설정됩니다. 🎜🎜한 번에 모든 요소를 선택하려면 와일드카드 "*"를 사용할 수 있습니다. 🎜 img[alt] { ...} 🎜이 방법으로 모든 요소가 선택됩니다. 단, 글꼴 크기 속성은 일부 요소에 유효하지 않습니다. 무시되었습니다. 🎜 2. 클래스 선택기🎜 (1) 단일 유형 선택기 🎜단순한 요소 선택기는 너무 투박해 보입니다. , 원고 마감일 등 문서의 일부 중요한 내용을 강조하고 굵게 표시하고 싶습니다. 문제는 원고 마감일이 어떤 요소에 나타날지 확신할 수 없거나 여러 다른 요소에 나타날 수 있다는 것입니다. 이때 클래스 선택기 사용을 고려할 수 있습니다. 🎜🎜클래스 선택기를 사용하려면 먼저 파일 요소에 클래스 속성을 추가해야 합니다. 예를 들어 만료 날짜는 다음 요소에 나타날 수 있습니다.🎜 *[title] { ...} 🎜따라서 클래스 선택기를 다음과 같은 방법으로 사용할 수 있습니다.🎜 a[href][title] { ...} 🎜🎜포인트 "."와 클래스 이름이 클래스 선택기를 구성합니다. 🎜위의 두 선택기는 "deadline" 클래스를 포함하는 모든 p 요소와 h2 요소를 선택합니다. 이 속성을 포함하는 나머지 요소는 선택되지 않습니다. 🎜🎜.deadline 앞의 요소 이름을 생략하면 이 클래스를 포함하는 모든 요소가 선택됩니다. 🎜 a[href="http://www.baidu.com"] { font-weight: bold;} 🎜일반적으로 더 흥미로운 스타일을 얻기 위해 위 두 가지를 조합하여 사용합니다. 🎜 p[class="warning important"] { ...} 🎜위 code first 마감일을 포함하는 모든 요소의 글꼴이 빨간색으로 설정되고, 범위 요소의 텍스트에 추가 이탤릭 효과가 추가됩니다. 이렇게 하면 일부 텍스트에 추가 기울임꼴 효과를 적용하려면 안에 넣으세요. 🎜 (2) 다중 카테고리 선택기 🎜실제로 요소의 calss 속성은 하나의 단어뿐만 아니라 단어의 문자열을 포함할 수도 있습니다. 각 단어는 분리됩니다. 공백으로. 🎜🎜예를 들어 일부 요소에는 "경고" 클래스가 포함되고 일부 요소에는 "중요" 클래스가 포함되며 일부 요소에는 "경고 중요" 클래스가 모두 포함됩니다. 속성 이름이 나타나는 순서는 중요하지 않습니다. 🎜 p[class="warning"][title="para"] { ...} 🎜위 두 개는 동일합니다. 🎜🎜경고 클래스를 포함하는 요소는 눈에 띄는 빨간색 글꼴을 갖고, 중요한 속성을 포함하는 요소는 굵은 글꼴을 가지며, 위의 두 속성을 포함하는 요소도 파란색 배경을 갖기를 바랍니다(사용 가능 여부에 관계 없음). 여전히 표시되는지 여부) 텍스트를 지우려면 다음 CSS 코드를 사용할 수 있습니다. 🎜 p[class~="warning"] { ...} 🎜물론 세 번째 기사를 작성할 수도 있습니다. 🎜 p.warning { ...} 🎜단어 순서와는 아무 관련이 없습니다. 🎜🎜 .warning 은 요소에 포함된 다른 속성 수에 관계없이 경고 속성을 포함하는 모든 요소와 일치한다는 점을 설명하세요. .important 도 마찬가지입니다. 그리고 .important.warning 은 요소에 포함된 다른 클래스 수와 클래스 목록에 나타나는 순서에 관계없이 위의 두 속성을 동시에 포함하는 모든 요소와 일치합니다. , 이 두 속성을 포함하는 한 속성이 선택됩니다! 🎜🎜마찬가지로 다중 클래스 선택기의 경우 요소 이름을 앞에 추가하면 지정된 클래스 이름을 포함하는 지정된 요소와 일치합니다. 예: 🎜 ...

...

🎜는 경고 속성과 중요 속성을 모두 포함하는 p 요소와 일치합니다. 다른 항목도 마찬가지입니다. 위의 두 가지 범주가 포함된 요소는 선택되지 않습니다. 🎜 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视频教程 ）

CSS 선택자(자세한 예)에 대해 이야기해 봅시다.

관련 기사