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

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

易达원래의: 2020-06-11 14:28:432444검색

이 글의 목표:

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

성명：

이전 기사：CSS를 사용한 테이블 스타일 표시다음 기사：CSS를 사용한 테이블 스타일 표시