집 > 기사 > 웹 프론트엔드 > CSS 선택자의 일반적인 문제는 무엇입니까?

CSS 선택자의 일반적인 문제는 무엇입니까?

php中世界最好的语言원래의: 2018-03-08 15:51:312632검색

이번에는 CSS 선택기와 관련된 몇 가지 일반적인 문제를 다루겠습니다. CSS 선택기와 관련된 일반적인 문제를 처리할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

공통 선택자는 무엇인가요?
1.태그 선택기
p{ }/태그 이름이 p인 요소 선택/
2. 클래스 선택기
.box{ }/클래스 이름이 있는 요소 선택 box/
3.ID 선택기
#header { }/id 이름 헤더가 있는 요소 선택/
1.4Wildcard selector
{ }/페이지의 모든 요소 선택/
1.5 Selector prefix
div.bd{}/클래스 이름 bd 및 라벨 div 선택 요소 /
1.6속성 선택기
[비활성화]{}/ 비활성화된 속성이 있는 모든 요소를 선택합니다*/

선택기의 우선순위는 무엇인가요?
! important>인라인 스타일>ID 선택기>의사 클래스>속성 선택기>클래스 선택기>요소(유형) 선택기>범용 선택기(*)>브라우저 사용자 정의

클래스 및 ID의 사용 시나리오?
id는 태그 개체 기반으로 빠르게 가져옵니다. 제공된 고유 ID 번호에 따라. 클래스는 특정 스타일을 클래스 클래스에 넣습니다. 이 스타일에 대한 태그가 필요한 경우 이 클래스를 추가할 수 있습니다.

CSS 선택기를 사용할 때 왜 적절한 네임스페이스를 지정해야 합니까?
스타일 오염을 방지합니다.

다음 선택자는 무엇을 의미하나요?

#header{
}/选择id名为header的元素/
.header{
}/选择class名为header的元素/
.header .logo{
}/选择名为header元素内所有名为logo的元素/
.header.mobile{
}/选择class名为header且为mobile的元素/
.header p, .header h3{
}/选择class名为header内所有的p标签和h3标签/
#header .nav>li{
}/选择祖父元素id名为header内父元素class名为nav的标签下/
#header a:hover{
}/选择祖父元素id名为header内a标签被hover的元素/

알고 있는 의사 클래스 선택자를 나열하세요.
:active는 활성화된 요소에 스타일을 추가합니다.
:focus는 키보드 입력 포커스가 있는 요소에 스타일을 추가합니다.
:hover는 마우스를 요소 위로 가져갈 때 요소에 스타일을 추가합니다.
:link 방문하지 않은 링크에 스타일을 추가합니다.
:visited는 방문한 링크에 스타일을 추가합니다.
:first-child는 요소의 첫 번째 하위 요소에 스타일을 추가합니다.
:lang 지정된 lang 속성이 있는 요소에 스타일을 추가합니다.

다음 코드를 실행하여 출력 스타일의 이유를 분석하세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1
:first-of-type
{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<div class="item2">ct-item2</div>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1:first-of-type{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<p class="item2">ct-item2</p>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>

:first-child와 :first-of-type의 기능과 차이점은 무엇입니까?
:first-child는 상위 요소의 첫 번째 하위 요소와 일치하며, 이는 상위 요소의 첫 번째 하위 요소라고 할 수 있습니다. 구조.
:first-of-type은 상위 요소 아래 동일한 유형의 첫 번째 하위 요소와 일치합니다.

물건을 만나서 호환성을 알고 싶다면 어디서 확인할 수 있나요?
caniuse.com에서 확인하세요.

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