CSS 컨텍스트 선택기
- 无忌哥哥원래의
- 2018-06-28 17:19:022464검색
Family: 조상, 아버지, 형제 및 동료
1. Ancestor 요소: 여러 수준의 후손을 포함하는 요소
2. 부모 요소: 첫 번째 수준 자식 요소만 포함하는 요소
3. 인접 요소: have 동일한 상위 요소를 가진 요소
1. 하위 요소 선택기: 먼저 상위 요소를 찾은 다음 그 아래에 지정된 모든 하위 요소를 선택합니다.
구문: 상위 요소와 대상을 공백으로 구분할 수 있으며 여러 개의 구분 기준을 사용할 수 있습니다. space
형식: 조상 대상 {선언}
2. 하위 선택자: 상위 요소를 먼저 찾은 다음 그 아래의 모든 직계 하위 요소를 선택합니다.
구문: 상위> 대상 요소 {스타일 선언}
3. 인접 선택자 : 먼저 형제 요소의 시작점을 결정하고 이후에 지정된 모든 요소를 선택합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style type="text/css">
.art p {
/*color:red;*/
}
.art > p {
/*color: green;*/
}
.art h1+p {
/*只会将h1后面紧邻的p变色*/
/*color:blue; */
}
.art p+p {
clor: red;
}
</style>
</head>
<body>
<article>
<h1>php中文网</h1>
<p>永久免费的在线教学网站</p>
<p>将公益进行到底</p>
<p>为了情怀,为了梦想,为了更多像我这样的PHP爱好者</p>
<section>
<h2>如何学习前端</h2>
<p>一定要多动手多写笔记进行总结</p>
</section>
<section>
<h2>原来大家是这样学习的呀~~</h2>
</section>
</article>
<hr>
<ul>
<li>1列表项</li>
<li>2列表项</li>
<li>3列表项</li>
<li>4列表项</li>
<li>5列表项</li>
</ul>
</body>
</html>위 내용은 CSS 컨텍스트 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 의사 클래스 선택기다음 기사：CSS 의사 클래스 선택기