집 > 기사 > 웹 프론트엔드 > CSS 선택기 사용 방법 요약

CSS 선택기 사용 방법 요약

php中世界最好的语言원래의: 2018-05-25 11:36:532417검색

이번에는 CSS 선택기 사용 방법과 CSS 선택기 사용 시 주의사항에 대해 요약해서 가져왔습니다. 실제 사례를 살펴보겠습니다.

CSS selector

1.id selector #id{ }, "#id"는
2.Class selector.class{ }, ".class name"은
3.Tag selector p { } 요소를 선택합니다. , "태그 이름"은 요소 선택
4. 와일드카드 선택기 { } , ""는 모든 요소 선택
5. 조합 선택기:
그룹 선택기 E, F ","는 쉼표로 구분, 동시에 선택 E, F 요소
하위 선택기 E F는 공백으로 구분되어 E 요소 아래의 모든 F 요소를 선택합니다(F 요소가 중첩된 레벨 수에 관계없이 선택됨)
직접 하위 선택기 E > " 열고, E 요소 아래의 직계 하위 요소 F, 즉 E 요소 아래의 첫 번째 수준 하위 요소 F를 선택합니다
인접 형제 선택기 E + F, "+"는 직접 인접한을 선택한 후 구분합니다. E 요소 요소 F
일반 인접 선택자 E ~ F, "~"는 선택한 E 요소 뒤에 있는 모든 형제 요소 F를 분리합니다
6. 의사 클래스 선택자 L-V-H-A,:link,:visited,:hover,: active
7. 의사 요소 선택기
E::first-line은 E 요소 콘텐츠의 첫 번째 줄을 선택합니다
E::first-letter는 E 요소 콘텐츠의 첫 글자를 선택합니다
E::before는 E 요소 콘텐츠 앞에 콘텐츠를 삽입합니다
E::after E 요소 뒤에 콘텐츠 삽입
앞과 뒤는 추가 콘텐츠를 삽입할 수 있는 위치이며 콘텐츠 속성
8.속성 선택기
input[type="text"] {
와 함께 사용해야 합니다. width :150px;
}

선택기 우선순위

css 선택기 우선순위 코어: 각 선택기에는 고유한 우선순위가 있으며 범위가 구체적일수록 우선순위가 높아집니다.
CSS 우선 순위는 다음과 같습니다.
1. 속성 뒤에 !important를 사용하면 페이지의 어느 위치에나 정의된 요소 스타일이 재정의됩니다.
2. 요소 태그에 스타일 속성으로 작성
4. 클래스 선택기
6. 태그 선택기
8. CSS 스타일 규칙이 여러 개의 선택기로 구성된 경우 id 선택기의 가중치는 1000, 클래스 선택기의 가중치는 100, 레이블 선택기의 가중치는 10이며 가중치를 합산하면 단점 수준에 따라 어느 것이 우선 순위를 갖는지 결정됩니다. 두 CSS 규칙의 가중치가 동일할 경우 더 구체적인 사람은 어느 것을 사용하게 됩니다. 즉, 가중치가 더 높은 선택기가 더 구체적이고 우선순위가 더 높습니다. 두 개의 선택기 규칙과 가중치가 동일하면 이후 스타일이 이전 스타일을 덮어씁니다!
p {color: #333;}
p {color: #666;}
이런 식으로 p 복사본의 색상은 분명히 #666

클래스 및 id의 사용 시나리오

id가 고유 식별자입니다. 페이지에서 클래스는 페이지의 특정 유형의 스타일을 식별하는 스타일이 보편적이며 반복적으로 사용될 수 있습니다. 요소의 클래스 이름은 class="intro other"로 작성할 수 있습니다. 즉, 여러 클래스 이름이 있을 수 있습니다. 이는 두 클래스 이름에 해당하는 스타일을 겹쳐놓는 것을 의미합니다. 아이디 이름은 이렇게 쓸 수 없습니다. ID 이름은 페이지 레이아웃(큰 프레임 표시)에 자주 사용되며, 클래스는 일반적으로 스타일 정의를 위해 로컬 페이지 레이아웃에 사용됩니다. 이름 지정 시 클래스 이름을 동일하게 작성할 수 있으므로 해당 클래스에 대해 스타일을 한 번만 작성하면 됩니다. , 동일한 스타일의 요소를 재사용할 수 있습니다.

CSS 선택기를 사용할 때 적절한 네임스페이스를 구분하여 코드 가독성을 높이고 유지 관리를 용이하게 하세요

선택기 사용 예

html
#header{} /*选中id为header的元素*/
.header{}    /*选中class=header的元素*/ 
.header .logo{}  /*选中class=header下的所有class=logo的元素*/ 
.header.mobile{}  /*选中class="header mobile"的元素*/ 
.header p, .header h3{}  /*选中class=header元素下的所有p元素，同时选中class=header元素下的所有h3元素*/ 
#header .nav>li{}  /*选中id=header元素下的所有class=nav元素的直接子元素li*/ 
#header a:hover{}  /*选中id=header元素下的所有a元素，并使用hover伪类*/

일반적인 의사 클래스 선택기

[1]구조적 의사 클래스 선택기
E:first-child는 E가 위치한 상위 요소 아래의 첫 번째 하위 요소를 선택하고, 하위 요소는 E 요소입니다.
E:last-child는 E가 있는 상위 요소 아래의 마지막 하위 요소를 선택하고, 하위 요소는 E 요소입니다.
E:root는 E가 있는 루트 노드의 요소를 선택합니다. HTML, HTML 요소를 선택합니다.
E:nth -child(n)는 E가 있는 상위 요소 아래에서 n번째 하위 요소를 선택하고, 하위 요소는 E 요소입니다
E:nth-last-child(n )는 E가 위치한 상위 요소 아래에서 n번째 하위 요소를 선택하고, 하위 요소는 다음과 같습니다. 하위 요소는 E 요소입니다
E:nth-of-type(n)의 요소 중에서 n번째 E 요소를 선택합니다. E가 위치한 상위 요소 아래의 동일한 유형
E:nth-last-of-type(n) E가 위치한 상위 요소를 선택합니다. 해당 요소
E 아래의 동일한 유형의 요소 중 아래쪽에서 n번째 E 요소: first-of-type E가 위치한 상위 요소 아래 같은 타입의 요소 중 첫 번째 E 요소를 선택
E:last-of-type 상위 요소 아래 같은 타입의 요소 중 마지막 E 요소를 선택
E:only-child는 상위 요소 내의 유일한 하위 요소와 일치하며 이는 :first-child:last-child 또는 :nth-child(1):nth-last-child(1)
E:only-of와 동일합니다. -type은 상위 요소 아래에서 동일한 태그를 사용하는 유일한 하위 요소와 일치합니다. 이는 first-of-type:last-of-type 또는:nth-of-type(1):nth-last-of-type과 동일합니다. (1)
E:empty는 하위 요소가 없고 요소에 텍스트 노드가 없는 요소와 일치합니다.
E:not(F)는 현재 선택기와 일치하지 않는 모든 요소와 일치합니다.
【2】동적 의사 -class selector L-V-H-A 주문
link-visited-hover-active

a:link{
 color:red;
 }
 
 a:visited{
 color:blue;
 }
 
 a:hover{
 color:gree;
 font-size:20px;
 }
 
 a:active{
 color:gold;
 }
 a:focus{
 color:gold; //a元素获得焦点后的样式
 }

:first-child와:first-of-type

E:first-child 사이의 역할과 차이점은 E 요소를 지정하고 첫 번째 E를 찾습니다. 상위 요소 아래의 요소
E: first-of-type은 E 유형의 요소를 지정하고 상위 요소 아래에서 E 유형의 첫 번째 요소를 찾습니다.

코드 예:

html
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<p> 
</p><p>aa</p>
<h3>bb</h3>
<h3>ccc</h3>

CSS 선택기 사용 방법 요약

.item1 :first-child{color:red;}class=item1 요소의 상위 요소 p 아래의 첫 번째 하위 요소 item1 글꼴은 빨간색<h3>bb<h3>ccc&lt입니다. ;h3></h3> </h3>class=item1이지만 상위 요소 아래의 첫 번째 하위 요소는 아닙니다. .item1:first-child{color:red;}class=item1元素的父元素p下的第一个子元素item1字体红色<h3>bb<h3>,<h3>ccc<h3></h3> </h3> </h3> </h3>虽然class=item1但他们不是其父元素下的第一个子元素。

.item1:first-of-type{background:blue;}class=item1元素的父元素下的同类型元素中的第一个class=item1的元素。<p class="item1">aa</p>

.item1:first-of-type{배경:blue;}class=item1 요소의 상위 요소 아래 동일한 유형의 요소 중 첫 번째 class=item1 요소입니다. <p class="item1">aa</p>의 상위 요소 p 아래에 있는 동일한 유형의 요소(p, h3)는 파란색 배경의 첫 번째 요소인 aa, bb를 선택합니다.

text-align: center

의 역할은 요소 내 텍스트의 수평 중앙 정렬을 설정합니다. text-align은 블록 수준 요소(p 또는 p)에 적용됩니다. 블록 수준 요소(p/p) 내부의 인라인 요소
(텍스트, 그림, 입력 상자)의 정렬을 설정할 수 있습니다.

text-align에는 왼쪽/오른쪽/가운데/양쪽 정렬/상속, 왼쪽 정렬/오른쪽 정렬/가운데 정렬/양쪽 끝 정렬/상위 요소 정렬 값 상속 등 5가지 값이 있습니다. 양쪽 끝을 정렬할 때 각 줄의 단어 간격이 일치하지 않을 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!