博客列表 >CSS常用选择器 - 0425

CSS常用选择器 - 0425

饺子°的博客
饺子°的博客原创
2019年05月05日 21:37:46694浏览

一、选择器

  有很多写法,一下是经常使用的

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用选择器</title>
    <link rel="stylesheet" href="static/css/style1.css">
</head>
<body>
    <!-- 演示基本选择器 -->
    <ul>
        <li class="bg-green">1</li>
        <li id="bg-blue">2</li>
        <li class="bg-green">3</li>
        <li class="bg-green">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 -->
    <div>
        <p>猪哥</p>
        <li>朱老师</li>
        <p>西门大官人</p>
    </div>

    <div>
        <p>欧阳克</p>
        <li>金莲妹妹</li>
    </div>

    <!-- 演示表单选择器 -->
    <form action="">
        <label for="email">邮箱:</label>
        <input type="email">

        <label for="password">密码:</label>
        <input type="password">

        <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
        <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>

        <button>登录</button>
    </form>

</body>
</html>

  标签选择器:

实例

ul {
    border: 1px dashed red;
    margin: 0 auto;
    padding-left: 0;

}

  层级选择器:

实例

/* 层级(后代)选择器: 选择 ul 的后代元素*/
ul li {
    list-style:none;
    width: 40px;
    height: 40px;
    background-color:wheat;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
    box-shadow: 2px 2px 1px #888;
}
  id选择器:

实例

/* id选择器 */
#bg-blue {
    background-color: lightblue;
}
    注意:id也可以给多个元素添加样式,但不要这样做

  类选择器:

实例

.bg-green {
    background-color: lightgreen;
}
  属性选择器:

实例

li[id="bg-blue"] {
    border: 2px solid red;
}

  群组选择器:

实例

#bg-blue, .bg-green {
    border: 2px solid blue;
}
  相邻选择器:

实例

#bg-blue + * {
    background-color: yellow;
}

  兄弟选择器:

实例

/* 第2个小球后面的所有同级兄弟元素全部选中 */
#bg-blue ~ * {
    background-color: yellow;  /* -yellow 值前加-,令其失效 */
}
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议