몇 가지 일반적인 CSS 선택기 예에 대한 자세한 설명-CSS 튜토리얼-php.cn

몇 가지 일반적인 CSS 선택기 예에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-05-30 13:36:11

원래의

2224명이 탐색했습니다.

외부 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!