作业/20230118
一、基本选择器（标签 属性）
<!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>基本选择器</title></head><style>/* 1.标签选择器 */h1 {color: blue;}/* 2.属性选择器 */.attribute{color: red;border:2px solid red;border-radius: 5px;}</style><body><h1>1.标签选择器</h1><hr><h2 class="attribute">2.属性选择器</h2></body></html>
二、上下文选择器 （> 空格 + ~）
<!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>上下文选择器</title></head><style>/* 父子：> */.list > .item {background-color: yellow;}/* 后代：空格 */.Descendants .item{border: 2px solid red;border-radius: 5px;}/* 兄弟：+ 找到第二个，选择第三个*/.brother > .item.two + * {color: blue;}/* 同级：~ 选择第二个，后面全部同化掉 */.peer > .item.two ~ * {border: 2px solid royalblue;border-radius: 10px;}</style><body><!-- 父子 --><ul class="list"><li class="item">item</li><li class="item">item</li><li class="item">item</li><li class="item">item</li></ul><!-- 后代 --><ul class="Descendants"><li class="item">item1</li><li class="item">item2<ul><li class="item">item2-1</li><li class="item">item2-2</li><li class="item">item2-3</li></ul></li><li class="item">item3</li></ul><!-- 兄弟 --><ul class="brother"><li class="item">item1</li><li class="item two">item2</li><li class="item">item3</li><li class="item">item4</li></ul><!-- 同级 --><ul class="peer"><li class="item">item1</li><li class="item two">item2</li><li class="item">item3</li><li class="item">item4</li></ul></body></html>
三、伪类选择器（）
1.:nth-child()获取元素的任意一个
2.:first-child语法糖，获取第一个
3.:last-child语法糖，获取最后一个
<!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>伪类选择器</title></head><style>/* 选择第一个 */.list > :nth-child(1) {background-color: yellow;}/* 选择最后一个 */.list > :nth-child(3) {background-color: blue;}/* 选择任意一个 */.list > :nth-child(2) {border: 2px solid red;border-radius: 5px;color: red;}/* 第一个、最后一个可以使用语法糖 *//* .list > :first-child {color: red;}.list > :last-child {color: red;} *//* 获取前四个元素 */.example > :nth-child(-n + 4) {color: yellow;}/* 获取第六个以下所有元素 */.example > :nth-child(n + 6) {color:blue;}</style><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li></ul><hr /><ul class="example"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><li>item9</li><li>item10</li></ul></body></html>
<!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>伪类选择器</title></head><style>/* 获取一组元素 */.list > :nth-child(1n + 1) {color: blue;}/* 从第五个起匹配一组 */.list > :nth-child(1n + 5) {color: gold;}/* 获取单数:nth-child(odd) */.list > :nth-child(odd) {border-style: solid;color: darkgrey;}/* 获取双数:nth-child(even) */.list > :nth-child(even) {text-align: center;}</style><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><li>item9</li><li>item10</li></ul></body></html>
四、状态伪类
<!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>Document</title></head><style>/* 获取焦点改颜色 */.username :focus {background-color: blue;}/* 悬停，改颜色 *//* .my :hover {background-color: black;} *//* 禁用h2显示 */h2 {display: none;}/* 放在按钮上面显示h2内容 */.my:hover h2 {display: block;}/* 隐藏后面内容 */.guess {display: none;}/* 鼠标碰到文本框显示文字，，不知道为会在下面 */.username:hover .guess {display: block;}</style><body><div class="username"><label for="uname">用户名：</label><inputtype="text"name="username"id="uname"placeholder="用户账户"required/><label for="" class="guess">你猜我在干嘛</label></div><div class="my"><button>查看我</button><h2>没有秘密！</h2></div></body></html>
