所有代码的注释和介绍
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>9.23作业</title> <link rel="stylesheet" href="/PHP/ico/iconfont.css" /> <script src="/PHP/ico/iconfont.js"></script> </head> <body> <!-- 选择器-伪类写法要领和实例 --> <!-- ↓------------------------------> <!-- 方式一： 普通的针对样式写法 --> <h2>实例一</h2> <ul class="a"> <li>b</li> <!-- ↓指定该位置样式↓ --> <li class="c">c</li> <li>d</li> </ul> <style> .a .c {color: #FF0000;}; </style> <hr> <!-- ↓------------------------------> <!-- 方式二： 针对指定代码行数做样式写法 (父子级下指定位置都生效) --> <h2>实例二</h2> <ul class="aa"> <li>b</li> <!-- ↓指定该位置样式↓ --> <li>c</li> <li>d</li> </ul> <style> /* :nth-of-t.ype(2) 其中的2代表定位到该位置 */ .aa :nth-of-type(2) {color: #FFFF00;}; </style> <hr> <!-- ↓------------------------------> <!-- 方式三： 针对指定代码行数做样式写法 (不想让子级的第二个也被选中的,且指定父级用的写法) --> <h2>实例三</h2> <ul class="aaa"> <li>b</li> <!-- ↓指定该位置样式↓ --> <li>c</li> <li>d</li> <li> b <ul> <li>b1</li> <!-- ↓指定该位置不享受样式↓ --> <li>b2</li> <li>b3</li> </ul> </li> </ul> <style> /* 下面这个写法就是会把所有的下级有2个元素的都样式了 */ /* .aaa :nth-of-type(2) {color: #0000FF;}; */ /* 只要在a的类前面加个>即可 忽略了下级了 */ .aaa > :nth-of-type(2) { color: #0000FF; /* background-color: #0000FF */ }; </style> <hr> <!-- ↓------------------------------> <!-- 方式四： : nth-of-type(X) 1.定位是有个匹配机制，先组合元素再进行分配定位 2.标签可不限制排列在一起，因为浏览器会自动组合在匹配 3.想指定元素来定位就要在:nth-of-t.ype(X) :前面加是标签 (以下方为例，我写加个p标签想定位2就要写2个p标签才可以) --> <h2>实例四</h2> <ul class="aaaa"> <li>b</li> <!-- ↓指定该位置2样式↓ --> <li>c</li> <li>d</li> <li>b</li> <p>e</p> <!-- ↓指定该位置2样式↓ --> <p>r</p> </li> </ul> <style> /* 只要在a的类前面加个>即可 忽略了下级了 */ .aaaa > p:nth-of-type(2) {color: #00FF00;}; </style> <hr> <!-- ↓------------------------------> <!-- 方式五： 如果下指定同级、父级或下级的代码有样式不想都父子级都显示就用下面写法 :nth-of-type(行数):not(标签:nth-of-type(行数)) --> <h2>实例五</h2> <ul class="a5"> <li>b</li> <!-- ↓指定排查li的2位置样式↓ --> <li>c</li> <li>d</li> <li>b</li> <p>p1</p> <!-- ↓指定显示p的2位置样式↓ --> <p>p2</p> <p>p3</p> </ul> <style> .a5 > :nth-of-type(2):not(li:nth-of-type(2)) { background-color: #0000FF } </style> <hr> <!-- ↓------------------------------> <!-- 方式六： 针对指定位置的写法 --> <h2>实例六</h2> <ul class="a6"> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> </ul> <style> /* 抓取第一个来样式 有专门的选择器写法，也可输入行数 */ /* 方法1： */ /* .a6 > :nth-of-type(1) { background-color: #0000FF } */ /* 方法2： */ /* .a6 > :first-of-type { background-color: #0000FF } */ /* 抓取最后一个来样式选择器 */ /* .a6 > :last-of-type { background-color: #0000FF } */ /* 倒数上去的获取选择器写法 */ .a6 > li:nth-last-of-type(3) { background-color: #0000FF } </style> <hr> <h2>伪类选择器的参数</h2> <ul class="b1"> <li>yanshi</li> <li>yanshi</li> <li>yanshi</li> <li class="bb">yanshi</li> <li>yanshi</li> <li>yanshi</li> </ul> <style> /* :nth-of-type(参数) 公式： 参数 = an+b a,n.b =[0,1,2,3,4,5,....] a: 系数，n：计数器/方式，b：偏移量/行数 用于PHP分页参数居多 元素的有效编号：必须从1开始，n和b都是从0开始 */ /* 以下写法是说明在第三行做样式(0n=单选+3=第二行) */ /* .b1 > :nth-of-type(0n+2) { background-color: #0000FF } */ /* 以下写法是全部选中做样式最大权重(n=全选) */ /* .b1 > :nth-of-type(n) { background-color: #0000FF } */ /* 以下写法是从第二行起下面都做样式(n=全选+2=第二行) 原本写法是1n+2,但因为1*所有数字都不变，所以1可以不用写直接用n即可 */ /* .b1 > :nth-of-type(n+2) { background-color: #0000FF } */ /* 以下写法是每隔2行就做样式(2n=偶数进行) 以此类推场景*/ /* .b1 > :nth-of-type(2n) { background-color: #0000FF } */ /* 偶数简便的写法(even=偶数) */ /* .b1 > :nth-of-type(even) { background-color: #0000FF } */ /* 奇数简便的写法(2n=偶数+1=奇数开始) 简写是:nth-of-type(odd) */ /* .b1 > :nth-of-type(2n+1) { background-color: #0000FF } */ /* 以下写法是抓取前三做样式(-n) 算法： -1*0+3=3 -1*1+3=2 -1*2+3=1 -1*3+3=0(非法索引，匹配就结束了) */ /* .b1 > :nth-of-type(-n+3) { background-color: #0000FF } */ /* 以下写法是抓取后三做样式,换选择器(-n) 算法： -1*0+3=3 -1*1+3=2 -1*2+3=1 -1*3+3=0(非法索引，匹配就结束了) */ .b1 > :nth-last-of-type(-n+3) { background-color: #0000FF } /* 总结： 1.获取指定的某一个：(b) 2.获取前几个：(n-b) 3.获取指定位置后的全部元素：(n+b) 4.获取全部偶数(2n或even)或全部奇数(2n+1或odd)元素 */ /* 以下写法是针对根元素来做样式 */ /* 写法1：*/ /* html {background-color: #0000FF} */ /* 写法2：*/ /* :root {background-color: #0000FF} */ /* 或者用class来定位写法也可以 第三行class如下： */ /* 写法1： */ /* .b1 .bb ~ * {样式代码} */ /* 写法2： */ /* .b1 .bb ~ li {样式代码} */ /* 以上写法要增加class才可触发 */ </style> <hr> <h2>表单的激活/禁用样式控制</h2> 激活：<input type="text"> <br> 禁用：<input type="text" disabled> <style> /* 以下写法是针对表单的激活/禁用 的框做样式 */ /* 激活状态 */ input:enabled {background-color: #0000FF} /* 禁用状态 */ input:disabled {background-color: #8b062e} </style><!-- 字体图标 --> <hr> <h2>字体图标</h2> <h4>CSS方式引用</h4> <span class="iconfont icon-jingdong">JDlogo</span> <style> .iconfont.icon-jingdong { color: rgb(255, 0, 0); font-size: 500%; } </style> <br> <h4>JS方式引用</h4> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-jingdongicon-"></use> </svg> </body></html>
