CSS 선택기

CSS 선택기

[와일드카드 선택기]

* 별표 선택기는 페이지의 모든 요소와 일치하지만 프로덕션 코드에서는 절대 사용하지 않는 것이 좋습니다. 브라우저에 불필요한 부담을 많이 줍니다.

*{

margin:0;

padding:0;

}

[태그 선택기](유형 선택기라고도 함) ): 즉, html 태그 이름을 선택기로 사용하세요.

demo: ul {}

[id selector]: ID 선택기는 주의해서 사용해야 합니다.

필요한 스타일 태그에 대한 ID 이름을 사용자 정의한 다음 CSS 파일에 #custom id name{CSS style}을 작성합니다. 참고: 각 ID 이름은 서로 달라야 합니다.

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

ID 선택자는 고유하며 재사용이 허용되지 않습니다. 가능하다면 먼저 태그 이름, 새 HTML5 요소 또는 의사 클래스를 사용해 보세요.

[클래스 선택기](클래스)

클래스 이름 사용자 정의, 사용 방법: CSS 파일에 .class 이름 {css 스타일}.

.className을 작성합니다. {border-color: blue;font-size:16px;}

참고: 하나의 레이블은 여러 클래스 이름을 사용할 수 있으며, 하나의 클래스 이름은 여러 레이블에서 사용할 수 있습니다.

id와 class의 차이점

id 선택자, id 이름은 한 번만 사용할 수 있으며 중복될 수 없습니다. getElementById('')

클래스 선택기에서는 클래스 이름을 반복적으로 사용할 수 있습니다. 예를 들어 페이지의 여러 요소가 동일한 스타일 정의를 사용할 수 있습니다.

[그룹 선택기]: 여러 태그를 동시에 제어합니다. 태그 이름은

a,p,span{}

[조합 선택기]로 구분됩니다. 태그 이름, ID 이름, 클래스 이름을 혼합하고 일치시켜 선택할 수도 있습니다. style

p .p {}는 p 태그 아래 클래스 p가 있는 모든 태그를 나타냅니다.

p,#a {}는 ID가 a이고 모든 p 태그가 있는 태그를 나타냅니다.

[관계 선택자]: 관계 선택자는

선택자 이름                   설명                   버전     영문 이름  

E F    포함 선택자  E에 포함된 F 요소 모두 선택 요소. CSS1(Descendant Combinator)은 하위 선택자라고도 합니다.

E>F 하위 선택자는 E 요소인 F 하위 요소를 모두 선택합니다. CSS2(하위 조합자)

E+F 인접 선택기는 E 요소 바로 다음에 F 요소를 선택합니다. CSS2 (인접 형제 조합자)

E~F 형제 선택자는 E 요소의 모든 형제 요소 F를 선택합니다. CSS3(일반 형제 조합자)

[의사 클래스 선택자]

모든 태그가 의사 클래스 선택자를 사용할 수 있는 것은 아닙니다. 여기서는 a 태그의 의사 클래스 선택자에 대해서만 설명합니다.

a:link {color: #FF0000; text-decoration: none}         //未访问的链接
a:visited {color: #00FF00; text-decoration: none}     //已访问的链接
a:hover {color: #FF00FF; text-decoration: underline}   //鼠标在链接上
a:active {color: #0000FF; text-decoration: underline}  //激活链接

✪참고: 위의 의사 클래스 중 하나 이상을 작성할 수 있습니다. 하지만 순서대로 작성해야 합니다. 그렇지 않으면 문제가 발생합니다!

선택기 버전 버전 설명

E:link CSS1 액세스하기 전에 하이퍼링크 스타일을 설정합니다.

E:visited CSS1 링크 주소를 방문했을 때 하이퍼링크 a의 스타일을 설정합니다.

E:hover CSS1/2 요소에 마우스를 올렸을 때의 스타일을 설정합니다.

E:active CSS1/2 사용자가 요소를 활성화할 때(마우스 클릭과 놓기 사이에 발생하는 이벤트) 요소의 스타일을 설정합니다.

E:focus CSS1/2 해당 요소가 입력 포커스가 될 때(요소의 onfocus 이벤트 발생) 스타일을 설정합니다.

E:lang(fr) CSS2 특수 언어를 사용하여 E 요소를 일치시킵니다. 거의 사용되지 않음

E:not(s) CSS3은 s 선택자를 포함하지 않는 요소 E와 일치합니다.

<:> E: 문서에 있는 E 요소의 루트 요소와 일치하는 루트 CSS3입니다. 종종 html 요소

E:first-child를 참조합니다. CSS2는 상위 요소의 첫 번째 하위 요소 E와 일치합니다.

E:last-child CSS3 상위 요소의 마지막 하위 요소 E와 일치합니다.

E:only-child CSS3 상위 요소의 유일한 하위 요소 E와 일치합니다.

E:nth-child(n) CSS3 상위 요소의 n번째 하위 요소 E와 일치합니다.

E:nth-last-child(n) CSS3 상위 요소 하단에서 n번째 하위 요소 E와 일치합니다.

E:first-of-type CSS3 동일한 유형의 첫 번째 형제 요소 E와 일치합니다.

E:last-of-type CSS3 동일한 유형의 마지막 형제 요소 E와 일치합니다.

E:only-of-type CSS3 동일한 유형의 유일한 형제 요소 E와 일치합니다.

E:nth-of-type(n)    　CSS3    匹配同类型中的第n个同级兄弟元素E。

E:nth-last-of-type(n) CSS3    匹配同类型中的倒数第n个同级兄弟元素E。

E:empty              　　 CSS3    匹配没有任何子元素（包括text节点）的元素E。

E:checked            　　CSS3    匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled            　　 CSS3    匹配用户界面上处于可用状态的元素E。

E:disabled           　　 CSS3    匹配用户界面上处于禁用状态的元素E。

E:target               　　 CSS3    匹配相关URL指向的E元素。

 

  ★first-child 与first-of-type的区别：

举例：

4533d610cdb8960dc10af1294aeeedba
e388a4556c0f65e1904146cc1a846bee第一个子元素94b3e26ee717c64999d7867364b1b4a3
4a249f0d628e2318394fd9b75b4636b1第二个子元素473f0a7621bec819994bb5020d29372a
45a2772a6b6107b401db3c9b82c049c2第三个子元素54bdf357c58b8a65c66d7c19c8e4d114
45a2772a6b6107b401db3c9b82c049c2第四个子元素54bdf357c58b8a65c66d7c19c8e4d114
94b3e26ee717c64999d7867364b1b4a3

语法说明：

p:first-child  　　　　  匹配到的是p元素,因为p元素是p的第一个子元素；

h1:first-child  　　　　匹配不到任何元素，因为在这里h1是p的第二个子元素，而不是第一个；

span:first-child  　　   匹配不到任何元素，因为在这里两个span元素都不是p的第一个子元素；

p:first-of-type  　　　　匹配到的是p元素,因为p是p的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素；

h1:first-of-type  　　   匹配到的是h1元素，因为h1是p的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素；

span:first-of-type  　　匹配到的是第三个子元素span。这里p有两个为span的子元素，匹配到的是第一个。

所以，通过以上两个例子可以得出结论：

:first-child 　　   匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 　　匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

✪注意：当然这些元素的范围都是属于同一级的，也就是同辈的。

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

【属性选择符】

选择符         　　　　　版本   　　描述

E[att]               　　CSS2  选择具有att属性的E元素。

E[att="val"]    　　 CSS2  选择具有att属性且属性值等于val的E元素。

E[att~="val"] 　　 CSS2  选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

E[att^="val"] 　　 CSS3  选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"] 　　 CSS3  选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]  　　CSS3  选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"]  　　 CSS2  选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

【伪对象选择符】

选择符                              　　　　版本     描述

E:first-letter/E::first-letter  　CSS1/3  设置对象内的第一个字符的样式。

E:first-line/E::first-line       　CSS1/3  设置对象内的第一行的样式。

E:before/E::before　　　　　　CSS2/3  设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E:after/E::after                 　　CSS2/3  设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E::placeholder                   　   CSS3    设置对象文字占位符的样式。

E::selection                     　　  CSS3    设置对象被选择时的颜色。    

 

✪注意：CSS3的语法改成:: ,原本CSS1是: ,故还是直接用两个冒号为妥。

举例：

html：

<input type="search" placeholder="测试">

css:

input::-webkit-input-placeholder {color: green;}

 

更多CSS选择符 相关文章请关注PHP中文网！