communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Exemples de code pour les sélecteurs CSS et exemples de code pour les priorités CSS

Exemples de code pour les sélecteurs CSS et exemples de code pour les priorités CSS

不言
Libérer： 2018-08-09 17:06:18
original
1927 Les gens l'ont consulté

Cet article vous présente des exemples de code sur les sélecteurs CSS et des exemples de code de priorité CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. 

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <title>CSS入门第一节</title>
 
    <!-- 嵌入样式  页内样式-->
    <style>
        p {
            color: yellowgreen;
        }
    </style>
</head>
 
<body>
    <!-- 内敛样式 -->
    <div style="color: red; font-size: 24px; border: 1px solid black;">
        我是DIV
    </div>
    <p>
        我是段落标签
    </p>
 
    <h1>
        我是大标题
    </h1>
</body>
 
</html>
Copier après la connexion
/*index.css文件*/
 
p {
    /* 设置字体大小为:50像素 */
    font-size: 50px;
    /* 设置p标签的背景色为银灰色 */
    background-color: silver;
}
 
span {
    font-size: 28px;
}
Copier après la connexion

cas css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css练习</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<style>
    h1 {
        color: green;
    }
</style>

<body>
    <p style="background-color: red;">设置p标签的背景色为红色</p>
    <h1>设置H1标签的字体颜色为绿色</h1>
    <span>设置span标签的文本为14像素</span>
</body>

</html>
Copier après la connexion

Sélecteur de caractères génériques

<!DOCTYPE html>
<!-- 通配符选择器 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS选择器</title>
</head>
<style>
    * {
        color: #3cd;
    }
    /* 通配符选择器：统统都被匹配上，可以选择到所有的标签 */
</style>

<body>
    <h1>标题</h1>
    <p>
        内容
    </p>

    <ul>
        <li>北京</li>
        <li>南京</li>
        <li>山东</li>
    </ul>
    <strong>这是strong标签</strong><br/>
    <span>demo</span>
</body>

</html>
Copier après la connexion

sélecteur CSS

<!DOCTYPE html>
<!-- 标签选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS选择器</title>
</head>
<style>
    /* 标签选择器 */

    p {
        color: red;
    }

    li {
        background-color: gold;
    }

    span {
        font-size: 50px;
    }

    /* id选择器 */

    /* id命名规范:必须以字母开头(不限制大小写),然后可以包含数字/字母/下划线/连接符- */

    #li-beijing {
        background-color: silver;
    }

    #li-shanghai {
        background-color: aquamarine;
    }
</style>

<body>
    <h1>标题</h1>
    <p> 内容</p>
    <ul>
        <li id="li-beijing">北京</li>
        <li id="li-shanghai">南京</li>
        <li>山东</li>
    </ul>
    <strong>这是strong标签</strong>
    <br/>
    <span>demo</span>
</body>

</html>
Copier après la connexion

sélecteur de classe

<!DOCTYPE html>
<!-- 类选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的类选择器</title>
</head>
<style>
    .lf-p {
        color: green;
    }
    .fl{
        background-color: #cdf;
    }
</style>

<body>
    <h1>标题</h1>
    <p class="p_1"> 段落一</p>
    <p class="lf-p fl"> 段落二</p>
    <p class="lf-p"> 段落三</p>

</body>

</html>
Copier après la connexion

Exercice complet de sélection

<!DOCTYPE html>
<!-- 标签选择器 类选择器 id选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器综合练习</title>
</head>
<style>
    h1 {
        color: red;
        font-size: 30px;
    }

    span {
        font-size: 18px;
    }

    #comt {
        color: yellow;
        /* font-size: 18px; */
    }

    .date {
        color: purple;
        /* font-size: 18px; */
    }

    .articleP{
        font-size: 18px;
        color: blue;
    }
</style>

<body>
    <h1>标题</h1>
    <p>
        <span id="comt">段落</span>
        <span class="date">时间</span>
    </p>
    <p class="articleP">正文</p>
</body>

</html>
Copier après la connexion

Sélecteur de composés

<!DOCTYPE html>
<!-- 复合选择器:标签指定式选择器,后代选择器,并集选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器</title>
    <style>
        /*
            1.请把li中的class等于current的标签的背景设置为高亮(颜色为蓝色)
            2.请把class为news的ul标签下面的所有的li标签中的文字设置为黑色(#333)
            3.请把体育新闻和财经新闻的文字设置为银灰色
        */

        /* 标签指定式选择器 */

        li.current {
            background-color: lightblue;
        }

        li#home {
            font-weight: bold;
            /*字体加粗*/
        }

        /* 后代选择器 */

        .news a {
            /* color:#333; */
            color: green;
        }

        /* 并集选择器 */

        .f-news a,
        .s-news a {
            color: silver;
        }

        /* 如果两个优先级一致的话,后面的则优先生效 */

        .othernews a {
            color: red;
        }

        /* 并集选择器 */
        html,
        body,
        p,
        dt,
        dl,
        dd,
        ul,
        p {
            padding: 0;
            /* 内边距 */
            margin: 0;
            /* 外边距 */
        }
    </style>
</head>

<body>
    <ul>
        <li id="home"><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li class="current"><a href="#">新闻</a></li>
        <li><a href="#">售后</a></li>
        <li><a href="#">关于</a></li>
    </ul>

    <ul class="news">
        <li><a href="#">哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈</a></li>
        <li><a href="#">哈哈哈哈哈哈</a></li>
    </ul>

    <dl class="f-news othernews">
        <dt><a href="#">财经新闻</a></dt>
        <dd><a href="#">内容</a></dd>
        <dd><a href="#">内容</a></dd>
        <dd><a href="#">内容</a></dd>
    </dl>

    <dl class="s-news othernews">
        <dt><a href="#">体育新闻</a></dt>
        <dd><a href="#">内容</a></dd>
        <dd><a href="#">内容</a></dd>
        <dd><a href="#">内容</a></dd>
    </dl>
</body>

</html>
Copier après la connexion

Sélecteur d'élément enfant

<!DOCTYPE html>
<!-- 子选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子元素选择器</title>
    <style>
        /* 子选择器 */
        p > strong {
            color: red;
        }
    </style>
</head>

<body>
    <p>
        <p>
            <span>段落1</span>
            <span>
                <strong>段落2</strong>
            </span>
            <span>段落3</span>
            <strong>强调标签</strong>
        </p>
    </p>
</body>

</html>
Copier après la connexion

Sélecteur d'attribut

<!DOCTYPE html>
<!-- 属性选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style>
        span[class] {
            color: green;
        }

        /* 拥有id属性的标签都被选择出来 */
        [id] {
            font-size: 50px;
        }

        span[id="4"] {
            color: yellow;
        }
        
        /* 属性包含选择器 */
        span[class~="demo"] {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <p>
        <span class="cur demo">1</span>
        <span>2</span>
        <span id="3">3</span>
        <span id="4">4</span>
        <span>5</span>
    </p>
</body>

</html>
Copier après la connexion

Sélecteur de pseudo-classe

<!DOCTYPE html>
<!-- 伪类选择器 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style>
        a:link {
            color: red;
        }
        
        /* 当链接被访问过了之后,就会添加伪类visited */
        a:visited {
            color: lawngreen;
        }
        
        /* 当鼠标悬停于元素上面的时候,会自动添加伪类:hover */
        a:hover {
            color: #fff;
            background-color: aquamarine
        }
        
        /* 当链接被点击,但是鼠标不要放开的时候, 会自动给连接添加active伪类*/
        a:active {
            color: gold;
        }
        
        /* 遵循LoVe HAte 原则,否则可能无法正常显示*/

        /* 获取到焦点的时候,默认给标签添加focus效果 */
        input:focus{
            color: red;
        }

    </style>
</head>

<body>
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">新闻</a>
    <a href="/">娱乐</a>

    <input type="text" name="" id="">
</body>

</html>
Copier après la connexion

Sélecteur de pseudo-éléments

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素选择器</title>
    <style>
        /* 第一个必须是span标签,第二:是第一个孩子 */
        span:first-child {
            color: red;
            font-size: 50px;
        }

        /* 段落的首个字符 */
        p:first-letter {
            font-size: 50px;
            color: green;
        }
        /* 设置一行 */
        p::first-line {
            color: gold;
        }
        
        /* 在标签前面追加内容 */
        #temp::before {
            content:"================";
        }
        
        /* 在标签后面追加内容 */
        #temp:after {
            content:"xxxxxxxxxxxxxxx";
        }
    </style>
</head>

<body>
    <p id="temp">
        <span>一</span>
        <span>二</span>
        <span>三</span>
    </p>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>

    <p>张宜成</p>
</body>

</html>
Copier après la connexion

Fonctionnalités CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的特性:层叠性和继承性</title>
    <style>
        p {
            color: red;
            font-size: 40px;
        }

        p{
            color: green;
        }

        a{
            color:inherit; /*继承父标签的属性*/
        }
        /* 继承性:父容器设置的样式,子容器也可以享受同等待遇 */
        /* 
            所有字相关的都可以继承,比如:color,text-系列/font-系列/line-系列/cursor
            并不是所有的CSS属性都可以继承,例如,下面的属性就不具有继承性:边框,外边距,内边距,背景,定位,元素宽高属性.
            a标签不继承父标签的字体颜色
        */
    </style>
</head>
<body>
    <p>
        层叠性和继承性
        <span>我是Span标签</span>
        <a href="#">我是a标签,我特立独行</a>
    </p>
    <span>我是Span标签2</span>

</body>
</html>
Copier après la connexion

Priorité du CSS

<!DOCTYPE html>
<!-- 第一原则: CSS优先级从高到低: 内联样式 嵌入样式 外部引入样式 继承样式 默认样式 -->
<!-- 第二原则: ID选择器 > 类(伪类) > 标签 > 继承 > 默认-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 外部引入样式优先级大于继承样式 --><!-- 优先级别可能与嵌入样式互换,如果将link放到style下面,
        则外部引入样式优先于嵌入样式 -->
    <link rel="stylesheet" href="./css/t.css">
    <title>优先级</title>
    <style>
        /* 继承样式大于默认样式 */
        body{
            color: blueviolet;
        }
        /* 嵌入样式大于外部引入 */
        p {
            color: green;
            font-size: 50px;
            background-color: sienna;
        }

        .fs{
            font-style: 400px;
        }

        #tp #atc{
            font-size: 20px;
            /* !important是重要的意思,优先级最高高于内敛样式 */
            color:lightsalmon !important;
        }
    </style>
</head>
<body id="tp">
    <!-- 内联样式优先级大于嵌入样式 -->
    <p id="atc" class="fs" style="color: blue;">
        我是段落
    </p>
</body>
<!-- 综述: -->
<!-- 行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式 -->
<!-- important > 内联 > ID > 伪类/类/属性选择 > 标签 > 伪对象 > 通配符 > 继承 -->
</html>
Copier après la connexion

Recommandations associées :

Comment implémenter un style de barre de défilement personnalisé en CSS3 ? (Code)

Quels sont les types de sélecteurs CSS ? Une brève introduction aux sélecteurs CSS couramment utilisés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
css选择器
source：php.cn
Article précédent：Comment implémenter la conversion 2D en CSS (exemple) Article suivant：Comment réaliser un centrage vertical et horizontal en CSS lorsque la taille de l'élément n'est pas connue (code)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Sélectionnez les produits liés au woocommerce à l'aide d'une taxonomie personnalisée avec une hiérarchie à 3 niveaux J'ai une boutique woocommerce avec une classification personnalisée « Sports ». La classif...
Depuis 2024-04-06 20:05:30
0
1
544
MySQL : "Sélectionnez le texte de... comme <variable ici ou sous-requête>" J'ai le tableau suivant avec les données suivantes : id texte langue 1 texte allemand alle...
Depuis 2024-04-06 19:25:54
0
2
529
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
Comment sélectionner plusieurs cases à cocher dans Reactjs J'ai une liste d'options dans lesquelles je souhaite cocher plusieurs cases mais je n'y pa...
Depuis 2024-04-06 18:55:21
0
1
396
Générez des valeurs par défaut et des variables CSS à l'aide de SCSS J'implémente le style du site Web. Pour des raisons de support hérité, je dois prendre en ...
Depuis 2024-04-06 17:46:54
0
1
355
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal