收藏
天蓬老师批改状态：合格
老师批语：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>三种引入方式</title><!--1. 通过style标签嵌入到html文档中用link标签和@import两种--><link rel="stylesheet" href="style.css" /><!--2. 通过style标签嵌入到html文档中--><style>@import url(style.css);p{color:red;}</style></head><body><!--3. 在元素标签内通过style属性直接定义样式--><p>行内样式</p></body></html>
<!--上下文选择器： 1.空格：所有层级 2.> ：父子级 3.+ ：相邻的兄弟后面一个 4.~ ：所有相邻兄弟（后面）--><style>/* 标签,类,ID,属性选择器 */p {color: blue;}.p {color: #555;}#P {color: coral;}div[name="div"] {font-size: 20px;}/* 上下文选择器 *//* 后代 */ul li {color: yellow;}/* 子元素 */ul > p {color: black;font-size: 18px;}/* 同级相邻 */.one + li {color: darkred;}/* 同级后面所有元素 */.two ~ li {color: red;font-size: 12px;}</style>
<!-- 标签选择 --><p>这是一段文字</p><!-- 类选择 --><p class="p">这是一段文字</p><!-- ID选择 --><div id="P">这是一段文字</div><!-- 属性选择 --><div name="div">这是一段文字</div><!-- 上下文选择 --><!--上下文选择器有4种:1.后代选择 2.子元素选择 3.同级相邻 4.同级所有--><ul><p>这是一段文字</p><li class="one">这是一段文字</li><li class="two">这是一段文字</li><li>这是一段文字</li><li>这是一段文字</li><li>这是一段文字</li></ul>
<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){color: blue;}/* 几个语法糖 *//* 偶数 */ul li:nth-of-type(even) {color: yellow;}/* 奇数 */ul li:nth-of-type(odd) {color: black;}/* 第一个 */ul li:first-of-type {color: #585858;}/* 最后一个 */ul li:last-of-type {color: #000;}</style>
<ul><li>这是一段文字</li><li>这是一段文字</li><li>这是一段文字</li><li>这是一段文字</li><li>这是一段文字</li><li>这是一段文字</li></ul>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
