day76 CSS高级选择器

时间:2019-08-06
本文章向大家介绍day76 CSS高级选择器,主要包括day76 CSS高级选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

高级选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>高级选择器</title>
    <style>
        .h2 {
            color: red;
        }
        body {
            font-size: 30px;
        }

        /*选择器高级:基础选择器的各种组合*/
        /*查询顺序,由内至外*/
        /*1.、后代(子代)选择器:只控制一个选择器,前方的都是修饰*/
        /*更习惯用后代,因为css2就出现了,而后面因为后代不能够满足需求,css3中推出子代*/
        /*后代选择器:只要是后代就可以,需要用空格隔开*/
        /*body .h2 {*/
            /*font-size: 40px;*/
        /*}*/
        /*子代选择器:必须为子代,其他不可以,使用 > 隔开*/
        body > .h2 {
            font-size: 40px;
        }

        /*2、兄弟(相邻)选择器:只控制一个选择器,前方的都是修饰*/
        /*兄弟 ~,可相邻也可不相邻,但必须通过上方修饰下方*/
        /*.h3 ~ .h4 {*/
            /*color: pink;*/
        /*}*/
         /*相邻 +,必须相邻,但必须通过上方修饰下方*/
        .h3 + .h4 {
            color: pink;
        }

        /*3、群组选择器:控制多个选择器,全部都会进行修改*/
        /*注:每一个选择器位,可以为id、class、标签、选择器组合*/
        .h2, body h3, h4 {
            text-align: center;
        }

        /*4.选择器的优先级:通过权重(个数)*/
        /*
        无限大于:!important > id > class(伪类) > 标签
        种类相同:比个数
        个数相同:比定义的顺序,和标签写的前后位置无关
        注意:高级选择器种类不影响优先级
        */
        #h6 {
            color: black;
        }

        .d1 div h6 {
            color: pink;
        }
        .d2 h6 {
            color: brown;
        }

        body h6 {
            color: cyan;
        }
        div > h6 {
            color: orange;
        }
        h6 {
            font-size: 100px;
            text-align: center;
            color: red;
        }

    </style>

    <style>

        /*5、交叉选择器,权值高,提升优先级*/
        h6#h6.h.hh {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <h6 id="h6" class="h hh">css高级选择器优先级</h6>
        </div>
    </div>

    <h3 class="h3">第1个h3</h3>
    <h4 class="h4">第1个h4</h4>
    <h4 class="h4">第2个h4</h4>
    <h3 class="h3">第1个h3</h3>
    <div>
        <h4 class="h4">第1个h4</h4>
        <h4 class="h4">第2个h4</h4>
    </div>

    <h2 class="h2">h2标签</h2>
    <div>
        <h2 class="h2">div下的h2</h2>
    </div>
    <p>p标签的内容不水平居中</p>
</body>
</html>

伪类选择器,属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            /*()内填的是编号,所以从1开始*/
            /*1.伪类选择器可以单独出现,相当于省略了通配*/
            /*2.:nth-child先匹配层级位置,再匹配标签(更常用)*/
            /*3.:nth-of-type先匹配标签类型,再匹配层级位置*/
            i:nth-child(1) {
                 color: orange;
            }
            i:nth-child(4) {
                 color: red;
            }

            i:nth-of-type(1) {
                color: brown;
            }
            i:nth-of-type(2) {
                color: blue;
            }
        </style>

        <style>
            .box {
                width: 150px;
            }
            .pp {
                width: 50px;
                height: 50px;
                background-color: red;
                border-radius: 50%;
                float: left;
                text-align: center;
                line-height: 50px;
            }

            /* 2n偶数  2n-1|2n+1奇数  3n最后一列  3n+1|3n-2第一列 3n-1中间列*/
            /* 不可以丛判断 */
            .pp:nth-child(3n-1) {
                color: orange;
            }

            .a1.a2 {
                color: red;
            }
            .a1:nth-child(1) {
                color: orange;
            }
            /*id > class=:nth- > 标签*/
            /*总结:
            1、伪类选择器优先级与类相同
            2、nth-child在同一结构下都是相同选择器时使用
            3、nth-of-type在同一结构下不全是相同选择器时使用
            */
        </style>

        <style>
            /*属性选择器*/
            /*总结:
            1、属性选择器优先级同类
            2、[属性名]查找所有有该属性的标签
            3、[属性名=属性值]精确查找
            4、[属性名^=值]以某某值开头
            4、[属性名*=值]包含某某值(模糊查询)
            */
            p[a] {
                color: crimson;
            }
        </style>
    </head>
    <body>

        <a class="a1 a2" href="">aaaaaaaaaaaaaa</a>

        <hr>
        <!--p.pp.p${p$}*9-->
        <div class="box">
            <p class="pp p1" a>p1</p>
            <p class="pp p2" b>p2</p>
            <p class="pp p3">p3</p>
            <p class="pp p4">p4</p>
            <p class="pp p5">p5</p>
            <p class="pp p6">p6</p>
            <p class="pp p7">p7</p>
            <p class="pp p8">p8</p>
            <p class="pp p9">p9</p>
        </div>

        <hr>

        <i class="i3">iiii1</i>
        <p class="p3">pppp</p>
        <div class="div3">dddd</div>
        <i class="i3">iiii2</i>
        <hr>
        <div>
            <i class="i3">iiii1</i>
            <p class="p3">pppp</p>
            <div class="div3">dddd</div>
            <i class="i3">iiii2</i>
        </div>
    </body>
</html>

a标签的四大伪类

!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a标签的四大伪类</title>
    <style>
        /*一、a的四大伪类*/
        a {
            font-size: 30px;
        }
        /*1、标签没有被访问过*/
        a:link {
            color: orange;
        }
        /*2、标签被悬浮*/
        a:hover {
            /*鼠标样式*/
            /*wait row-resize none text pointer default*/
            cursor: pointer;
        }
        /*3、标签被激活*/
        a:active {
            color: pink;
            cursor: wait;
        }

        /*4、标签已被访问过*/
        a:visited {
            color: brown;
        }
    </style>

    <style>
        /*二、reset操作*/

        /*在开发中往往用不到四种伪类,且要清除掉系统的默认样式*/
        /*就可以如下对a标签进行样式设置:清除系统默认样式 - reset操作*/
        a {
            color: black;
            /*去掉下划线*/
            text-decoration: none;
        }
    </style>
    <style>
        /*三、普通标签的伪类运用*/
        .btn {
            width: 80px;
            height: 45px;
            /*background-color:背景色*/
            background-color: orange;
        }
        /*字体*/
        .btn {
            /*bold 加粗 字体大小 行高 字体*/
            font: bold 20px/45px 'STSong';
            /*水平居中*/
            text-align: center;
        }
        /*边界圆角*/
        .btn {
            border-radius: 5px;
        }
        /*不允许文本操作*/
        body {
            user-select: none;
        }

        /*伪类:悬浮*/
        .btn:hover {
            cursor: pointer;
            background-color: orangered;
        }
        /*伪类:激活*/
        .btn:active {
            background-color: brown;
        }
        /*只是div,没有访问过和未访问过一说*/
    </style>
</head>
<body>
    <div class="btn">按钮</div>

    <!--
    标签没有被访问过
    标签被悬浮
    标签被激活
    标签已被访问过
    -->
    <a href="https://www.baidu.com">前往百度</a>

</body>
</html>

基础样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本属性</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orangered;
        }
        .box {
            /*大小*/
            font-size: 30px;
            /*颜色*/
            color: blue;
            /*字族*/
            /*第一个是首选字体,其余是备用字体*/
            font-family: "STSong", "新宋体", "Arial";
            /*字重: lighter | normal | bold | 100 ~ 900*/
            font-weight: 500;
            /*字体样式*/
            font-style: oblique;
        }
        .box {
            /*文本划线: underline  line-through  overline*/
            text-decoration: none;

            /*文本水平位置: left center right*/
            text-align: center;

            /*行高*/
            line-height: 300px;
        }
        .box {
            /*整体设置*/
            font: bold 20px/300px '黑体', 'Arial';
            color: darkcyan;
            text-align: left;
            
            /*首行缩进*/
            text-indent: 20px;
            /*字间距*/
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        文本ABC ab
    </div>
</body>
</html>

边界圆角

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>边界圆角</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orangered;
        }
        .box {
            /*固定值 | 百分比*/
            /*border-radius: 10%;*/

            /*一共四个角,左上为第一个角,顺时针编号*/
            /*border-radius: 10px 20px 30px 40px;*/

            /*不足找对角*/
            /*border-radius: 10px 50px 100px;*/
            /*border-radius: 10px 50px;*/

            /*横纵分离,先横后纵*/
            /*border-radius: 50px / 50%;*/
            /*border-radius: 50px 100px / 50%;*/

            border-radius: 60%;
        }
    </style>
    <style>
        .b {
            width: 300px;
            height: 150px;
            background-color: orangered;
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="b"></div>
</body>
</html>

背景图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景图片</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orangered;
        }

        .box {
            /*显示比屏幕大的图片:缩放尺寸*/
            /*background-image: url("img/kj.gif");*/
            /*尽量只设置宽,高等比缩放,不失真*/
            /*background-size: 300px 300px;*/
        }

        .box {
            /*显示比屏幕小的图片:处理平铺与位置*/
            background-image: url("img/lss.jpg");
            /*平铺: repeat-x repeat-y repeat no-repeat*/
            background-repeat: no-repeat;
            /*位置*/
            /*1.只设置x轴,y轴默认center*/
            /*2.x轴:left center right 具体像素 百分百*/
            /*2.y轴:top center bottom 具体像素 百分百*/
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

精灵兔

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>精灵图案例</title>
    <style>
        /*精灵图就是操作大图在显示区域的位置*/
        .box {
            width: 500px;
            height: 100px;
            background-color: orangered;
            border: solid;
        }
        .box {
            background-image: url("img/bg.png");
            background-position-y: -150px;
        }
        .box:hover {
            cursor: pointer;
            background-position-y: -250px;
        }
    </style>
    <style>
        .b1 {
            width: 155px;
            height: 48px;
            border: solid;
            background-image: url("img/bg.png");
        }
        .b1:hover {
            cursor: pointer;
            background-position-y: -48px;
        }
    </style>
    <style>
        .b2 {
            width: 157px;
            height: 48px;
            border: solid;
            background-image: url("img/bg.png");
            background-position: -155px 0;
        }
        .b2:hover {
            cursor: pointer;
            background-position: -155px -48px;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <div class="b1"></div>

    <div class="b2"></div>
</body>
</html>

显示方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示方式</title>
    <style>
        .box {
            width: 500px;
            height: 100px;
            background-color: orangered;
        }
    </style>
    <style>
        /*显示方式:display
        block:
            1.支持设置宽高
            2.自带换行
            重点:所有有宽高、参与位置布局的都是block

        inline:
            1.不支持设置宽高,宽高只能有文本撑开
            2.不带换行,一行显示不下会自动换行(保留数据的整体性)
            注:自定义的标签,默认display都是inline
            重点:存放文本的

        inline-block:
            1.支持设置宽高
            2.不带换行,一行显示不下会自动换行(以标签整体换行,标签左右有间距)
            重点:不去主动设置该显示方式,系统的两个img、input都设置为了单标签(不会嵌套任何东西)
            注:如果要用inline-block参与布局,为了标签布局不受内容影响,设置vertical-align: top
        */
        a {
            width: 500px;
            height: 100px;
            display: block;
            background-color: pink;
        }
        owen {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: cyan;
            font-size: 30px;

            /*文本垂直对齐方式: baseline top bottom*/
            vertical-align: top;
        }
        owen:nth-of-type(2) {
            font-size: 20px;
        }

        img {
            width: 100px;
            height: 100px;
            background-color: tan;
        }
        input {
            width: 100px;
            height: 100px;
            background-color: tan;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <a href="5.边界圆角.html" class="box"></a>

    <div>div1</div>
    <div>div2</div>

    <a href="">a1</a>
    <a href="">a2</a>

    <owen>html/css</owen>
    <owen>javascript</owen>
    <owen></owen>
    <owen></owen>
    <owen></owen>
    <img src="img/lss.jpg" alt="">
    <input type="text">
    
    <div></div>
</body>
</html>

盒模型布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型布局</title>
    <style>
        body {
            margin: 0;
            padding: 100px 0 0 200px;
        }

        /*盒模型组成部分: */
        /*margin + border + padding + content
        1.每部分都有自己的独立区域
        2.content是宽x高,作为内容或子标签的显示区域
        3.padding是内边距,没有自身颜色,完成内容的内移(保证显示区域大小不变,可以响应减小content)
        4.border是边框,有宽度、样式、颜色,自身透明(transparent)时,是可以透出背景颜色的
        5.margin是外边距,控制盒子的显示位置,left、top控制自身,right、bottom影响兄弟
        注:margin的偏移依据当前所在位置
        */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        owen {
            /*margin: 10px;*/
            margin-top: 50px;
            margin-left: 10px;
            /*margin-right: 10px;*/
            /*margin-bottom: 100px;*/
        }

        owen {
            /*border-color: black;*/
            /*border-width: 3px;*/

            /*none:无样式 solid:实线 dashed:虚线 dotted:点线*/
            /*border-style: solid;*/

            border: red dashed 10px;
        }

        owen {
            /*padding: 上右下左,不足找对边*/
            /*padding: 10px 20px 30px;*/
            padding: 10px;
        }
        owen {
            display: block;
            /*width: 100px;*/
            width: 80px;
            /*height: 100px;*/
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!--
    盒模型:
    概念:广义上页面中所有的标签都称之为盒子,狭义上布局的盒子指的是display:block
    -->
    <owen>123</owen>
    <div></div>
</body>
</html>

浮动布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .wrap {
            border: 10px solid yellow;
            width: 300px;
            /*父级在宽度不固定时高度不能设置死*/
            /*height: 300px;*/
        }
        /*清浮动:父级清浮动,就是在自己宽度是否确定下,都能保证父级的高度刚刚好包裹子集*/
        /*清浮动,让高度不受子集的浮动影响,如果宽度确定,把高度写死,这样也叫清浮动
            清浮动的方式有很多种,但是推荐使用父级清浮动*/
        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            font: 20px/100px 'Arial';
            color: blue;
            text-align: center;
        }
        .box {
            float: left;
        }
        .b {
            width: 500px;
            height: 100px;
            background-color: red;
        }
        /*浮动布局:
        1.子集浮动参照父级宽度
        2.子集浮动不再撑开父级高度
        3.父级高度需要自己处理,否则会影响兄弟布局,采用清浮动处理
        */
    </style>
    <style>

        h1:before {
            content: '123';
        }
        /*当控制的控制自身完成所有布局(包含所有子集布局),再执行该时间点*/
        h1:after {
            content: '000';
        }
    </style>
</head>
<body>
    <h1>内容</h1>

    <!--.wrap>.box{$}*9-->
    <div class="wrap">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
    </div>
    <div class="b"></div>
</body>
</html>

两种布局案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>两种布局总结</title>

    <style>
        body, h1 {
            margin: 0;
        }
    </style>
    <style>
        .header {
            width: 1210px;
            height: 100px;
            background-color: orange;
            /*自动获取留白区域*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0 auto;
        }
        .header:after {
            content: '';
            display: block;
            clear: both;
        }
        .header a {
            display: block;
            width: 500px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .header form {
            /*background-color: pink;*/
            float: right;
            /*父子级顶端产生距离,建议使用padding*/
            padding-top: 30px;
        }
        .header input {
            /*margin-right: 20px;*/
            width: 220px;
            height: 30px;
            border: none;
            font-size: 17px;
            vertical-align: top;
        }
        .header button {
            width: 32px;
            height: 32px;
            border: none;
            background-color: red;
            /*outline:外边框*/
            outline: none;
            color: white;
            margin-right: 30px;
            vertical-align: top;
        }

    </style>
</head>
<body>
    <!--盒模型:margin、padding协调操作,能用padding尽量用padding,再考虑用margin-->
    <!--浮动:需要左右排列的block采用浮动布局,且父级一定要清浮动-->
    <div class="header">
        <h1>
            <a href=""></a>
        </h1>
        <form method="get" action="https://www.baidu.com/s">
            <input type="text" name="wd">
            <button type="submit">Go</button>
        </form>
    </div>


</body>
</html>

一个标签如果是浮动的,那么他的宽和高都可以被子集撑开

$flag 上一页 下一页

上一篇:python进阶(一)

下一篇:总结二十三