Home > Article > Web Front-end > CSS sub-selector (6)_html/css_WEB-ITnose
CSS sub-selector (6)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:201303browse
1. Sub-selector
The front and back parts of the sub-selector are separated by a greater than sign. The two parts of the selector are structurally a parent-child relationship.
The child selector is based on the parent element specified by the left selector, and then looks for child elements matching the right selector under the parent element.
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><link type="text/css" rel="stylesheet" href="css/demo5.css"/></head><body><div> <p>这是个段落 <a href="#">这是超连接</a> </p></div></body></html>
@charset "utf-8";/* CSS Document *//*设置div下的p元素的样式*/div>p{ font-size:14px; color:#0000FF; }/*设置p元素下的a元素的样式*/p>a{ font-size:16px; color:#FF0000; text-decoration:none;}/*错误的写法 div 与a不是父子关系时，是取不到的*/div>a{ font-size:20px; color:#FF0000; text-decoration:none;} The sub-selector is very Rarely used, generally use containing selections that are not affected by the parent-child relationship
The following writing contains the selector
div a{ font-size:20px; color:#FFFF00; text-decoration:none;}
Statement：
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
Previous article：【CSS】Responsive image_html/css_WEB-ITnoseNext article：【CSS】Responsive image_html/css_WEB-ITnose