CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).

易达

Jun 11, 2020 pm 02:28 PM

css3

이 글의 목표:

1. CSS의 구조적 의사 클래스 선택기인 nth-child의 사용법을 숙지하세요.

질문:

1 다음 효과를 얻으려면 순수 DIV+CSS를 사용해야 합니다. 구조적 의사 클래스 선택기를 사용하세요. —최초의 유형

CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).

추가 참고 사항:

1. 전체 너비는 500

2이고, 내부 간격은 25입니다. 글꼴은 필기체

이제 구체적인 작업을 해보겠습니다

1. 자료 준비: 관리하기 쉽도록 새 이미지 디렉토리를 만들고 여기에 자료를 저장합니다. 이 경우 자료는 파일 사진입니다

CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).

2 .index.html을 만들고 아키텍처를 작성합니다.

아이디어 분석:

1. 목표는 실제로 왼쪽에 테두리가 있는 유명한 인용문을 표시하는 것입니다. 첫 번째 부분은 기능 때문에 이를 달성하기 위해 첫 번째 유형을 사용할 수 있습니다. 지정된 유형의 위치를 첫 번째 하위 요소의 모든 요소에 설정하는 것입니다

좋아, 먼저 분석을 따르고 아이디어를 적어보세요. 그리고 당분간 CSS 구현은 무시하세요

코드는 다음과 같습니다

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—:first-of-type</title>
</head>

<body>
    <div class="container">
        <div class="word">
            <p>只有自己诚心待人，别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>
        </div> 
        <div class="word">
            <p> 什么是人生？人生就是永不休止的奋斗！只有选定了目标并在奋斗中感到自己的努力没有虚掷，这样的生活才是充实的，精神也会永远年轻。——路遥《平凡的世界》</p>
        </div>
        <div class="word">
            <p>生活啊，生活！你有多少苦难，又有多少甘甜！天空不会永远阴暗，当乌云退尽的时候，蓝天上灿烂的阳光就会照亮大地。青草照样会鲜绿无比，花朵仍然会蓬勃开放。——路遥《平凡的世界》</p>
        </div>   
    </div>
</body>

</html>

3. 스타일을 작성하고 CSS 폴더를 생성하고, 내부에 새로운 index.css를 생성하고, 내부에 스타일을 작성하는 방법은 다음과 같습니다. 분석 아이디어

생각 분석:

모든 요소의 공통 스타일.container *

1. 일부 요소에는 고유한 기본 패딩인 여백이 있어 기억하기 어렵기 때문에 아이디어에 영향을 주지 않기 위해 기본값을 0으로 설정한 다음 무엇이든 설정하고 요소 내부에서 개별적으로 설정합니다

그러므로 index.css에 다음 코드를 추가하세요.

.container *{
    padding:0;
    margin:0;
}

외부 레이어 컨테이너

1. 요구 사항에 따라 너비가 500

이므로 index.css에 다음 코드를 추가합니다.

.container{
    width:500px;
}

Text settings.word

1 배경색이 있고 왼쪽 테두리가 있습니다. 다음 텍스트 저장 공백이 있고 글꼴이 필기체입니다

2. 작은 아이콘이 있는 배경 이미지입니다. 배경이 반복되지 않습니다

그러므로 index.css에 다음 코드를 추가하세요.

.word{
    background-color: rgb(255,243,212);
    border-left: 10px solid rgb(246,183,60);
    margin-bottom: 20px;
    padding: 25px;
    font-family: cursive;
    background-image: url(../images/CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).);
    background-repeat: no-repeat;
    background-size: 15px;
}

첫 번째 텍스트 설정

1. First-of-type을 사용해야 하며, 그 기능은 첫 번째 .word를 설정하는 것입니다.

2. 특정 요구 사항은 글꼴을 만드는 데 사용할 수 있습니다. 첫 번째 .word red

그래서 index.css에 다음 코드를 추가하세요:

.word:first-of-type{
    color:red;
}

지금까지 index.css 코드는 다음과 같습니다:

.container *{
    padding:0;
    margin:0;
}
.container{
    width:500px;
}
.word{
    background-color: rgb(255,243,212);
    border-left: 10px solid rgb(246,183,60);
    margin-bottom: 20px;
    padding: 25px;
    font-family: cursive;
    background-image: url(../images/CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).);
    background-repeat: no-repeat;
    background-size: 15px;

}
.word:first-of-type{
    color:red;
}

그런 다음 index.css를 index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—:first-of-type</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <div class="word">
            <p>只有自己诚心待人，别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>
        </div> 
        <div class="word">
            <p> 什么是人生？人生就是永不休止的奋斗！只有选定了目标并在奋斗中感到自己的努力没有虚掷，这样的生活才是充实的，精神也会永远年轻。——路遥《平凡的世界》</p>
        </div>
        <div class="word">
            <p>生活啊，生活！你有多少苦难，又有多少甘甜！天空不会永远阴暗，当乌云退尽的时候，蓝天上灿烂的阳光就会照亮大地。青草照样会鲜绿无比，花朵仍然会蓬勃开放。——路遥《平凡的世界》</p>
        </div>   
    </div>
</body>

</html>

에 추가하세요. 실행 효과는 다음과 같습니다.

CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예). CSS 코드 .word:first-of-type이 p:first-of-type으로 변경되면 결과는 어떻게 될까요? 첫 번째 p 태그가 빨간색으로 변합니다

CSS 코드를 수정하세요:

p:first-of-type{
    color:red;
}

실행 결과는 다음과 같습니다.

CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).

결과에서 모든 단락 글꼴이 빨간색으로 바뀌었습니다. 왜, 아, 밝혀졌습니다. 그 이유는 각 p가 .word 컨테이너의 첫 번째 하위 요소이기 때문입니다!

첫 번째 .word 컨테이너에 다른 p를 추가하고 결과를 살펴보겠습니다.

<div class="word">
            <p>只有自己诚心待人，别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>
            <p>只有自己诚心待人，别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>
        </div>

실행 결과는 다음과 같습니다.

CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).

따라서 p:first-of-type 스타일 코드의 실제 의미를 볼 수 있습니다. 컨테이너의 첫 번째 하위 요소이고 P 태그 유형인 모든 요소입니다! ! !

요약:

1. 구조적 의사 클래스 선택기의 사용법을 배웠습니다. 해당 기능은 지정된 유형의 모든 요소와 상위 컨테이너의 첫 번째 하위 요소를 일치시키는 것입니다. 여러개 있어요! ! !

위 내용은 CSS3의 구조적 의사 클래스 선택기—:first-of-type은 유명한 인용 태그를 구현합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.