收藏
天蓬老师批改状态：合格
老师批语：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS引入的三种方式</title><link rel="stylesheet" href="style.css" /><!-- <style>@import url(style.css);</style> --></head><body><p class="on">CSS三种引入方式</p><ul><li>link引入</li><li>style标签用@import引入</li><li>用@import引入到一个CSS文件中,再用link引入单个文件</li></ul></body></html>
@import url(style1.css);p {color: aqua;font-size: 1.5em;}
ul {color: rgb(41, 61, 21);}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>演示css选择器</title><style>/* 标签,类,ID,属性选择器 */p {color: blueviolet;}.sp {color: brown;}#divID {color: coral;}div[name="div-name"] {font-size: 20px;font-weight: 800;}/* 上下文选择器 *//* 后代写法 */ul li {font-weight: 800;}/* 子元素写法 */ul > p {color: chartreuse;font-size: 18px;}/* 同级相邻写法 */.one + li {color: darkred;}/* 同级后面所有 */.tow ~ li {color: red;font-size: 12px;}</style></head><body><!-- 标签选择 --><p>演示标签选择器</p><!-- 类选择 --><span class="sp">演示class选择器</span><!-- ID选择 --><div id="divID">演示ID选择器</div><!-- 属性选择 --><div name="div-name">演示属性选择器</div><!-- 上下文选择 --><p>上下文选择器有4种:1.后代选择 2.子元素选择 3.同级相邻 4.同级所有</p><ul><p>UL的子元素</p><li class="one">首页</li><li class="tow">资讯</li><li>动态</li><li>娱乐</li><li>论坛</li></ul><!-- 结构伪类选择 --></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS伪类选择演示</title><style>/* 匹配任意位置元素 *//* ul li:nth-of-type(an+b) a是启点,从0开始,n是一个循环数从0开始++, b是偏移量, 三者关系是a*n+b,一直循环找到所有 */ul li:nth-of-type(2n) {color: red;}/* 反向获取 */ul li:nth-last-of-type(-n + 3) {font-weight: 800;color: royalblue;}/* 几个语法糖 *//* 偶数 */ul li:nth-of-type(even) {color: royalblue;}/* 奇数 */ul li:nth-of-type(odd) {color: saddlebrown;}/* 第一个 */ul li:first-of-type {color: seagreen;}/* 最后一个 */ul li:last-of-type {color: violet;}</style></head><body><ul><li>项目一</li><li>项目二</li><li>项目三</li><li>项目四</li><li>项目五</li><li>项目六</li></ul></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
