前端高级选择器伪类选择器

时间 2019-11-20

标签前端高级选择器繁體版

原文原文链接

高级选择器

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

        /*一、后代(子代)选择器*/
        /*后代：空格链接  子代：>链接*/
        /*body > .h2 控制一个 | body .h2 控制两个*/
        body > .h2 {
            font-size: 40px;
        }

        /*二、兄弟(相邻)标签：只能上兄弟修饰下兄弟*/
        /*兄弟：~链接  相邻：+链接*/
        /*.h3 + .h4 控制一个 | .h3 ~ .h4 控制两个*/
        .h3 + .h4 {
            color: pink;
        }

        /*三、群组选择器：控制多个选择器*/
        .h2, body h3, h4 {
            text-align: center;
        }

        /*四、选择器的优先级：权重 - 个数*/
        /*权值：不一样级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序
        *：1
        标签：10
        class(伪类)：100
        id：1000
        !important：10000
        */
        #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>

        /*五、交叉选择器*/
        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>
    <style>
        .p {
            background-color: orange;
        }

        /*先肯定位置，再筛选选择器*/
        p:nth-child(3) {
            background-color: red;
        }

        /*先肯定选择器，在匹配位置*/
        p:nth-of-type(3) {
            background-color: brown;
        }

        p.p3 {
            background-color: cyan;
        }
        /*总结：
        一、伪类选择器优先级与类相同
        二、nth-child在同一结构下都是相同选择器时使用
        三、nth-of-type在同一结构下不全是相同选择器时使用
        */
    </style>

    <style>
        .h4 {
            color: orange;
        }
        [class='h4'] {
            color: brown;
        }
        [owen*='owen'] {
            color: pink;
        }
        [owen^='o'] {
            color: blueviolet;
        }
        /*总结：
        一、属性选择器优先级同类
        二、[属性名]查找全部有该属性的标签
        三、[属性名=属性值]精确查找
        四、[属性名^=值]以某某值开头
        四、[属性名*=值]包含某某值(模糊查询)
        */
    </style>
</head>
<body>
    <h4 class="h4" owen="oooowennnnn">owen</h4>
    <h4 class="h4" owen="zero">zero</h4>

    <div>
        <p class="p">第1个p</p>
        <p class="p">第2个p</p>
        <p class="p p3">第3个p</p>
        <p class="p">第4个p</p>
        <p class="p">第5个p</p>
    </div>
    <div>
        <div>
            <h3>h3标签</h3>
            <p class="p">第1个p</p>
            <p class="p">第2个p</p>
            <p class="p">第3个p</p>
            <p class="p">第4个p</p>
            <p class="p">第5个p</p>
        </div>
    </div>
</body>
</html>

a标签的四大伪类

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

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

    <style>
        /*2、reset操做*/

        /*在开发中每每用不到四种伪类，且要清除掉系统的默认样式*/
        /*就能够以下对a标签进行样式设置：清除系统默认样式 - reset操做*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
    <style>
        /*3、普通标签的伪类运用*/
        .btn {
            width: 80px;
            height: 45px;
            background-color: orange;
        }
        /*字体*/
        .btn {
            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;
        }
    </style>
</head>
<body>
    <div class="btn">按钮</div>

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

</body>
</html>

前端 高级选择器 伪类选择器

高级选择器

伪类与属性选择器

a标签的四大伪类

前端高级选择器伪类选择器