CSS 의사 선택기 학습 의사 요소 선택기 분석-CSS 튜토리얼-php.cn

의사 요소 선택기

집

웹 프론트엔드

CSS 튜토리얼

CSS 의사 선택기 학습 의사 요소 선택기 분석

青灯夜游

Aug 03, 2022 am 10:45 AM

css 의사 요소 선택자 의사 클래스

이전 글에서 "CSS의 계층적 선택자란 무엇인가요? 그것을 사용하는 방법? ", 우리는 4가지 유형의 계층 선택기에 대해 배웠습니다. 의사 선택기에 대해 이야기해 보겠습니다. 그들은 더 복잡한 기능을 제공하지만 HTML 문서가 가져야 하는 요소와 직접적으로 대응하지는 않습니다. 의사 선택기에는 의사 요소와 의사 클래스라는 두 가지 주요 유형이 있습니다. 먼저 의사 요소 선택기에 대해 자세히 살펴보겠습니다.

CSS 의사 선택기 학습 의사 요소 선택기 분석

의사 요소 선택기

CSS의 의사 요소 선택기는 지정된 CSS 선택기에 키워드를 추가하는 것입니다. 지정된 요소의 특정 부분에 대한 스타일을 설명하는 데 사용됩니다. [추천 학습: css 동영상 튜토리얼]

개발자는 의사 요소를 통해 요소의 ID나 클래스 속성을 사용하지 않고도 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있습니다. 예를 들어 의사 요소를 통해 단락의 첫 글자 스타일을 설정하거나 요소 앞이나 뒤에 내용을 삽입하는 등의 작업을 할 수 있습니다.

CSS1 및 CSS2에서 의사 요소의 사용은 의사 클래스와 동일하며 콜론 :이 선택기에 연결됩니다. 그러나 CSS3에서는 의사 요소에 대한 단일 콜론 사용이 의사 클래스와 의사 요소를 구별하기 위해 이중 콜론 ::으로 변경되었습니다. 따라서 의사 요소를 사용할 때는 단일 콜론 대신 이중 콜론을 사용하는 것이 좋습니다. :与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。

语法结构如下所示：

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

로그인 후 복사

现在应该都采用两个冒号的方式，除非你还兼容IE8。

注意：一个选择器中只能使用一个伪元素，而且伪元素必须紧跟在选择器之后。按照最新的 W3C 规范，在定义伪元素时您应该使用双冒号::而不是单个冒号:
구문 구조는 다음과 같습니다:

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>



    <p>这是一段测试内容</p>

로그인 후 복사

IE8과도 호환되지 않는 한 이제 두 개의 콜론을 사용해야 합니다.

참고: 선택기에는 하나의 의사 요소만 사용할 수 있으며 의사 요소는 선택기 뒤에 와야 합니다. 최신 W3C 사양에 따르면 의사 요소를 정의할 때 의사 클래스와 의사 요소를 구별하려면 단일 콜론 : 대신 이중 콜론 ::을 사용해야 합니다. 그러나 이전 버전의 W3C 사양에서는 특별한 구분을 두지 않았기 때문에 현재 대부분의 브라우저는 의사 요소를 정의하기 위해 단일 콜론과 이중 콜론 방법을 모두 지원합니다. p::beforep::first- letterp::first-linep::selection input::placeholder
CSS는 다음 표에 표시된 대로 일련의 의사 요소를 제공합니다. 각
요소 뒤에 콘텐츠 삽입
::before
각
요소 앞에 콘텐츠 삽입
::first-letter
는 첫 번째 문자 ::first-line
은 각
요소의 첫 번째 줄
과 일치합니다. ::selection
사용자가 선택한 요소의 일부와 일치 ::placeholder
은 각 양식 입력 상자의 자리 표시자 속성과 일치합니다(예: )
::before和::after伪元素

::before 伪元素 的作用是作为定位的HTML元素的第一个子级元素，::after ** 伪元素** 的作用是作为定位的 HTML元素的最后一个子级元素。

如下示例代码展示了::before和::after伪元素的用法：
nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>



    <p>这是一段测试内容</p>
로그인 후 복사
로그인 후 복사
代码运行结果如下图所示：

如上述示例代码所示，::before伪元素和::after伪元素通常会配合content属性来为该元素增加装饰内容。

content属性用于在元素的::before伪元素和::after伪元素中插入内容。该属性具有的值如下所示：

none：不会产生伪类元素。

normal：::before伪元素和::after伪类元素中会被视为 none。

text：文本内容。

url：格式为url()，指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。

::first-letter和::first-line伪元素

::first-letter和::first-line伪元素分别匹配文本的第一个字和第一行的样式内容。示例代码如下：
nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        /* 匹配第一行 */
        p::first-line {
            background-color: lightcoral;
        }

        /* 匹配第一个字 */
        p::first-letter {
            font-size: 130%;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>
로그인 후 복사
代码运行结果如下图所示：

值得注意的是::first-letter和::first-line伪元素可以使用的CSS属性是有限制的。

::first-letter选择器可以设置的CSS属性：

font属性

color属性

background属性

margin属性

padding属性

border属性

text-decoration属性

vertical-align属性

text-transform属性

line-height属性

float属性

clear属性

::first-line选择器可以设置的CSS属性：

font属性

color属性

background属性

word-spacing属性

letter-spacing属性

text-decoration属性

vertical-align属性

text-transform属性

line-height属性

clear属性

::selection伪元素

::selection伪元素的作用是匹配用户在HTML页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了::selection伪元素的用法：
nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        p::selection {
            color: gold;
            background-color: red;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>
로그인 후 복사
代码运行结果如下图所示：

::placeholder伪元素

伪元素 ::placeholder 用来设置表单元素（、元素）的占位文本（通过 HTML 的 placeholder 属性设置的文本），示例代码如下：
<!DOCTYPE html>
<html>
<head>
    <style>
        input.text::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br>
    <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果
</body>
</html>
로그인 후 복사
代码运行结果如下图所示：

（学习视频分享：web前端入门）

CSS는 다음 표에 표시된 대로 일련의 의사 요소를 제공합니다. 각 요소 뒤에 콘텐츠 삽입		::before
각 요소 앞에 콘텐츠 삽입		::first-letter
는 첫 번째 문자		::first-line
은 각 요소의 첫 번째 줄	과 일치합니다.	::selection
사용자가 선택한 요소의 일부와 일치		::placeholder
은 각 양식 입력 상자의 자리 표시자 속성과 일치합니다(예: )		::before和::after伪元素 ::before 伪元素的作用是作为定位的HTML元素的第一个子级元素，::after 伪元素的作用是作为定位的 HTML元素的最后一个子级元素。如下示例代码展示了`::before`和`::after`伪元素的用法： nbsp;html> <meta> <meta> <meta> <title>::before和::after伪元素</title> <style> p::before { content: "♥"; } p::after { content: "♥"; } </style> <p>这是一段测试内容</p> 로그인 후 복사 로그인 후 복사 代码运行结果如下图所示：如上述示例代码所示，`::before`伪元素和`::after`伪元素通常会配合`content`属性来为该元素增加装饰内容。 `content`属性用于在元素的`::before`伪元素和`::after`伪元素中插入内容。该属性具有的值如下所示： `none`：不会产生伪类元素。 `normal`：`::before`伪元素和`::after`伪类元素中会被视为 none。 `text`：文本内容。 `url`：格式为`url()`，指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。 ::first-letter和::first-line伪元素 `::first-letter`和`::first-line`伪元素分别匹配文本的第一个字和第一行的样式内容。示例代码如下： nbsp;html> <meta> <meta> <meta> <title>::first-letter和::first-line伪元素</title> <style> /* 匹配第一行 / p::first-line { background-color: lightcoral; } / 匹配第一个字 / p::first-letter { font-size: 130%; } </style> <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p> 로그인 후 복사 代码运行结果如下图所示：值得注意的是`::first-letter`和`::first-line`伪元素可以使用的CSS属性是有限制的。 `::first-letter选`择器可以设置的CSS属性： font属性 color属性 background属性 margin属性 padding属性 border属性 text-decoration属性 vertical-align属性 text-transform属性 line-height属性 float属性 clear属性 `::first-line`选择器可以设置的CSS属性： font属性 color属性 background属性 word-spacing属性 letter-spacing属性 text-decoration属性 vertical-align属性 text-transform属性 line-height属性 clear属性 ::selection伪元素* `::selection`伪元素的作用是匹配用户在HTML页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了`::selection`伪元素的用法： nbsp;html> <meta> <meta> <meta> <title>::first-letter和::first-line伪元素</title> <style> p::selection { color: gold; background-color: red; } </style> <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p> 로그인 후 복사 代码运行结果如下图所示： ::placeholder伪元素伪元素 `::placeholder` 用来设置表单元素（、元素）的占位文本（通过 HTML 的 placeholder 属性设置的文本），示例代码如下： <!DOCTYPE html> <html> <head> <style> input.text::placeholder{ color: red; background-color: #CCC; } </style> </head> <body> <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br> <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果 </body> </html> 로그인 후 복사 代码运行结果如下图所示：（学习视频分享：web前端入门）

위 내용은 CSS 의사 선택기 학습 의사 요소 선택기 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7517

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩 크기를 조정하는 방법 Apr 07, 2025 pm 03:18 PM

부트 스트랩에서 요소의 크기를 조정하려면 다음을 포함하여 차원 클래스를 사용할 수 있습니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.

부트 스트랩 버튼을 사용하는 방법 Apr 07, 2025 pm 03:09 PM

부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.

부트 스트랩 날짜를 보는 방법 Apr 07, 2025 pm 03:03 PM

답 : 부트 스트랩의 날짜 선택기 구성 요소를 사용하여 페이지에서 날짜를 볼 수 있습니다. 단계 : 부트 스트랩 프레임 워크를 소개하십시오. HTML에서 날짜 선택기 입력 상자를 만듭니다. 부트 스트랩은 선택기에 스타일을 자동으로 추가합니다. JavaScript를 사용하여 선택한 날짜를 얻으십시오.

See all articles

CSS 의사 선택기 학습 의사 요소 선택기 분석

의사 요소 선택기

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제