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.[屬性名^=值] 查找以值開頭的標籤