링크 태그를 사용하여 외부 CSS 스타일 시트 가져오기ffd44f9d753d16fbc49420bd2e72052b
에서 style 표에서 외부 스타일 시트 가져오기(가져오기) @import url("/crazy-html5/06css/css/demo01.css");
내부 스타일 시트는 특정 항목에만 적용 가능 웹 페이지 정의 방법 head
헤더에 style
태그를 추가하려면 스타일 태그에 페이지 스타일을 추가하면 됩니다.
<head> <style> table { background: #003366; } </style> </head>
일반 태그 선택기table:{background:red;}
특정 속성을 포함하는 태그p[id]{background:red;}
id 속성을 포함하는 p 요소를 나타냅니다
특정 속성을 포함하는 태그이고 속성 값은 특정 값입니다
p[id=aaa]{background:red;}
은 id 속성을 포함하고 id=aaa인 p 요소를 의미
속성을 포함하고 속성 값이 특정 값으로 시작하는 요소 p[id=^aaa]{background:red;}
를 의미 id 속성을 포함하고 id 값은 aaa
속성을 포함하고 속성 값이 특정 값으로 끝나는 p[id=$c]{background:red;}
요소로 시작하는 p 요소입니다. id 속성을 포함하고 id 값은 c
id 선택기로 끝나는 p 요소이며, id가 특정 값인 요소를 지정합니다. 예를 들어, #myp
은 id
값이 myp
#
기호를 추가해야 합니다. 예를 들어 .
는 .myclass
값이 class
인 모든 요소를 나타냅니다. myclass
요소가 적용되려면 두 선택자의 조건을 모두 충족해야 합니다. p.important{color:red;}
, 이 규칙은 요소. > 요소의 텍스트가 빨간색으로 바뀌고 다른 h1 em{color:red}
텍스트는 이 규칙의 영향을 받지 않습니다. h1
em
하위 선택자em
요소에 작동하며 다른 수준은 영향을 받지 않습니다. h1>strong{color:red;}
h1
인접 형제 선택기 strong
선택기 그룹화h1+p{margin-top:50px;}
h2,p{color:gray;}
의사 요소 선택기
:first-line{color:red;}
:first-letter{color:red;}
:after、:before
가능 요소와 함께 사용됩니다. 콘텐츠는
:before{}
는 요소 콘텐츠 뒤에 콘텐츠를 삽입하는 데 사용할 수 있습니다. 예를 들어, 콘텐츠는 content
로 지정할 수 있습니다.
p:before{ content:url("img.png");}
:after{}
content
after, before 과 함께 사용 가능, 은 중첩 참조의 따옴표 유형 설정과 함께 사용 가능 quotes
<style>
p>p {
quotes: "《" "》"
}
p>p::before{
content: open-quote;
}
p>p::after{
content:close-quote;
}</style>
quotes
after , before, with counters
는 텍스트 앞에 다단계 번호 매기기 추가에서 카운터와 함께 사용할 수 있습니다. 이것은 특별한 기사일 수 있으므로 여기서는 자세히 설명하지 않습니다. 의사 클래스 선택기
:root
:first-child
:last-child
:nth-child(n)
odd
even
m*n+p
:nth-last-child(n)
:only-child
:hover
마우스 포인터가 요소 위에 있을 때의 스타일
:focus
포커스된 요소의 스타일
:enabled
활성화된 요소의 스타일
:disabled
비활성화된 요소의 스타일
:checked
선택한 요소의 스타일(체크박스, 라디오)
::selection
사용자가 선택한 일부 요소의 스타일
:not(selector)
이 선택자가 아닌 스타일을 선택하세요
:target
일반적으로 앵커와 함께 사용되는 현재 활성화된 #news 요소를 선택하세요
위 내용은 CSS 선택기에 대한 자세한 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!