CSS选择器

1.制作一个用户注册表单

表单源代码：

<form action="" method="">
        <fieldset>
            <legend>必填项</legend>
            <div>
                <label for="username">账号:</label>
                <input type="text" id="username" name="username" autofocus required placeholder="手机号/身份证/电子邮箱"
                    value="默认数值" />
            </div>
            <div>
                <label for="psw">密码:</label>
                <input type="password" id="psw" name="psw" placeholder="密码不少于8位,开头必须用英文">
            </div>
            <div>
                <label for="email">电子邮箱:</label>
                <input type="email" id="email" name="email" required />
            </div>
        </fieldset>
        <div>
            <label for="secret">性别:</label>
            <input type="radio" name="gender" value="male"><label for="">男</label>
            <input type="radio" name="gender" value="fomale"><label for="">女</label>
            <input type="radio" name="gender" value="secret" checked id="secret"><label for="">保密</label>
        </div>
        <div>
            <label>爱好：</label>
            <input type="checkbox" name="habby[]" id="trave" /><label for="trave">旅游</label>
            <input type="checkbox" name="habby[]" id="game" /><label for="game">游戏</label>
            <input type="checkbox" name="habby[]" id="shoot" /><label for="shoot">摄影</label>
        </div>
        <div>
            <select name="level" id="" multiple >
                <option value="1">铜牌会员</option>
                <option value="2">银牌会员</option>
                <option value="3">金牌会员</option>
                <option value="4">钻石会员</option>
            </select>
        </div>
        <div>
            <label for="">搜索关键字：</label>
            <input type="search" name="serch" list="keywords" />
            <datalist id="keywords">
                <option value="html"></option>
                <option value="css"></option>
                <option value="javascript"></option>
                <option value="js"></option>
            </datalist>
        </div>
        <button type="submit">提交</button>
    </form>

2.CSS的基本选择器和上下文选择器

基本选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器：基本的选择器</title>
    <style>
        /* 标签 */
        li {
            background-color: violet;
        }
        /* 属性 */
       li[id="foo"] {
            background-color: blue;
        }
        li#foo {
            background-color: yellow;
        }
        li[class="on"] {
            background-color: green;
        }
        li.on {
            background-color: cyan;
        }
    </style>
</head>
<body>
    <ul>
        <!-- 元素 = 标签 + 属性 -->
        <li id="foo">item1</li>
        <li>item2</li>
        <li class="on">item3</li>
        <li class="on">item4</li>
        <li>item5</li>
    </ul>
</body>

上下文选择器

<style>
        /* 上下文选择器，就是根据位置来选择 */
        /* 1.后代选择器,子子孙孙都选中 ： 空格 */
        ul li {
            background-color: lightblue;
        }
        /* 2.子选择器 ：大于号 , 只匹配子一级，不匹配孙子 */
        body > ul > li {
            background-color: lightgreen;
        }
        /* 3.同级相邻选择器，加号 +  */
        .start + li {
            background-color: yellow;
        }
        /* 4.同级所有选择器， ~ 波浪线 */
        .start ~ li {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li class="start">item2</li>
        <li>item3</li>
        <li>item4
        <ul>
            <li>item4-1</li>
            <li>item4-2</li>
            <li>item4-3</li>
        </ul>
        </li>
        <li>item5</li>
    </ul>
</body>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开学第一课作业

2021-09-25 12:57:52