속성 선택자와 의사 클래스 선택자를 사용하는 방법
- php中世界最好的语言원래의
- 2017-11-24 10:00:432437검색
오늘은 속성 선택기와 의사 클래스 선택기의 사용법, 관련 연결 및 차이점에 대해 설명하겠습니다.
속성 선택기:
[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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.