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.伪类选择器优先级与类相同

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

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

a标签的四大伪类

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a标签的四大伪类</title>
    <style>
        a{
            font-size:30px;
        }
        /*1、标签没有被访问过*/
        a:link{
            color: orange;
        }
        /*2、标签被悬浮*/
        a:hover{
            /*wait:小圈圈 pointer:小手 none:鼠标隐藏 row-resize text*/
            cursor:pointer;
        }
        /*3、标签被激活*/
        a:active{
            color:red;
        }
        /*4、标签已被访问过*/
        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.属性选择优先级同类

2.[属性名] 查找所有该属性的标签

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

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

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

扫描二维码关注公众号,回复: 6907360 查看本文章

猜你喜欢

转载自www.cnblogs.com/863652104kai/p/11273589.html
今日推荐