您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
一、元素之间的关系
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Css之选择器</title> <style type="text/css"> /** * 为div中的审判元素设置背景为绿色 * 后代选择器 * 作用:选中指定元素的指定后代元素 * 语法:祖先元素 后代元素{} */ div span{ background-color: green; } </style> </head> <body> <!-- 元素之间的关系 时间:2016-12-04 描述:父元素:直接包含子元素的元素; 子元素:直接被父元素包含的元素; 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素 兄弟元素:拥有相同父元素的元素叫做兄弟元素 --> <div id="d1"> <span>我是div标签中的span</span> <p> <span> 我是P标签中的span </span> </p> </div> <span>我是body标签中的审判</span> </body> </html>
二、后代选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Css之选择器</title> <style type="text/css"> /** * 为div中的审判元素设置背景为绿色 * 后代选择器 * 作用:选中指定元素的指定后代元素 * 语法:祖先元素 后代元素{} */ div span{ background-color: green; } </style> </head> <body> <!-- 元素之间的关系 时间:2016-12-04 描述:父元素:直接包含子元素的元素; 子元素:直接被父元素包含的元素; 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素 兄弟元素:拥有相同父元素的元素叫做兄弟元素 --> <div id="d1"> <span>我是div标签中的span</span> <p> <span> 我是P标签中的span </span> </p> </div> <span>我是body标签中的审判</span> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Css之选择器</title> <style type="text/css"> /** * 为div中的审判元素设置背景为绿色 * 后代选择器 * 作用:选中指定元素的指定后代元素 * 语法:祖先元素 后代元素{} */ div span{ background-color: green; } /** * 选中id为d1的div中的p元素中的span元素 */ #d1 p span{ background: deepskyblue; } </style> </head> <body> <!-- 元素之间的关系 时间:2016-12-04 描述:父元素:直接包含子元素的元素; 子元素:直接被父元素包含的元素; 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素 兄弟元素:拥有相同父元素的元素叫做兄弟元素 --> <div id="d1"> <span>我是div标签中的span</span> <p> <span> 我是P标签中的span </span> </p> </div> <span>我是body标签中的审判</span> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Css之选择器</title> <style type="text/css"> /** * 为div中的审判元素设置背景为绿色 * 后代选择器 * 作用:选中指定元素的指定后代元素 * 语法:祖先元素 后代元素{} */ div span{ background-color: green; } /** * 选中id为d1的div中的p元素中的span元素 */ #d1 p span{ background: deepskyblue; } /** * 选中div的子元素span元素设置一个背景颜色 * 子元素选择器 * 作用:在给定的父元素下匹配所有的子元素 * 语法:父元素>子元素 */ div>span{ font-size: 25px; } </style> </head> <body> <!-- 元素之间的关系 时间:2016-12-04 描述:父元素:直接包含子元素的元素; 子元素:直接被父元素包含的元素; 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素 兄弟元素:拥有相同父元素的元素叫做兄弟元素 --> <div id="d1"> <span>我是div标签中的span</span> <p> <span> 我是P标签中的span </span> </p> </div> <span>我是body标签中的审判</span> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。