몇 가지 일반적인 CSS 선택기 예에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-05-30 13:36:112242검색
외부 CSS 스타일 시트 가져오기
링크 태그를 사용하여 외부 CSS 스타일 시트 가져오기
<link rel="stylesheet" href="css/demo01.css">
스타일 시트에서 외부 스타일 시트 가져오기(가져오기)
@import url("/crazy-html5/06css/css/demo01.css");내부 스타일 시트 사용
내부 스타일 시트만 가능 특정 웹 페이지에서 작동하며 헤드에 스타일 태그를 추가하여 정의합니다. 스타일 태그에 페이지 스타일을 추가할 수 있습니다.
<head>
<style>
table {
background: #003366;
}
</style>
</head>선택기 지식 포인트
요소 속성 선택기
1) 일반 라벨 선택기
table:{배경:red;}
2) 특정 속성을 포함하는 라벨
p[id ]{배경: red;}는 id 속성을 포함하는 p 요소를 나타냅니다
3) 속성을 포함하고 속성 값이 특정 값인 태그는 id 속성을 포함함을 나타냅니다
p[id=aaa]{Background:red;} 및 id=aaa
4인 p 요소) 속성을 포함하고 속성 값이 특정 값으로 시작하는 요소
p[id=^aaa]{Background:red;}는 id 속성을 포함한다는 의미입니다. id 값은 aaa 시작 부분에 있는 p 요소
5) 속성을 포함하고 속성 값이 특정 값으로 끝나는 요소
p[id=$c]{Background:red;} 를 의미합니다 id 속성을 포함하고 id 값은 c로 끝납니다. p 요소
ID 선택기
id 선택기는 id가 특정 값인 요소를 지정합니다. 예를 들어 #myp는 id가 myp 값인 요소를 나타냅니다. . id 선택자 앞에 #
기호를 추가해야 합니다.
클래스 선택자는 클래스 값과 일치하는 요소입니다. 예를 들어 .myclass 클래스 값이 myclass인 모든 요소를 나타냅니다.
클래스 선택자는 요소 선택자와 함께 사용할 수 있습니다. 예를 들어 p.important{color:red;}가 적용되려면 두 선택자의 조건을 모두 충족해야 합니다.
선택자와 하위 선택자를 포함합니다
하위 선택자는 특정 요소의 하위 요소인 요소를 선택할 수 있습니다(예: h1 em{color:red}). 이 규칙은 하위 요소인 em 요소의 텍스트를 변경합니다. h1 요소를 빨간색으로 변경하면 다른 em 텍스트는 이 규칙의 영향을 받지 않습니다.
자식 선택기
는 자손 선택기와 유사하지만 요소의 특정 직계 자손에만 영향을 미칩니다. 예를 들어 h1>strong{color:red;}는 h1 요소의 첫 번째 수준 Strong 요소에 작동하며 다른 수준은 영향을 받지 않습니다.
인접 형제 선택기
다른 요소 바로 다음에 요소를 선택해야 하는 경우 요소 요소가 있고 둘 다 동일한 상위 요소가 있는 경우 h1+p{margin-top:50px;}와 같은 인접한 형제 선택기를 사용하여 h1 요소 바로 뒤에 나타나는 단락을 선택할 수 있습니다. 동일한 상위 요소
선택기 그룹화
여러 요소에 동시에 작동하는 선택기입니다. 예를 들어 h2, p{color:gray;}는 h2 요소와 p 요소 모두에 작동합니다.
*는 모든 요소와 일치할 수 있는 와일드카드 선택기입니다.
의사 요소 선택기
1):first-line{color:red;}는 텍스트의 첫 번째 줄에 특별한 스타일을 설정합니다.
2):first -letter{ color:red;} 텍스트의 첫 글자에 특별한 스타일을 설정합니다.
:after, :before 선택기 없이
:before{}를 사용하여 요소 콘텐츠 앞에 콘텐츠를 삽입할 수 있으며, 콘텐츠는 콘텐츠와 함께 지정할 수 있으며,
:after{}는 요소 콘텐츠 뒤에 콘텐츠를 삽입하는 데 사용할 수 있습니다. 예를 들어
p:before{
content:url("img.png");
}after와 before는 따옴표와 함께 사용할 수 있습니다. 카운터와 함께 사용하여 중첩된 참조의 인용 유형을 설정합니다.
<style>
p>p {
quotes: "《" "》"
}
p>p::before{
content: open-quote;
}
p>p::after{
content:close-quote;
}
</style>이후 및 이전은 카운터와 함께 사용할 수 있습니다
카운터를 사용하여 텍스트 앞에 다단계 숫자를 추가할 수 있습니다. 기사이므로 여기서는 자세히 다루지 않겠습니다.
Pseudo-class 선택기
1 :root 선택기는 문서 루트 요소와 일치합니다.
2 :first-child는 요소가 상위 요소의 첫 번째 자식일 때 스타일을 지정합니다.
3 :last-child는 언제 스타일을 지정합니까? 요소가 부모의 마지막 자식입니다
4 :nth-child(n) 요소가 부모의 n번째 자식일 때 스타일을 지정합니다
n이 홀수일 때 일치합니다. 요소가 부모의 홀수일 때 Small -수준 스타일 e N은 짝수일 때 일치하는 요소입니다. 상위 수준 발생
n의 패턴이 M*N+P인 경우 일치하는 요소는 M*N+와 일치하는 상위 수준입니다. 상위 수준의 P 개인 수준 수준입니다. 스타일
5 :nth-last-child(n)은 요소가 상위 수준의 마지막 하위 요소인 경우 스타일을 지정합니다.
6 :only-child는 요소가 상위 요소의 유일한 하위 요소일 때 적용되는 스타일
7 :empty는 빈 요소의 스타일을 지정합니다
요소 상태에 대한 의사 클래스 선택기1 : 마우스 포인터가 요소 위에 있을 때 호버 스타일 element
2 :포커스를 받는 요소의 focus 스타일
3 :enabled 활성화 요소 스타일
4 :disabled 비활성화된 요소의 스타일
5 :선택한 요소의 checked 스타일(체크박스, 라디오)
6 ::selection 사용자가 선택한 일부 요소의 스타일
7 :not(selector) 선택 이 선택자의 스타일이 아님
8 :target은 현재 활성화된 #news 요소를 선택하며 일반적으로 앵커 포인트와 함께 사용됩니다
위 내용은 몇 가지 일반적인 CSS 선택기 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!