作业内容
- 实例演示css规则的三种引入到html文档中的方式;
- 实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器
演示地址: https://php.gzj2001.com/day5/index.html
效果展示
作业代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1215作业内容</title><style>/* 1.内联样式 */h1 {background: lightseagreen;}/* 属性选择器 */.class{background: #777;}/* id选择器 */#id{background-color:#548;}/* 后代选择器 */span p{background-color: mediumaquamarine;}/* 子元素选择器 */span>span{background-color: #6998;}/* 同级相邻选择器 */.class + p{font-style: oblique;}/* 同级所有选择器 */#id ~ span {font-size: 36px;}/* 结构伪类选择器 *//* 选择第一个 */ul li:nth-of-type(1){background-color: mediumaquamarine;}/* 选择最后一个 */ul li:nth-last-of-type(1){background-color: red;}/* 选择偶数 */ul li:nth-of-type(even){font-size: 24px;}/* 选择单数 */ul li:nth-of-type(odd){font-size: 12px;}/* 选择第N个 */ul li:nth-of-type(3){border: 1px solid #548;}</style><!-- 2.外部样式 --><link rel="stylesheet" href="css/1215.css"></head><body><h1>1.欢迎来到城南博客作业展示！【内联样式】</h1><p>2.我的博客是gzj2001.com【外部样式】</p><!-- 3.style定义属性样式 --><p style="background: magenta;">3.祝您腰好腿好身体好！【style属性定义】</p><p class="class">4.我是属性选择器class的结果</p><p id="id">5.我是id选择器/8.我是同级相邻选择器</p><hr>上下文选择器<span><p>6.后代选择器/9.同级所有选择器</p><p>6.后代选择器/9.同级所有选择器</p><p>6.后代选择器/9.同级所有选择器</p><span>7.子元素选择器</span></span><br><hr>结构伪类选择器<ul><li>1结构伪类选择器</li><li>2结构伪类选择器</li><li>3结构伪类选择器</li><li>4结构伪类选择器</li><li>5结构伪类选择器</li><li>6结构伪类选择器</li></ul></body></html>
其他信息
My Blog: https://www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html