HTML5 CSS3 응용 프로그램에 대한 자세한 설명 _html5 튜토리얼 기술-H5 튜토리얼-php.cn

요소에 있고 다른 하나는

이러한 차이를 통해 각 요소를 쉽게 찾을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

기사 헤더{}

기사 섹션 {}

기사 바닥글 {}

또는 함께 정의:

코드 복사

코드는 다음과 같습니다.

섹션 섹션 헤더 {}

섹션 섹션 섹션 {}

섹션 섹션 바닥글 {}

지금까지는 CSS2.1 선택기를 사용하여 모든 클래스와 ID를 제외했습니다. 그렇다면 왜 여전히 CSS3를 사용해야 할까요? 물어봐주셔서 기뻐요...

CSS3을 사용한 HTML5 요소의 고급 위치 지정

CSS2.1 선택기를 사용하여 모든 클래스와 ID를 제외했지만, 해결하려면 CSS3 고급 선택기가 필요한 더 복잡한 상황이 분명 많이 있습니다. 다음 예제를 완료하여 불필요한 클래스 및 ID 속성을 사용하지 않고 CSS3를 사용하여 페이지 요소를 배치하는 방법을 알아 보겠습니다.

고유한 게시물(게시물) ID를 사용하여 모든 게시물 찾기

Wordpress는 ID가 포함된 각 게시물에 대한 소스 코드 출력을 제공합니다. 이 정보는 일반적으로 자료의 의도를 탐색 및/또는 이해하는 데 사용되지만 CSS3는 이러한 고유 ID를 활용하여 이러한 게시물의 스타일을 지정할 수 있습니다. 물론, 평소처럼 각 게시물에 class="post" 속성을 추가할 수 있지만 그렇게 하면 우리 연습의 목적이 무너질 것입니다(게다가 재미도 없을 것입니다). "하위 문자열 일치 선택기"를 사용하면 아래와 같이 모든 로그와 다양한 요소를 찾을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

article[id*=post-] {} /* 모든 로그 찾기*/
article[id*=post-] header h1 {} /* 찾기 모든 로그 h1 태그*/
article[id*=post-] section p {} /* 모든 로그에서 p 태그 찾기*/

주석 요소와 해당 하위 항목을 동일한 방식으로 배치할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

기사[id*=comment -] { } /* 모든 댓글 찾기*/
article[id*=comment-] header h1 {} /* 모든 댓글에서 h1 태그 찾기*/
article[id*=comment-] section p { } / * 모든 댓글에서 p 태그 찾기*/

특정 섹션이나 기사 찾기

많은 양의 로그와 댓글이 있는 블로그가 있습니다. HTML 5는

특정

또는

요소를 찾으려면 강력한 ":nth-child" 선택기를 사용해야 합니다.

코드 복사

코드는 다음과 같습니다.

섹션:nth-child( 1) { } /* 첫 번째 선택 */
article:nth-child(1) {} /* 첫 번째 선택 */
section:nth-child(2) { } /* 두 번째 선택 */
article:nth-child(2) {} /* 두 번째 선택 */

마찬가지로 ":nth-last-child" 선택기를 사용하여 일부 요소를 역순으로 찾을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

섹션:nth-last- child(1 ) {} /* 마지막 선택 */
article:nth-last-child(1) {} /* 마지막 선택 */

section:nth-last-child(2) {} /* 마지막에서 두 번째 섹션을 선택합니다. */
article:nth-last-child(2) {} /* 마지막에서 두 번째 섹션을 선택합니다. <기사> */

특정 요소를 선택하는 다양한 방법 사용

HTML5의 특정 요소(머리글, 섹션, 바닥글 등)를 선택하는 또 다른 방법은 ":only-of-type" 선택기를 활용하는 것입니다. 이러한 HTML5 요소는 여러 위치에서 두 번 이상 나타나는 경우가 많기 때문에 상위 요소 아래에 한 번만 나타나는 태그를 찾고자 할 때 이 방법이 편리합니다. 예를 들어, 우리가 선택하고 싶은 것은 다음 코드와 같이 특정 요소의 유일한 요소입니다:

코드 복사

코드는 다음과 같습니다.

> <섹션>

<섹션>이 섹션 요소 찾기
<섹션> <섹션>이 섹션 요소를 찾습니다.

이 섹션 요소를 배치하지 마세요. section> 및 섹션 요소

다음 한 줄 선택기를 사용할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

section>section:only- 유형 {}

다시 말하지만, 각 요소에 ID 속성을 고집스럽게 추가할 수 있지만 구조와 표현을 분리하면 코드의 확장성, 유지 관리성 및 절대적인 단순성을 잃게 됩니다. CSS3를 사용하면 ID 및 클래스 속성이 없는 거의 모든 페이지 요소를 빠르고 쉽게 찾을 수 있습니다.

요약

시간이 흐르고 더 많은 브라우저가 이를 지원할수록 HTML5와 CSS3가 점점 더 대중화될 것이라고 믿습니다. 이는 웹 디자이너에게 더 많은 에너지를 제공하고 웹 프런트엔드를 더욱 향상시킬 것입니다. (텍스트/오니무샤)

HTML5 CSS3 응용 프로그램에 대한 자세한 설명 _html5 튜토리얼 기술

Div 수프 시연

접선 정보

Div 수프 시연

접선 정보

관련 기사