오늘은 속성 선택기와 의사 클래스 선택기의 사용법, 관련 연결 및 차이점에 대해 설명하겠습니다.
속성 선택기:
[attr~="value"] 단어 단어 공간 단어 단어는 유효해야 합니다
[attr|="value"] 값은 value 또는 value-word로 시작합니다
참고:
속성 선택은 다음과 같습니다. all 선택한 요소를 식별하기 위해 정규 표현식 을 사용하는 것이 어렵고 더 효율적입니다
의사 클래스 선택기:
: before
: after
: lang(val) val/val-word
: nth- child(n) n은 1개의 홀수 짝수 짝수부터 시작합니다.
:nth-of-type(n) 선택기는 상위 요소의 특정 유형의 N번째 하위 요소인 모든 요소와 일치합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
--->
<div>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</body>
</html>
Css部分：
@charset "utf-8";
/* CSS Document */
/*
p:before{
content:"ccc";
}
p:lang(en){
border:1px solid #ff0000;
}
p:nth-child(even){
background:#F00;
}
*/
p:nth-of-type(3){ /* p标记的父元素 下的 第3个p元素*/
background:#F00;
}관련 읽기:
위 내용은 속성 선택자와 의사 클래스 선택자를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
