CSS 선택기에 대한 자세한 지식-CSS 튜토리얼-php.cn

CSS 선택기에 대한 자세한 지식

迷茫

풀어 주다： 2017-03-25 14:01:41

원래의

1516명이 탐색했습니다.

외부 CSS 스타일 시트 가져오기

링크 태그를 사용하여 외부 CSS 스타일 시트 가져오기
<link rel="stylesheet" href="css/demo01.css">
에서 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 선택기

id 선택기로 끝나는 p 요소이며, id가 특정 값인 요소를 지정합니다. 예를 들어, #myp은 id 값이 myp#

클래스 선택기

인 요소를 나타냅니다. 클래스 선택기는 클래스 값과 일치하는 요소입니다. 선택기 앞에는

기호를 추가해야 합니다. 예를 들어 .는 .myclass 값이 class인 모든 요소를 나타냅니다. myclass

클래스 선택자는 요소 선택자와 함께 사용할 수 있습니다. 예를 들어

요소가 적용되려면 두 선택자의 조건을 모두 충족해야 합니다. p.important{color:red;}

에는 선택기와 하위 선택기가 포함됩니다.

하위 선택기는 특정 요소의 하위 요소인 요소를 선택할 수 있습니다. 예:

, 이 규칙은 <의 하위 요소인 <🎜를 선택합니다. 🎜> 요소. > 요소의 텍스트가 빨간색으로 바뀌고 다른 h1 em{color:red} 텍스트는 이 규칙의 영향을 받지 않습니다. h1em하위 선택자em

는 자손 선택자와 유사하지만 요소의 특정 직계 자손에만 영향을 미칩니다. 예를 들어

는

요소의 첫 번째 수준

요소에 작동하며 다른 수준은 영향을 받지 않습니다. h1>strong{color:red;}h1인접 형제 선택기 strong

즉시 다른 요소 요소 뒤의 요소와 둘 다 동일한 상위 요소가 있는 경우 인접한 형제 선택기를 사용할 수 있습니다. 예를 들어

는 h1 요소 바로 뒤에 나타나는 단락을 선택합니다. 상위 요소

선택기 그룹화h1+p{margin-top:50px;}

여러 요소에 동시에 작동하는 선택기 예를 들어

는 h2 요소와 p 요소 모두에 작동합니다.

*는 모든 요소와 일치할 수 있는 와일드카드 선택기입니다

h2,p{color:gray;}의사 요소 선택기

:first-line{color:red;}
:first-letter{color:red;}

선택 취소

:after、:before가능 요소와 함께 사용됩니다. 콘텐츠는

로 지정할 수 있습니다.

:before{}는 요소 콘텐츠 뒤에 콘텐츠를 삽입하는 데 사용할 수 있습니다. 예를 들어, 콘텐츠는 content로 지정할 수 있습니다.

p:before{
    content:url("img.png");}

로그인 후 복사

:after{}contentafter, before

과 함께 사용 가능,

은 중첩 참조의 따옴표 유형 설정과 함께 사용 가능 quotes

<style>
    p>p {
        quotes: "《" "》"
    }
    p>p::before{
      content: open-quote;
    }
    p>p::after{
      content:close-quote;
    }</style>

로그인 후 복사

quotesafter , before, with counters
는 텍스트 앞에 다단계 번호 매기기 추가에서 카운터와 함께 사용할 수 있습니다. 이것은 특별한 기사일 수 있으므로 여기서는 자세히 설명하지 않습니다. 의사 클래스 선택기

선택기가 문서 루트 요소와 일치합니다
:root
요소가 is 부모
:first-child
요소가 부모

:last-child
의 마지막 자식인 경우 스타일을 지정합니다.
요소가 부모의 n번째 자식일 때 스타일을 지정합니다.
:nth-child(n)
n은
요소가 부모의 홀수 자식일 때 일치합니다.

odd
n은
이

even
n의 스타일과 일치합니다. n이
일 때 요소가 일치하는 상위일 때 일치합니다. m*n+p 자식
m*n+p

의 스타일은 요소가 마지막부터 부모까지 n번째 자식인 시기를 지정합니다.

:nth-last-child(n)
는 요소가 상위 요소의 유일한 하위 요소일 때 적용되는 스타일을 지정합니다.

:only-child
은 빈 요소의 스타일을 지정합니다

요소 상태에 대한 의사 클래스 선택기

:hover마우스 포인터가 요소 위에 있을 때의 스타일

:focus포커스된 요소의 스타일

:enabled활성화된 요소의 스타일

:disabled비활성화된 요소의 스타일

:checked선택한 요소의 스타일(체크박스, 라디오)

::selection사용자가 선택한 일부 요소의 스타일

:not(selector)이 선택자가 아닌 스타일을 선택하세요

:target일반적으로 앵커와 함께 사용되는 현재 활성화된 #news 요소를 선택하세요

위 내용은 CSS 선택기에 대한 자세한 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!