CSS的標簽選擇器的介紹

本文轉載自查看原文 2019-05-29 22:10 4843

引入css的方式

在css的<head>內定義一個<style>標簽 p{color: red;}
在css的<body>內的<p style ="color: red">
在css的<head>內定義一個<link rel="stylesheet" href="mycss.css">標簽，其中mycss是引入的css文件

基本選擇器

標簽選擇器、id選擇器，類選擇器，通用選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*標簽選擇器 所有span標簽的顏色都是紅色*/
        span {color: orange}
        /*ID 選擇器*/
        #s1 {font-size :36px}
        /*類選擇器*/
        .c1 {color: blue}
        /* 通用選擇器*/
        * {color : deeppink}
    </style>

</head>
<body>
<span id ="s1">span</span>
<div class="c1">div
    <p>p
        <span>span</span>
    </p>
</div>
<div class ="c1">div</div>
</body>
</html>

組合選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代選擇器*/
        div span{color:blue}
        /*兒子選擇器*/
        div>span {color:red}
        /*毗鄰選擇器*/
        div+span {color:blue}
        /*弟弟選擇器*/
        div~span {color:deeppink}
    </style>
</head>
<body>
<span>我是div上面的span</span>
<div>
    <span>我是div里面的第一個span</span>
    <p>我是div里面的第一個p
        <span>我是div里面第一個p里面的第一個span</span>
    </p>
    <span>我是div里面的第二個span</span>
</div>
<span>我是div下面的第一個span</span>
<span>我是div下面的第二個span</span>

</body>
</html>

屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [xxx] {color:red}
        [xxx ='1'] {color:blue}
        [xxx ='2']{color:forestgreen}
        p[xxx='2']{color:pink}
    </style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>我只有屬性名</p>
<p xxx ='1'>我有屬性名和屬性值並且值為1</p>
<p xxx ="2">我有屬性名和屬性值並且值為2</p>
</body>
</html>
分組與嵌套
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div ,p,span {color:red}*/
        div p span {color:blue}

    </style>
</head>
<body>
<div>div
<p>p
<span>span</span></p></div>
<p>p</p>
<span>span</span>
</body>
</html>

偽類選擇器

偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color :red;
        }
        a:hover {
            color:blue;
        }
        a:active{
            color:yellow;
        }
        a:visited{
            color:green;
        }
        input:focus{
            background-color: red;
        }
    </style>
</head>
<body>
<a href="http://www.souhu.com">搜狐</a>
<a href="http://www.xiaohuar.com">校花</a>
<a href="https://www.sogo.com">搜狗</a>
<input type="text">
</body>
</html>

偽元素選擇器

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter{
            color: red;
            font-size: 48px;
        }
        p:before {
            content:'*';
            color:red;
        }
        p:after{
            content: "?";
            color:deeppink;
            font-size: 48px;
        }
    </style>
</head>
<body>
<p>繼承是css的一個主要特征，他是一個依賴祖先-后代的關系的</p>
<p>繼承是css的一個主要特征，他是一個依賴祖先-后代的關系的</p>
<p>繼承是css的一個主要特征，他是一個依賴祖先-后代的關系的</p>
<p>繼承是css的一個主要特征，他是一個依賴祖先-后代的關系的</p>

</body>
</html>

選擇器優先級

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*#p1 {color :blue;}*/
        .c1 {color:red;}
        /*p {color:blue}*/
    </style>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1">p</p>
</body>
</html>
選擇器優先級
選擇器相同的情況下,就近原則
行內樣式>id選擇器>類選擇器>元素選擇器

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css選擇器基本介紹 CSS—選擇器選擇標簽 CSS標簽選擇器&類選擇器 CSS各類標簽用法——選擇器 python前端之CSS介紹--選擇器 CSS選擇器（通配符選擇器、標簽選擇器、類選擇器、id選擇器、群組選擇器、后代選擇器、子元素選擇器和相鄰元素選擇器） CSS選擇器 < ~ + CSS選擇器 CSS選擇器 CSS + > ~ 選擇器