为了账号安全,请及时绑定邮箱和手机立即绑定

进击的哈士奇-CSS之基础选择器的总结

标签:
Html/CSS

1、元素选择器
别名:标签选择器、标记选择器
特点:通过元素名称作为选择器名称
作用:修改某一元素的默认样式
举例:

body{}
h1{}
h2{}

2、类选择器(类样式)
特点:通过元素的 class 属性来进行引用
作用:可以很方便的修改多个标签的样式
语法:.类名{color:red;bakcground:yellow;}
注意:类名不能以数字开头
举例:

 <div class="className"></div>
    .className{
        color:red;
        bakcground:yellow;
    }
  *注意*:在一个class 中可以引用多个 类样式,多个类样式用 空格 隔开

3、分类选择器
特点:由类选择器衍生出来的新选择器,将类选择器 与 元素选择器 结合使 用
目的:为了更精准的定位的页面的元素
语法:元素选择器.类选择器{}

p.narbar{}
解释:选择了p标签并且类名为narbar的标签。

4、通用选择器
作用 :适配页面上所用的元素,改变他们的样式
语法:*{}
特点:可以选择当前页面的标签。
5、id选择器(id样式)
作用:通过页面元素的id值来进行选择器的引用,非常方便的定位到页面上的一个元素。精确定位。
语法:#id{}
举例:

#top{background-color:red;}
<div id="top"></div>
   id的作用:
      1、定义元素在页面中的唯一标识
      2、引用样式表中的id样式
          3、可以存在多个id,但是大家约定俗成。
                id就像我们的身份证,是唯一的,这样方便。
           4、同时约定俗成的:控制css样式用class(类名),控制js用id

6、群组选择器
特点:选择器声明是以 , 隔开的 选择器列表
作用:定义一组元素的样式
h3,p,.new,#test,div.asd,p.test{}
注意:满足上述的条件的标签,都可以被选中
css选择器,还有很多。但是不怎么经常用。这里只总结了常用的。

点击查看更多内容
12人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消