css高级特性(“交集”, “并集”选择器, “后代”选择器,“子”选择器 ,继承特性 ,层叠特性)_java对象999的博客-程序员宅基地

技术标签: CSS  css高级特性(“交集”, “并集”选择器, “后代”选择器  

第一节:复合选择器
1.1 “交集”选择器
1.2 “并集”选择器
1.3 “后代”选择器
1.4 “子”选择器

 

交集选择器

比如:

<p class="c">交集</p>

即是p标签,class="c"也满足

效果:交集这个文字变红

样式:p.c{

        color:red;

}

 

 

并集选择器(中间用逗号隔开)

效果:大哥和小弟都变红

p,.c{

       color:red;

}

<P>大哥</P>

<h1 class="c">小弟</h1>

 

 

后代选择器

//效果:一层一代和三代 变蓝

span{
       color:blue;

}

 

三代变红

p sapn{
 

      color:red;

}

 

 

 

<div>一代<p>二代<span>三代</span></P></div></br>

<span>一层一代</span>

样式:div p span{}

 

 

子选择器:只选择儿子,不选择孙子及其他的后代

//后代选择器

效果:儿子和孙子都变红

div span{

     color:red;
}

 

//子选择器

只有儿子变红,孙子没效果

div>span{

      color:red;


}

 

<div>

   <span>儿子</span>

    <p><span>孙子</span></p>

</div>

样式:div>span{}

 

继承特性:

<ul>

      <li class="c">网页基础

             <ul>

                 <li>HTML</li>

                 <li>CSS</li>

                 <li>JavaScript</li>

             </ul>

      </li>

       <li>动态网页</li>

       <li>J2EE框架</li>

</ul>

解析:样式:

.c{

   color:red;
}

效果图:

 

p{

//灰色

    color:gray;
}

 

#p3{

//黑色
        color:blank;

}

.red{
          color:red;
}

 

在p标签中有行列样式(style="color:orange;"),ID样式(p3),类别样式(red),标记样式(就是标签p本身)

<p style="color:orange;" class="red" id="p3">第四行文本</p>

 

第四行文本颜色为橙色,如果去掉行列样式,颜色为黑色,再去掉ID样式,颜色为红色,再去掉类别样式(red)

,颜色就变为灰色了

 

层叠特性:

规则:行列样式>ID样式>类别样式>标记样式

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40135955/article/details/80652594

智能推荐

随便推点