css context selector-CSS Tutorial-php.cn

css context selector

无忌哥哥

Release： 2018-06-28 17:19:02

Original

2458 people have browsed it

Family: Ancestors, fathers, brothers and peers

1. Ancestor elements: elements that include multi-level descendants;

2.Parent elements: elements that only include first-level child elements ;

3. Adjacent elements: elements with the same parent;

1. Descendant selector: first find the ancestor element, and then select all specified descendant elements below it

Syntax: Use spaces to separate ancestors and targets. There can be multiple levels, separated by multiple spaces.

Format: Ancestor target {declaration}

2. Sub-selector: First find the parent element, and then select all direct descendant elements below it

Syntax: Parent> Target element {style statement}

3. Adjacent selector: First determine the sibling elements Starting point, select all specified elements behind it

<!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>

Copy after login

The above is the detailed content of css context selector. For more information, please follow other related articles on the PHP Chinese website!