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

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

青灯夜游

풀어 주다： 2022-08-03 11:25:47

원래의

3227명이 탐색했습니다.

이전 글에서 "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前端入门）