Plusieurs utilisations des sélecteurs d'attributs CSS3 (exemples de code)-tutoriel CSS-php.cn

Objectifs de cet article :

1. Maîtriser plusieurs utilisations des sélecteurs d'attributs en CSS3

Questions :

1. Il est nécessaire d'utiliser div+css pour y parvenir. les effets suivants, mais les exigences Tous les fichiers CSS utilisent des sélecteurs d'attributs pour définir les styles d'éléments

Plusieurs utilisations des sélecteurs dattributs CSS3 (exemples de code)

Remarques supplémentaires :

La largeur totale du div est de 850 et. doit être affiché au centre de la page

2. La taille du titre est de 28, affichage en gras

3. L'autre taille de police est de 14px

4. potins de célébrités, accédez à tobagua.html, cliquez sur les actualités militaires. Accédez à affairs.html

Faisons maintenant l'opération spécifique

1 Puisque cette affaire ne nécessite aucun matériel supplémentaire. , l'étape de préparation des matériaux peut être omise

2. Créer index.html et écrire l'architecture

Analyse de l'idée ? :

1. L'objectif est divisé en deux parties : gauche et droite, chaque partie affiche une liste d'actualités, mais la catégorie de chaque actualité est différente, et certains styles sont également différents

2. La couleur des news contenant Ruby Lin doit être définie séparément

3 Contenant f15 La couleur des news doit également être définie séparément

4. Les titres des deux parties doivent également. être défini séparément, donc certains attributs doivent être définis séparément pour eux, afin qu'ils puissent être mis en correspondance via le sélecteur d'attribut

5. Parce que chaque partie est une liste, nous pouvons utiliser ul, mais les deux uls sont affleurants, nous devons donc utiliser float. Puisqu'il s'agit d'un float, afin de garantir que le conteneur extérieur peut toujours envelopper l'élément float, vous devez donc ajouter l'élément clear à la fin pour effacer le flottant

Selon à l'analyse, nous obtenons le code suivant

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
</head>

<body>
    <div container="true">
        <div left="true">
            <span title="true"><a href="tobagua.html">明星八卦</a></span>
            <ul>
                <li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 </li>
                <li class="news">->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ </li>
                <li class="news">->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 </li>
                <li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li>
            </ul>
        </div>
        <div right="true">
            <span title="true"><a href="toaffairs.html">军事新闻</a></span>
            <ul>
                <li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li>
                <li class="affairs news">->越南的骑兵警队，马略矮了点啊 </li>
                <li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li>
                <li class="affairs news">->不到一个月又出事：美军F-35降落时起落架折断 </li>
            </ul>
        </div>
        <div class="clear"> </div>
    </div>
</body>
</html>

Copier après la connexion

3. Écrivez le style, créez un dossier css et créez-y un nouvel index css, comment y écrire les styles, ce qui suit. est l'idée d'analyse

Pensez analyse :

Tous les sous-éléments du conteneur conteneur

1 , car chaque style doit utiliser un sélecteur d'attribut pour correspondre au paramètre, notre idée est donc d'abord d'obtenir l'élément avec l'attribut conteneur=true, puis de définir certains styles courants pour celui-ci, tels que le remplissage et la marge les plus courants, car il n'y a pas de Avec ce paramètre, vous peut ne pas connaître le remplissage par défaut de certains éléments Afin de vous permettre de vous concentrer sur la logique d'écriture, nous avons unifié leur remplissage et leur marge à 0

Ajoutez donc le code suivant à index.css :

div[container =true] *{
    padding:0;
    margin:0;
}

Copier après la connexion

conteneur conteneur

1. Selon les exigences, la largeur du conteneur le plus à l'extérieur est de 850, il doit être centré, il y a un rembourrage en haut, en bas, à gauche et à droite. , avec une bordure grise, et la taille de police par défaut est 14px, lequel est le conteneur conteneur, c'est l'élément avec l'attribut conteneur = true

, ajoutez donc le code suivant à index.css :

div[container =true] {
   width: 850px;
   margin: 0 auto;
   font-size: 14px;
   border: 1px solid lightgray;
   padding: 10px;
}

Copier après la connexion

2 paramètres de style public du titre

1 Parce que les titres doivent être centrés, avec une taille de police de 28 px et un affichage en gras, lesquels sont des titres. éléments avec l'attribut title=true

Ajoutez donc le code suivant à index.css :

span[title=true] {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
}

Copier après la connexion

Paramètres séparés pour 2 connexions de titre

1. La couleur du titre des potins est rougeâtre

2. La couleur du titre militaire est bleue

3 L'attribut href contenant la chaîne bagua est la connexion du titre à gauche. avec toaffairs est la connexion du titre à droite

*= signifie inclusion, ^= signifie le début

Ajoutez donc le code suivant à index.css :

a[href *=bagua] {
   color: rgb(234, 84, 23);
}

a[href ^=toaffairs] {
   color: green;
}

Copier après la connexion

Paramètres des div flottants gauche et droit

1. Le div gauche doit flotter vers la gauche, alors lequel est le div gauche. En fait, c'est un div avec un attribut gauche vrai

2. Le div de droite doit flotter vers la droite, alors lequel est le div de droite ? En fait, c'est un div avec un attribut de droite vrai

3. La fonction est de clear Le div flottant est en fait celui dont la classe se termine par clear

Remarque : $= indique par quoi il se termine par

, ajoutez donc le code suivant à index.css :

div[left =true] {
   float: left;
}

div[right =true] {
   float: right;
}

div[class $= clear] {
   clear: both;
   float: none;
   width: 0;
   height: 0;
}

Copier après la connexion

li settings

1. li ne contient pas de points noirs, donc list-style:none

2. is li

3 Selon l'effet, il y a un certain espacement entre le haut, le bas, la gauche et la droite

Ajoutez donc le code suivant à index.css :

li[class =news] {
   list-style: none;
   height: 42px;
   line-height: 42px;
   padding:3px 10px;
}

Copier après la connexion

<🎜. >

Contient les paramètres du titre de Ruby Lin

1 La couleur de ce titre est jaune terreux et la police est en gras

2 L'attribut de classe se terminant par lxr. est le titre de Ruby Lin, alors utilisez $=

[class $=lxr]{
    color:peru;
    font-weight: bold;
}

Copier après la connexion

Paramètres de titre contenant f15

1 La couleur du titre est bleue et la police est en gras

2. Les titres dont l'attribut class contient la chaîne f15 définissent le titre de la cible, utilisez donc *=

[class*=f15]{
    color:blue;
    font-weight: bold;
}

Copier après la connexion

Jusqu'à présent, tout le contenu de index.css est le suivant :

div[container =true] *{
    padding:0;
    margin:0;
}
div[container =true] {
   width: 850px;
   margin: 0 auto;
   font-size: 14px;
   border: 1px solid lightgray;
   padding: 10px;
}

span[title=true] {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
}

a[href *=bagua] {
   color: rgb(234, 84, 23);
}

a[href ^=toaffairs] {
   color: green;
}

div[left =true] {
   float: left;
}

div[right =true] {
   float: right;
}

div[class $= clear] {
   clear: both;
   float: none;
   width: 0;
   height: 0;
}

li[class *=news] {
   list-style: none;
   height: 42px;
   line-height: 42px;
   padding:3px 10px;
}
[class $=lxr]{
    color:peru;
    font-weight: bold;
}
[class*=f15]{
    color:blue;
    font-weight: bold;
}

Copier après la connexion

Ensuite, introduisez index.css dans index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
</head>

<body>
    <div container="true">
        <div left="true">
            <span title="true"><a href="tobagua.html">明星八卦</a></span>
            <ul>
                <li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 </li>
                <li class="news">->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ </li>
                <li class="news">->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 </li>
                <li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li>
            </ul>
        </div>
        <div right="true">
            <span title="true"><a href="toaffairs.html">军事新闻</a></span>
            <ul>
                <li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li>
                <li class="affairs news">->越南的骑兵警队，马略矮了点啊 </li>
                <li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li>
                <li class="affairs news">->不到一个月又出事：美军F-35降落时起落架折断 </li>
            </ul>
        </div>
        <div class="clear"> </div>
    </div>
</body>
</html>

Copier après la connexion

Le résultat courant est :

Plusieurs utilisations des sélecteurs dattributs CSS3 (exemples de code)