가장 일반적으로 사용되는 CSS 선택기 분석-CSS 튜토리얼-php.cn

ID, 클래스, 배경 선택기와 같은 기본 CSS 선택기를 마스터하셨을 것입니다. 그러나 이것이 CSS의 전부는 아닙니다. 다음은 가장 골치 아픈 브라우저 호환성 문제를 포함하여 CSS에서 가장 일반적으로 사용되는 30가지 선택기에 대한 체계적인 분석입니다. 이를 마스터해야만 CSS의 뛰어난 유연성을 진정으로 감상할 수 있습니다.

1. *

* { margin: 0; padding: 0 }

별표 선택기는 페이지의 모든 요소에서 작동합니다. 웹 디자이너는 종종 이를 사용하여 페이지의 모든 요소의 여백과 패딩을 0으로 설정합니다. * 선택자는 자식 선택자에서도 사용할 수 있습니다.

#container * { border: 1px solid black; }

로그인 후 복사

위 코드는 컨테이너 요소의 ID를 가진 모든 하위 요소에 적용됩니다. 꼭 필요한 경우가 아니면 페이지에서 별 선택기를 사용하지 않는 것이 좋습니다. 범위가 너무 크고 브라우저 리소스를 소모하기 때문입니다. 호환되는 브라우저: IE6+, Firefox, Chrome, Safari, Opera

2. #X

#container { width: 960px; margin: auto; }

로그인 후 복사

해시 범위에 해당 ID가 있는 요소. id는 가장 일반적으로 사용되는 CSS 선택기 중 하나입니다. ID 선택기의 장점은 정확성과 높은 우선순위입니다(우선순위 기준은 100으로, 이는 클래스의 10보다 훨씬 높습니다). 자바스크립트 스크립트 후크에 대한 최선의 선택이므로 단점도 분명합니다. 우선순위가 너무 높고 재사용성이 좋지 않으므로 ID 선택기를 사용하기 전에 실제로 ID 선택기를 사용할 필요가 없는 시점에 있는지 자문해 보는 것이 좋습니다. 호환 가능한 브라우저: IE6+, Firefox, Chrome, Safari, Opera

3.X

.error { color: red; }

로그인 후 복사

클래스 선택자입니다. 클래스 선택기와 ID 선택기의 차이점은 클래스 선택기가 스타일을 지정하려는 요소 그룹에 대해 작동할 수 있다는 것입니다. 호환 가능한 브라우저: IE6+, Firefox, Chrome, Safari, Opera

4.X Y

li a { text-decoration: none; }

로그인 후 복사

이것은 또한 가장 일반적으로 사용되는 선택기인 하위 선택기입니다. li 아래의 하위 요소 Y를 선택하는 데 사용됩니다. li의 모든 a에는 밑줄이 그어져 있지만 li의 ul도 있습니다. ul 아래의 li에 밑줄이 그어지는 것을 원하지 않습니다. 이 하위 항목 선택기를 사용할 때 스타일을 모든 하위 요소에 적용할지 여부를 고려하세요. 이 자손 선택기의 또 다른 기능은 네임스페이스와 유사한 기능을 만드는 것입니다. 예를 들어 위 코드 스타일의 범위는 분명히 li입니다. 호환되는 브라우저: IE6+, Firefox, Chrome, Safari, Opera

5.X

a { color: red; }
ul { margin-left: 0; }

로그인 후 복사

태그 선택기. 태그 선택기를 사용하여 범위 내의 모든 해당 태그에 대해 작업을 수행합니다. *보다 우선순위가 더 높습니다. 호환되는 브라우저: IE6+, Firefox, Chrome, Safari, Opera

6. X:visited 및 X:link

a:link { color: red; } a:visted { color: purple; }
a:link { color: red; }
a:visted { color: purple; }

로그인 후 복사

사용: 클릭되지 않은 링크 태그에 대해 작동하는 링크 의사 클래스. :hover 의사 클래스는 클릭한 링크에서 작동합니다. 호환 브라우저: IE7+, Firefox, Chrome, Safari, Opera

7.X+Y

ul + p { color: red; }

로그인 후 복사

인접 선택기, 위 코드는 ul p 다음의 첫 번째 코드와 일치하며 텍스트를 설정합니다. 단락 내의 색상을 빨간색으로 변경합니다. (첫 번째 요소만 일치) 호환 브라우저: IE7+, Firefox, Chrome, Safari, Opera

8. X>Y

div#container > ul {border: 1px solid black;}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

로그인 후 복사

하위 선택기. 하위 선택자 X Y와 달리 하위 선택자는 X 아래의 직계 하위 Y에만 작동합니다. 위의 CSS 및 html 예제에서 div#container>ul은 컨테이너의 가장 최근 ul에서만 작동합니다. 이론적으로 말하면 X > Y는 옹호할 만한 선택자이지만 안타깝게도 IE6에서는 이를 지원하지 않습니다. 호환 브라우저: IE7+, Firefox, Chrome, Safari, Opera

9. X ~ Y

ul ~ p {color: red;}

로그인 후 복사

위에서 언급한 인접 선택기 X의 차이점 +Y 및 X는 X~Y가 X와 동일한 수준의 모든 Y 요소와 일치하는 반면 X+Y는 첫 번째 요소만 일치한다는 것입니다. 호환 브라우저: IE7+, Firefox, Chrome, Safari, Opera

10.X[title]

a[title] {color: green;}

로그인 후 복사

속성 선택기. 예를 들어 위 코드는 링크 요소를 제목 속성과 일치시킵니다.

호환 브라우저: IE7+, Firefox, Chrome, Safari, Opera

11.X[title=”foo”]

a[href="http://www.xuanfengge.com"] {color: #1f6053;}

로그인 후 복사

속성 선택기. 위 코드는 href 속성이 있는 모든 링크와 일치하며 href는 http://www.xuanfengge.com입니다.

이 기능은 아주 좋은데 다소 제한적이네요. href에 css9.net이 포함된 모든 링크를 일치시키려면 어떻게 해야 할까요? 다음 선택기를 살펴보세요. 호환 브라우저: IE7+, Firefox, Chrome, Safari, Opera

12.X[title*=”css9.net”]

a[href*="xuanfengge.com"] {color: #1f6053;}

로그인 후 복사

속성 선택기. 우리가 원하는 대로 위 코드는 href에 "xuanfengge.com"이 포함된 모든 링크와 일치합니다.

호환 브라우저: IE7+, Firefox, Chrome, Safari, Opera

13.X[href^=”http”]

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {
color: red;
}

로그인 후 복사

더 귀찮아 보입니다. 또 다른 해결책은 'data-file'

html 코드

<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下： a[data-filetype="image"] { color: red;}

로그인 후 복사

와 같은 특정 속성을 모든 이미지 링크에 추가하여 이미지에 대한 모든 링크의 글꼴 색상이 빨간색이 되도록 하는 것입니다.

호환 브라우저: IE7+, Firefox, Chrome, Safari, Opera

15.X[foo~=”bar”]

속성 선택기. 속성 선택기의 물결표 기호를 사용하면 속성 값에서 공백으로 구분된 여러 값 중 하나를 일치시킬 수 있습니다. 다음 예를 살펴보십시오.

html 코드

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

로그인 후 복사

css 코드

a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}

로그인 후 복사

위 예에서 "외부" 링크가 포함된 글꼴을 일치시키세요. data-info 속성 색상은 빨간색입니다. 검은색 테두리를 설정하려면 data-info 속성에 "image"가 포함된 링크를 일치시키세요.

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

17. X:checked

checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。

input[type=radio]:checked {
border: 1px solid black;
}

로그인 후 복사

上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

18. X:after和X:before

这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：

h1:after {content:url(/i/logo.gif)}

로그인 후 복사

上面的代码实现了在h1标题的后面显示一张图片。

我们也经常用它来实现清除浮动，写法如下：

.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}

로그인 후 복사

19. X:hover

div:hover {
background: #e3e3e3;
}

로그인 후 복사

:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。

需要注意的是，在ie 6中，:hover只能用于链接元素。

这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：

a:hover {
border-bottom: 1px solid black;
}

로그인 후 복사

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

20. X:not(selector)

p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}

로그인 후 복사

下面的代码中设定了段落中第一行的样式：

p::first-line {
font-weight: bold;
font-size: 1.2em;
}

로그인 후 복사

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera(IE6竟然支持，有些意外啊。)

22. X:nth-child(n)

li:nth-child(3) {
color: red;
}

로그인 후 복사

这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。

看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：

tr:nth-child(2n) {
background-color: gray;
}

로그인 후 복사

兼容浏览器：IE9+、Firefox、Chrome、Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {
color: red;
}

로그인 후 복사

与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {
border: 1px solid black;
}

로그인 후 복사

与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black; }

로그인 후 복사

与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

26. X:first-child

:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框，如：

ul:nth-last-of-type(3) {
border: 1px solid black;
}

로그인 후 복사

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

27. X:last-child

ul > li:last-child {
border-bottom:none;
}

로그인 후 복사

与:first-child类似，它匹配的是序列中的最后一个元素。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

28. X:only-child

div p:only-child {
color: red;
}

로그인 후 복사

这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

<div>
<p> My paragraph here. </p>
</div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>

로그인 후 복사

在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

29. X:only-of-type

li:only-of-type {
font-weight: bold;
}

로그인 후 복사

这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

30. X:first-of-type

:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：

ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}

로그인 후 복사

方案二：

p + ul li:last-child {
font-weight: bold;
}

로그인 후 복사

方案三：

ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}

로그인 후 복사

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。

总结：

如果你正在使用老版本的浏览器，如IE 6，在使用上面css选择器时一定要注意它是否兼容。不过，这不应成为阻止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。

另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度