伪类和伪类参数的选择
程序员文章站
2022-05-01 22:21:43
...
<!DOCTYPE html><html lang="en"><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>伪类参数的选择</title></head><body><ul class="list"><li>item1</li><li>item2</li><li class="three">item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li></ul><style>/*:nth-of-type(an+b)1、a:系数，[0.1.2....] 单个还是一组2、n：系数，[0.1.2.3....]3、b：偏移量选择的情况：选择一个，选择一组*//* 1.匹配单个,a=0 0n可以缩写 *//* .list> :nth-of-type(0n + 3) {background-color: greenyellow;} *//* 2.匹配一组 a=1*//* .list> :nth-of-type(n) {background-color: hotpink;} *//* 实际开发过程中，使用n+b(偏移量)来匹配元素 *//* 任务：匹配第3个元素后面的所有兄弟元素 *//* .list.three,.list .three~* {background-color: hotpink;} *//* an+n=1n+3n+3,从第三个开始 *//* .list> :nth-of-type(n + 3) {background-color: rgb(0, 130, 33);} *//* n:从0开始，n+3匹配全过程1. n=0 n+3=32. n=1 n+3=4....6. n=5 n+3=8 匹配第八个7. n=6 n+6=9 索引失败，匹配失败 *//* a=-1试试看，和a=1是一样的，但是反向取 *//* .list> :nth-of-type(-n + 3) {background-color: rgb(0, 130, 33);} *//* -1-2-3-4以此往下计算 *//* 如果匹配最后三个 *//*.list> :nth-last-of-type(-n + 3) {background-color: rgb(0, 130, 33);} *//* 2.3 a=2:匹配奇偶位置的元素 */.list> :nth-of-type(2n) {background-color: khaki;}.list> :nth-of-type(2n + 1) {background-color: rgb(140, 240, 165);}/* 2n:even 2n+1:odd */.list> :nth-of-type(even):hover {/* 鼠标悬停偶数行，红色背景 */background-color: #ee1010;}</style><!-- 表单伪类 --><input type="" name="" value="" /><input type="text" name="" disabled /><input type="radio" name="sex" value="0" id="m" /><label for="m">男</label><input type="radio" name="sex" value="1" id="" /><label for="">女</label><br /><p></p><button>提交</button><style>input:disabled {background-color: yellow;}input:enabled {background-color: rgb(165, 147, 165);}input:checked+label {color: red;}button {width: 100px;height: 30px;border: none;outline: none;background-color: seagreen;color: white;}button:hover {background-color: yellow;}input:focus {background-color: tomato;}</style></body></html>
<!DOCTYPE html><html lang="en"><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>选择器3：伪类</title></head><body><!-- 伪类：伪，表示假的，类，权重，class级别 --><!-- 伪类1.结构伪类：根据元素位置获取元素2.状态伪类：根据状态来获取元素--><!-- 重点学习结构伪类 --><!-- ul.list>li*8{item$} --><ul class="list"><li class="first">item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><p>aaa</p><p>bbb</p><p>ccc</p></ul><style>/* 结构伪类：主要是为了选择子元素的，要给予一个选择的起点 *//* .list> :first-child {background-color: yellow;} *//* 分组结构伪类：以后只用这个 */.list .first {background-color: turquoise;}.list>li:nth-of-type(1) {background-color: tomato;}.list>li:nth-last-of-type(1) {background-color: tomato;}.list>li :first-of-type {background-color: greenyellow;}</style></body></html>