Home > Article > Web Front-end > CSS contains selector (9)_html/css_WEB-ITnose
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.
<!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>
<!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>
Result: