Introduction détaillée aux sélecteurs CSS-tutoriel CSS-php.cn

Introduction détaillée aux sélecteurs CSS

王林

Libérer： 2020-04-05 09:12:42

avant

3380 Les gens l'ont consulté

Introduction détaillée aux sélecteurs CSS

Qu'est-ce qu'un sélecteur ?

La fonction du sélecteur est de retrouver l'élément à travers lui et de transmettre le style css à l'élément ! Les sélecteurs CSS sont principalement divisés en quatre catégories : les sélecteurs de base, les sélecteurs d'attributs, les sélecteurs de combinaison et les sélecteurs de pseudo-classe !

sélecteur de base CSS

Le sélecteur de base est divisé en : * joker, sélecteur de balise, sélecteur de classe, sélecteur d'identifiant, vous devez faire attention à la programmation ici L'idée est que les éléments des feuilles de style en cascade CSS ont un et un seul identifiant. Faites attention aux points suivants : 1. Unicité de l'ID 2. Les ID des éléments ne sont pas les mêmes, tout comme chaque personne n'a qu'une seule carte d'identité, l'ID représente la carte d'identité 3. Le sélecteur de classe n'est pas unique, il peut être réutilisé ! De plus, ce caractère générique * représente le monde entier.

  <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>css基本选择器</title>
     <style type="text/css">
          *{
              color: skyblue;
         }/**通配符*/
         div{
             color: red;
         }/*标签选择器*/
         .box{
             color: steelblue;
         }/*class选择器*/.box{color: steelblue;}也可以写成*.box{color: steelblue;}代表的所有的box字体颜色为 steelblue
         #content{
             color: tomato;
         }/*id选择器*/
     </style>
 </head>
 <body>
     <div id="content">
         大灰牛博客专注web前端技术学习
     </div>
 </body>
 </html>

Copier après la connexion

(Tutoriel recommandé : Tutoriel d'introduction CSS)

sélecteur de combinaison CSS

Placez le sélecteur de base via des symboles spéciaux Certains les gens pensent que les enchaîner ensemble s'appelle des sélecteurs de combinaison CSS. Les sélecteurs de combinaison CSS courants incluent : les sélecteurs de groupe, les sélecteurs imbriqués, les sous-sélecteurs, les sélecteurs adjacents de même niveau

 <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>css组合选择器</title>
      <style type="text/css">
      /* div{
          color: teal;
         font-size: 24px;
     }
     p{
         color: teal;
     } */
     div{
         font-size: 24px;
     }
     div,p{
         color: teal;
     }/*分组选择器*/
     div p{
         color: red;
     }/*嵌套选择器*/
     ul>li{
         font-size: 24px;
         list-style: square;
     }/*子选择器*/
     div+p{
         color: blue;
     }/*相邻同级别选择器*/
     </style>
 </head>
 <body>
     <div>
         成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨
         <p>自以为懂得很多了经历很多了最后才知道都是那么的可笑</p>
     </div>
     <p>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</p>
     <p>成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨<span>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</span></p>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </body>
 </html>

Copier après la connexion

le sélecteur d'attribut CSS

Sélecteur de base [attribut], sélecteur de base [attribut=valeur], sélecteur de base [attribut~=valeur] séparé par plusieurs espaces, sélecteur de base [attribut] Par quoi commence ^=valeur] et que signifie la base le sélecteur [attribute$=value] se termine par ?

<!DOCTYPE html>
 <html>
 <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>css属性选择器</title>
      <style type="text/css">
     div[title]/*基本选择器[属性]*/
     div[title=english]{
         color: blue;
     }/*基本选择器[属性=值]*/
     div[title~=en]{
         color:#f90;
         font-weight: bold;
     }/*基本选择器[属性~=值] 任意包含有属性中的一个*/
     p,div[title^=zh]{
         font-size:24px;
         color: brown;
     }/*基本选择器[属性^=值]以什么开始*/
     div[title$=china]{
         letter-spacing: 10px;
         text-decoration: line-through;
         font-style: italic;
     }/*基本选择器[属性$=值]以什么结束*/
     </style>
 </head>
 <body>
     <div title="english">
         If you can NOT explain it simply, you do NOT understand it well enough
     </div>
     <div title="english en yingyu">
         你们没发现嘛？2013爱你一生，2014爱你一世，2015爱你一屋，2016爱你一路，2017爱你一切。

Copier après la connexion

Tutoriels vidéo associés recommandés : tutoriel vidéo CSS

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!