찾다

집  >  기사  >  웹 프론트엔드  >  CSS 선택기에 대한 자세한 지식

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

迷茫
迷茫원래의
2017-03-25 14:01:411486검색

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

  1. 링크 태그를 사용하여 외부 CSS 스타일 시트 가져오기
    ffd44f9d753d16fbc49420bd2e72052b

  2. 에서 style 표에서 외부 스타일 시트 가져오기(가져오기)
    @import url("/crazy-html5/06css/css/demo01.css");

내부 스타일 시트 사용

내부 스타일 시트는 특정 항목에만 적용 가능 웹 페이지 정의 방법 head 헤더에 style 태그를 추가하려면 스타일 태그에 페이지 스타일을 추가하면 됩니다. 

<head>
    <style>
        table {
            background: #003366;
        }
    </style>
</head>

선택기 지식

요소 속성 선택기

  1. 일반 태그 선택기
    table:{background:red;}

  2. 특정 속성을 포함하는 태그
    p[id]{background:red;}id 속성을 포함하는 p 요소를 나타냅니다

  3. 특정 속성을 포함하는 태그이고 속성 값은 특정 값입니다
    p[id=aaa]{background:red;}은 id 속성을 포함하고 id=aaa인 p 요소를 의미

  4. 속성을 ​​포함하고 속성 값이 특정 값으로 시작하는 요소
    p[id=^aaa]{background:red;}를 의미 id 속성을 포함하고 id 값은 aaa

  5. 속성을 ​​포함하고 속성 값이 특정 값으로 끝나는
    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;}의사 요소 선택기

    텍스트 첫 줄에 특수 스타일 설정

  1. :first-line{color:red;}

    2. 텍스트 첫 글자의 특수 스타일

  2. :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

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

    선택기가 문서 루트 요소와 일치합니다

  1. :root

    2. 요소가 is 부모

  2. :first-child

    3. 요소가 부모

  3. :last-child

    의 마지막 자식인 경우 스타일을 지정합니다.
    4. 요소가 부모의 n번째 자식일 때 스타일을 지정합니다.

  4. :nth-child(n)

    5. n은
      요소가 부모의 홀수 자식일 때 일치합니다.

    1. odd

      n은
      2. 이

    2. even

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

    3. m*n+p

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

  5. :nth-last-child(n)

    는 요소가 상위 요소의 유일한 하위 요소일 때 적용되는 스타일을 지정합니다.

  6. :only-child

    은 빈 요소의 스타일을 지정합니다

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

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

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

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

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

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

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

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

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

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

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：입력 단일 선택 및 다중 선택 스타일을 변경하는 CSS에 대한 자세한 설명다음 기사：입력 단일 선택 및 다중 선택 스타일을 변경하는 CSS에 대한 자세한 설명

관련 기사

더보기