美文网首页- [ CSS入门 ]
十二,CSS其他选择器

十二,CSS其他选择器

作者: 好多可乐 | 来源:发表于2020-12-18 14:13 被阅读0次

    1,调用class选择器(允许重复class选择器名称):
    定义:

    <p class="imooc">慕课网</p>
    

    调用:

    .imooc{
            color: red;
           }
    

    2,调用id选择器(唯一)
    定义:

     <p id="name1">慕课网</p>
    

    调用:

     #name1{
            color: blue;
      }
    

    3,调用选择器:*

     *{
            background-color: yellow;
       }
    

    4,调用,选择器(联合选择器,用逗号隔开):

     #name1,#name2{
            color: blue;
           }
    
     <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    <title>Demo</title>
        <style type="text/css">
        #div1 p{
         background-color: blue;
        }
    
    </style>
    </head>
    
    <body>
    <div id=div1>
    <div id=div2>
      <h1>欢迎来到慕课网</h1>
      <p class="imooc" id="name1">慕课网</p>
              <p class="imooc" id="name2">www.imooc.com</p>
    </div>
             <div id=div3>
              <p class="baidu" id="bd1">百度</p>
              <p class="baidu" id="bd2">www.baidu.com</p>
             </div>
              <p class="google" id="google">www.google.com</p>
        </div>
        <p>我是div外面的p标签</p>
         
    </body>
    

    3,空格选择器:子孙(后代选择器)

      #div1 p{
         background-color: blue;
        }
    

    这里把div2和div3的全部p标签都选中了
    4,>选择器:子选择器(不是子孙后代)
    按照分析,这里只有google那段被选中,其他都是属于div2,div3里面的

      #div1> p{
         background-color: blue;
        }
    

    5,+选择器:相邻兄弟选择器

     #div1+ p{
         background-color: blue;
        }
    

    表示和div1是同一级的段落标记,符合条件的只有下面这个

    <p>我是div外面的p标签</p>
    

    6,[ ]:属性选择器

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    <title>Demo</title>
        <style type="text/css">
         p[id="name1"]{
          color: blue;
         }
    
    </style>
    </head>
    
    <body>
         <p class="imooc" id="name1">慕课网</p>
         <p class="imooc" id="name2">www.imooc.com</p>
         <h1>欢迎来到慕课网</h1>
    </body>      
    

    相关文章

      网友评论

        本文标题:十二,CSS其他选择器

        本文链接:https://www.haomeiwen.com/subject/lhgxnktx.html