Home > Web Front-end > HTML Tutorial > CSS contains selector (9)_html/css_WEB-ITnose

CSS contains selector (9)_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:46:05
Original
1298 people have browsed it

1. Inclusion selector

The two parts before and after the inclusion selector are separated by spaces, based on the ancestor element specified by the left selector, and then search under this element When defining a selector that matches the lower-level element

that matches the selector on the right, you must ensure that the first object in the HTML structure can contain the second object.

2. Simple example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>包含</title><style type="text/css">/*定义类样式*/.div1{    font-size:14px;    color:#FF0000;    }/*定义类样式下的标题元素*/.div1 h1{    color:#FF00FF;    }/*定义类样式下的span元素*/.div1 span{    color:#0000FF;}</style></head><body><div class="div1">这是类  <h1>这是个标题<span>这是标题中的SPAN元素</span></h1></div></body></html>
Copy after login
Copy after login

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>包含</title><style type="text/css">/*定义类样式*/.div1{    font-size:14px;    color:#FF0000;    }/*定义类样式下的标题元素*/.div1 h1{    color:#FF00FF;    }/*定义类样式下的span元素*/.div1 span{    color:#0000FF;}</style></head><body><div class="div1">这是类  <h1>这是个标题<span>这是标题中的SPAN元素</span></h1></div></body></html>
Copy after login
Copy after login

Result:

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template