1、CSS选择器包括知识点:元素选择器、选择器分组、类选择器、id选择器、属性选择器、后代选择器(层级选择器)、子元素选择器、相邻兄弟选择器、伪类

1.1 元素选择器

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /* 标签选择器 */
        ul{
            border: 1px dashed red;
            margin: 0 auto;
            /*ul还有一个左padding-left: 40px*/
            padding-left: 0;
        }
        /* 层级选择器: 选择 ul 的后代元素*/
        ul li{
            list-style:none;
            width: 40px;
            height: 40px;
            background-color:wheat;

            /*设置文本水平重直居中*/
            text-align: center;
            line-height: 40px;

            /*设置圆角度,50%或者宽度的一半都可以*/
            border-radius: 50%;

            /*设置内联块,使多个块元素可以显示在同一行*/
            display: inline-block;

            /*增加左外边距,小球不至于太拥挤*/
            margin-left: 10px;

            /*添加阴影,进一步美化小球的视觉效果*/
            box-shadow: 2px 2px 1px #888;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190505032046.png

1.2 选择器分组、类选择器、id选择器、属性选择器、

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /* 标签选择器 */
        ul{
            border: 1px dashed red;
            margin: 0 auto;
            /*ul还有一个左padding-left: 40px*/
            padding-left: 0;
        }
        /* 层级选择器: 选择 ul 的后代元素*/
        ul li{
            list-style:none;
            width: 40px;
            height: 40px;
            background-color:wheat;

            /*设置文本水平重直居中*/
            text-align: center;
            line-height: 40px;

            /*设置圆角度,50%或者宽度的一半都可以*/
            border-radius: 50%;

            /*设置内联块,使多个块元素可以显示在同一行*/
            display: inline-block;

            /*增加左外边距,小球不至于太拥挤*/
            margin-left: 10px;

            /*添加阴影,进一步美化小球的视觉效果*/
            box-shadow: 2px 2px 1px #888;
        }
        /* id选择器 */
        #bg_red{
            background-color: lightcoral;
        }
        /* 类选择器 */
        .bg_blue{
            background-color: lightblue;
        }
        /* 属性选择器 */
        li[id="bg_red"]{
            border:2px dashed lightgreen;
        }
    </style>
</head>
<body>
<ul>
    <li class="bg_blue">1</li>
    <li id="bg_red">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li class="bg_blue">6</li>
</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190505032947.png

1.3 子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器、子元素选择器</title>
    <style>
        /*后代选择器*/
        h1 strong{
            color:lightcoral;
            font-size: 50px;
        }
        /*子元素选择器*/
        h2 > strong{
            color:lightseagreen;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
<h2>This is <strong>very</strong> <strong>very</strong> important.</h2>
<h2>This is <em>really <strong>very</strong></em> important.</h2>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190505033949.png

1.4 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /* 标签选择器 */
        ul{
            border: 1px dashed red;
            margin: 0 auto;
            /*ul还有一个左padding-left: 40px*/
            padding-left: 0;
        }
        /* 层级选择器: 选择 ul 的后代元素*/
        ul li{
            list-style:none;
            width: 40px;
            height: 40px;
            background-color:wheat;

            /*设置文本水平重直居中*/
            text-align: center;
            line-height: 40px;

            /*设置圆角度,50%或者宽度的一半都可以*/
            border-radius: 50%;

            /*设置内联块,使多个块元素可以显示在同一行*/
            display: inline-block;

            /*增加左外边距,小球不至于太拥挤*/
            margin-left: 10px;

            /*添加阴影,进一步美化小球的视觉效果*/
            box-shadow: 2px 2px 1px #888;
        }
        /* id选择器 */
        #bg_red{
            background-color: lightcoral;
        }
        /* 类选择器 */
        .bg_blue{
            background-color: lightblue;
        }
        /* 属性选择器 */
        li[id="bg_red"]{
            border:2px dashed lightgreen;
        }

        /* 第2个小球相邻的是第3个小球,可以用li,也可以用* */
        #bg_red + *{
            background-color: yellow;
        }

        /* 第2个小球后面的所有同级兄弟元素全部选中 */
        #bg_red ~ *{
            border:5px solid red;
        }
    </style>
</head>
<body>
<ul>
    <li class="bg_blue">1</li>
    <li id="bg_red">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li class="bg_blue">6</li>
</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190505034717.png

1.5 伪类

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        a{
            font-size: 25px;
        }
        a:visited{
            color: black;
        }
        a:hover{/*鼠标悬停*/
            color:lightsalmon;
        }
        .box{
            width: 100px;
            height: 200px;
            padding-left: 10px;
            border: 3px dashed black;
        }
        /* 伪类: 子元素选择器;注意ul跟:之间有空格*/
        ul :nth-child(2n){/*偶数项*/
            background-color: #ccc;
        }
        ul li:nth-child(1){
            background-color: lightseagreen;
        }

        /* 伪类: 类型选择器;p跟:之间没有空格 */
        div p:nth-of-type(2n+1){/*奇数项*/
            color:orangered;
        }
        div p:nth-of-type(2){
            background-color: #008888;
        }
        /*:nth-child(m): 关注位置*/
        /*:nth-of-type(n): 除了关注关注位置外, 还需要元素的类型匹配*/
        /*li:nth-child(m): 如果这样写, 那么与 li:nth-of-type(n)功能几乎一样*/

        /* 伪类: 表单控件 */
        form :enabled {
            /*当表单元素可用时,将背景设置成小麦色*/
            background-color: wheat;
        }

        /* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
        /*选择的过程是: 先获取到当前被选中的按钮, 再获取它的相邻子元素, 其实就是label标签,再将label的文本设置为红色*/

        form :checked + label {     /* 这里不用label , 用 '*' 号也可以 */
            color: red;
        }

        /* 当在控件中输入无效值文本自动变成红色 */
        /*例如邮箱文本框,如果输入的不是一个有效的邮箱格式字符串, 就会实时的用颜色提示用户的*/
        form :invalid {
            color: red;
        }

        /* 设置控件获取到焦点时的样式 */
        /*控件获取到焦点时, 背景变成绿色*/
        form :focus {
            background-color: lightgreen;
        }

        /* 设置鼠标悬停时的样式 */
        button:hover {
            width: 56px;
            height: 28px;
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="http://www.baidu.com">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">6</a></li>
</ul>
<div class="box">
    <p>HTML</p>
    <p>CSS</p>
    <p>js</p>
    <p>jQuery</p>
</div>

<!--表单选择器-->
<h3>用户登录</h3>
<form action="">
    <p>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" disabled>
    </p>

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

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

    <p>
        <button type="submit">登录</button>
    </p>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190505041043.png

2、背景设置

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景设置——background</title>
    <style>
        .box{
            width: 1000px;
            height: 500px;
            border: 5px dashed black;
            padding:30px;

            /*背景*/
            /*background-color: cyan;*/

            /*background-image: url("../images/bg.jpg");*/

            /*只显示一次*/
            /*background-repeat: no-repeat;*/

            /*背景定位*/
            /*background-position: left center;*/

            /*background-position: 10% 20%;*/
            /*background-position: 30px 50px;*/


            /*是否滚动*/
            /*height: 2000px;*/
            /*background-attachment: scroll;*/
            /*background-attachment: fixed;*/


            /*简写*/
            background: yellow url("https://c.s-microsoft.com/en-in/CMSImages/Image_BuiltForTeamwork_713x374.png?version=d0602c07-bbf5-0fca-e2c0-480f1c746d39") no-repeat left center fixed;


            /*css3中关于背景的新样式
            1、可以同时设置多个背景图片,样式一一对应
            */

            /*background-image: url("../images/bg.jpg"), url("../images/bg1.jpg");*/
            /*background-repeat: no-repeat,no-repeat;*/
            /*background-position: left bottom,right top;*/

            /*background: url("../images/bg.jpg") no-repeat left bottom, url("../images/bg1.jpg") no-repeat right top;*/

            /*2、设置图片尺寸*/
            /*background-image: none;*/
            /*background-image: url("../images/bg.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-size: 120px 80px;*/
            /*background-size: contain;*/
            /*等比缩放,会进行裁切*/
            /*background-size: cover;*/
            /*百分之百拉伸,不过比例变了*/
            /*background-size: 100% 100%;*/

            /*3、设置背景的绘制区域*/
            /*border: 10px dotted red;*/

            /*background-color: lightblue;*/

            /*background-clip:border-box;*/
            /*background-clip: padding-box;*/

            /*background-clip: initial;!*还原*!*/
        }

    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190505042133.png



0/300
全部评价