css选择器—四大基本选择器

一、四大基本选择器

       1、统配选择器(*):匹配页面中的所有元素。

             *{

              }

              例:页面中所有的元素都变成红色,背景是绿色

               *{

                     color:red;

                     background-color: darkseagreen;

                }

              如图:

        2、标签选择器:通过标签来匹配元素

              标签名{

               }

               例:

               p标签:字体颜色黑色,字体大小50像素

               div标签:高度和宽度都是100像素,颜色为#6495ED

                    p{
                    color: black;
                    font-size: 50px;
                     }
                    div{
                     width: 100px;
                     height: 100px;
                     background: #6495ED;
                    }

             运行效果如图:

        3、类选择器:匹配具备class属性的元素

             class=“类名”

             .类名{}

              例:

              给一个div添加class属性

                   <div class="div1">
                    我是小妖怪,逍遥又自在
                    </div>

               使用类选择器,选择div这个元素,调整样式

                    .div1{
                     height: 100px;
                     color: crimson;
                     }

              运行效果如图所示:

        4、id选择器:匹配具备id属性的元素(具备唯一性:id名不可重复,类似于身份证号)

              id=“id值”

              #id{

              }

              例:

              给div添加id属性:

               <div id="div2">
               id选择器
               </div>

              通过id选择div3调整样式:

              #div2{
              height: 100px;
              color: aquamarine;
              background: khaki;
              }

              运行效果如图所示:

注意:选择器有权重

选择器具有优先级:导致样式覆盖

优先级从小到大排列:统配选择器<标签选择器<类选择器<id选择器<内联样式(行内样式:style)

选择器的最高权重是:!important 关键字

例:

*{
  color: #DD0000;
 }

 p{
   color:blueviolet !important;
   font-size: 50px;
 }

.p1{
     color: red;
     font-size: 14px;
}

#p1{
     border: 1px solid pink;
     color: green;
     font-size: 20px!important;
}

<p class="p1"  id="p1" style="color: #00FFFF;">猜猜我是什么颜色?有多大?</p>

猜一猜?文字最终显示什么颜色,大小是多大?

运行效果如图:

可以看出文字最终显示为紫色,20像素

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值