对于css选中器的细致介绍-百分百源码网

对于css选中器的细致介绍

发布时间：09/01 来源：未知浏览：关键词：

什么是选中器？

选中器的作用是通过它可以寻到元素，把css样式传递给元素！css选中器主要分为：根本选中器、属性选中器、组合选中器与伪类选中器四个大类！

css根本选中器

根本选中器又分为：*通配符、标签选中器、class选中器、id选中器，在这里需要留意的编程思想在css层叠样式表中元素有且仅有一个id。留意以下几点1.id独一性2.元素id不雷同，就像每一个人只要一个身份证一样，ID就代表身份证3.class选中器不具有独一性，它可以反复使用！此外这个*通配符代表的是全局。

  <!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>

（引荐教程：CSS入门教程）

css组合选中器

把根本选中器通过非凡符号串在一起成心见称之为css组合选中器，常见的css组合选中器有：分组选中器、嵌套选中器、子选中器、相邻同级别选中器

 <!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>

css属性选中器

根本选中器[属性]、根本选中器[属性=值]、根本选中器[属性~=值]空格符隔开多个、根本选中器[属性^=值]以什么开端、根本选中器[属性$=值]以什么完毕

<!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喜欢你一切。

相关视频教程引荐：css视频教程

以上就是关于css选中器的具体介绍的具体内容，更多请关注百分百源码网其它相关文章！

打赏