HTML中CSS的各种选择器使用方法

选择器

元素选择器

用标签名来作为选择器,选中所有相应的元素

 

3.2类选择器

根据class的属性来选择元素,样式定义为:

  .className{  xxxxxxx}

 

3.3 ID选择器

根据id名来选择元素,样式定义为:

  #idName{xxxxxxxxx}

 

3.4属性选择器

 

关系选择器

E F:选择E元素的后代元素F(所有后代  包括子类,孙类)

E>F:选择E元素的直接后代元素(也就是子类)

E+F:选择E元素的第一个弟弟元素F

E~F选择E元素的所有弟元素F

并选择器

将相同的样式放在一起,类名直接用逗号分开

<style type="text/css">

                     .one,.two{

                            background-color: greenyellow;

                     }

                     .one{

                            width: 200px;

                            height: 50px;

                     }

                     .two{

                            width: 50px;

                            height: 200px;

                     }

              </style>

       </head>

       <body>

              <div class="one">asd</div>

              <div class="two">dsa</div>

       </body>

 

通配符选择器

通配符选择器

写法  *{xxx}

<style type="text/css">

                     *{

                            font-size: 35px;

                            color: #0000FF;

                            font-family: "arial black";

                     }

              </style>

       </head>

       <body>

              <div>

                     adassfa

                     <p>111</p>

                     <p>222</p>

                     <p>333</p>

                     <ui>

                            <li>123</li>

                            <li>456</li>

                            <li>789</li>

                     </ui>

              </div>

       </body>

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值