收藏
PHPz批改状态：合格
老师批语：要是有示例展示就更好了
/* 基本选择器 */h2{color:aqua}h2.spring {color:blue}h2#item {color:red}/* 上下文选择器 *//* 父子选择器 */ul.list > .ent {border: thin solid;}/* 后代选择器 */ul.list >.ent .entent {color:blue}/* 兄弟选择器 */ul.list > .ent.start + * {background-color: blueviolet;}/* 同级选择器 */ul.list > .ent.cken ~ * {color: indianred;}/* 伪类选择器 */ul.bord > :first-child {color: tomato;}ul.bord > :last-child {color: blue;}ul.bord > :nth-child(2n + 2) {color:deeppink}/* ! 状态伪类 */fieldset {display: inline-grid;gap: 1em;border-radius: 10px;padding: 1em 2em;color: #666;background: linear-gradient(to left top, lightcyan, white);}fieldset legend {text-align: center;}fieldset input {padding: 5px;border: none;border-bottom: 1px solid #666;outline: none;background-color: transparent;}/* ---------------------------- */fieldset :focus {background-color: lightsalmon;}input[type='checkbox']:checked + label {color: red;}button:hover {cursor: pointer;opacity: 0.2;}<!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"><link rel="stylesheet" href="css/0205selector.css"><title>Document</title></head><body><!-- 基本选择器 --><h2>Hello World</h2><h2 class="spring">Hello spring</h2><h2 id="item">Hello everybody</h2><hr /><!-- 上下文选择器 --><ul class="list"><li class="ent">实例1</li><li class="ent">实例2</li><li class="ent"><ul><li class="entent">item1</li><li class="entent">item2</li><li class="entent">item3</li></ul></li><li class="ent">实例4</li><li class="ent start">实例5</li><li class="ent ">实例6</li><li class="ent cken">实例7</li><li class="ent">实例8</li><li class="ent">实例9</li></ul><hr/><!-- 伪元素选择器 --><ul class="bord"><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><li>item11</li></ul><hr ><!-- 状态伪类 --><form action=""><fieldset><legend>用户注册</legend><!-- autofocus: 布尔属性,自动获取焦点 --><input type="text" id="username" name="username" placeholder="用户名" required autofocus /><input type="email" id="email" name="email" placeholder="邮箱" required disabled /><input type="password" id="password" name="password" placeholder="密码" required /><!-- 复选框默认是选中状态: checked --><div><input type="checkbox" id="rem" name="remember" checked /><label for="rem">记住我</label></div><button>提交</button></fieldset></form></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
