Html-伪类与属性选择器

时间 2019-11-20

标签 html 属性选择器栏目 HTML 繁體版

原文原文链接

目录html

伪类标签

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        .p{
            background-color:yellow;
        }
        /*给第n个标签设置样式*/
        :nth-child(3){
            background-color: red;  <!--给没层结构的第3个标签设置样式-->
        }

        /*先肯定位置，再筛选选择器，设置样式*/
        .p:nth-child(3){
            background-color: brown;  <!--先肯定到每层结构的第三个位置，筛选是不是.p类标签，设置样式-->
        }

        /*先肯定选择器，再匹配位置*/
        .p:nth-of-type(2){
            background-color: green;  <!--先筛选出每层的p选择器，给第2个设置样式-->
        }
    </style>

</head>
<body>
    <p class="p">第1个p</p>
    <p class="p">第2个p</p>
    <p class="p">第3个p</p>
    <p class="p">第4个p</p>
    <div>
        <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>
    </div>
</body>
</html>

总结：字体

1.伪类选择器优先级与类相同code

2.nth-child在同一结构下都是相同选择器时使用htm

3.nth-of-type在同一结构下不全是相同选择器时使用utf-8

a标签的四大伪类

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a标签的四大伪类</title>
    <style>
        a{
            font-size:30px;
        }
        /*一、标签没有被访问过*/
        a:link{
            color: orange;
        }
        /*二、标签被悬浮*/
        a:hover{
            /*wait:小圈圈 pointer:小手 none:鼠标隐藏 row-resize text*/
            cursor:pointer;
        }
        /*三、标签被激活*/
        a:active{
            color:red;
        }
        /*四、标签已被访问过*/
        a:visited{
            color:green;
        }
        
        /*reset操做*/
        /*在开发中每每用不到四种伪类，且要清除掉系统的默认样式*/
        /*就能够以下对a标签进行样式设置：清除系统默认样式 - reset操做*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

普通标签的伪类运用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a标签的四大伪类</title>
    <style>
        /*普通标签的伪类运用*/
        .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>

属性选择器

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*给全部class的标签设置*/
        [class]{
            background-color: red;
        }
        /*给class为h的标签设置*/
        [class='h']{
            background-color: brown;
        }
        /*给class包含hhhh4的标签设置*/
        [class*='hhhh4']{
            background-color: green;
        }
        /*给class以o开头的标签设置*/
        [class^='o']{
            background-color: orange;
        }
    </style>
</head>
<body>
    <h1>一级标题</h1>
    <h4 class="hhhhhhhh4">标题</h4>
    <h4 class="h">标题</h4>
    <h4 class="owen">标题</h4>
    <div>
        <p class="p">段落</p>
    </div>

</body>
</html>

总结：开发

1.属性选择优先级同类it

2.[属性名] 查找全部该属性的标签io

3.[属性名=属性值] 精确查找class

4.[属性名*=值] 模糊查询包含值的标签百度

5.[属性名^=值] 查找以值开头的标签