css selector 예제

안타깝게도 모든 CSS 선택기는 동일하게 만들어지지 않습니다. “CSS 특이성”은 선택기의 상이한 범주에 주어진 가중치이다. 즉, 특정 선택기는 스타일시트에 나타나는 위치에 관계없이 항상 다른 선택기보다 우선합니다. 이전 장에서 단추를 다시 만들어 개별 요소부터 시작해 보겠습니다. 이번에는 div 선택기 대신 클래스를 사용합니다. styles.css에 다음 을 추가: 예를 들어, 두 번째 단추를 사용자를 가리키려면 다음을 사용할 수 있습니다. 예를 들어, 같은 페이지의 다른 섹션에 연결하는 경우 URL을 완전히 생략할 수 @class 있습니다. ” CSS에있는 동안 그것은 단지 “입니다.” 태그 선택기는 해당 HTML 요소에 고유한 속성을 변경할 때 가장 유용합니다. 목록 스타일을

    또는 탭 크기로

     설정하는 것과 같습니다.

    또한 브라우저가 특정 요소에 적용되는 스타일을 설정 해제하려고 하는 리셋 스타일시트에서도 특성 값은 식별자 또는 문자열이어야 합니다. 선택기에서 특성 이름과 값의 대/소문자 구분은 문서 언어에 따라 다릅니다. 의사 클래스는 거의 모든 경우에 DOM에 직접 표현되지 않는 요소를 참조할 수 있기 때문에 보다 광범위한 방식으로 콘텐츠를 일치시키기 위해 사용됩니다. 이러한 유형의 선택기는 일반적으로 요소의 상태를 참조합니다. 따라서 사용자 상호 작용에 따라 동적으로 액세스할 수 있습니다. 좋은 예로 :link 및 :방문 의사 클래스가 있으며, 이 클래스는 방문한 지 여부에 따라 링크의 스타일을 조정하는 데 사용됩니다. 의사 클래스를 사용하려면 클래스 이름의 시작 부분에 :를 추가해야합니다. 이 선택기는이 게시물에서 정적으로 표현하기 어렵기 때문에 원하는 경우 JSFiddle 안에 넣는 것이 좋습니다. 거기 당신은 단순히 당신이 원하는 CSS와 HTML의 일부를 주석을 해제하고 오른쪽 탭에서 결과를 볼 수 있습니다. 아래 나열된 선택기의 예를 확인하기 위해 여기를 클릭하십시오 (그들 중 일부는 테이블 아래에 설명되어 있으며, 일부는 너무 직관적이며 명확히 할 필요가 없습니다). 마찬가지로 블록의 첫 번째 문자가 선의 시작 부분에 없는 경우(예: 양방향 재정렬로 인해) UA는 의사 요소를 만들 필요가 없습니다.

    코드를 최소화하기 위해 선택기를 그룹화하는 것이 좋습니다. 선택기는 스타일을 지정하려는 HTML 요소를 가리킵니다. 이는 예제와 함께 제공되는 CSS 선택기, 특성 및 의사 클래스에 대한 빠른 참조입니다. CSS 치트 시트의 톤이 있기 때문에 개인적인 사용을 위해 개인 문서에서이 작업을 수행하고 싶었습니다. 하지만, 어쩌면 내가 거기 밖으로 사람에 게 더 이해할 수 있는 다른 방법으로 넣어 얻을 것 이다. 그래서, 왜 모든 사람과 공유하지? 이 모든 것은 HTML과 CSS의 멋진 세계에서 동일한 작업을 수행하는 여러 가지 방법이 있는 방법의 또 다른 예입니다.