css常用选择器总结

css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到css选择器。

常用选择器:

  1. 标签选择器(针对页面中所有当前类型标签生效)

    例如:div{
    width:1100px;
    height:200px;
    }

  2. class选择器 – 样式中(css)定义好后,在结构中(html)可以多次重复使用。

    例如:
    结构中:`<div`  class=”class名”>`</div>`
    样式中:.class名{ 样式 }
    
  3. id选择器 – 样式(css)定义好后,在结构中(html)中使用,通常用于JavaScript。具有唯一性
    例如:
    结构中:<div id=”id名”></div>
    样式中:#id名{ 样式 }

  4. 群组选择器:可以对多个不同的选择器设置相同的样式
    格式:选择器1,选择器2,选择器3 { 样式 }
    使用时可以任意组合不同的选择器

  5. 后代选择器 格式 :父选择器 子选择器{ 样式 }
    在a选择器区域内的所有b选择器都会生效

  6. 通配符选择器:
    *{ margin:0; padding:0; }

  7. 伪类选择器: a:hover{ 鼠标悬停时显示的样式 }
    a:link{ 默认的链接样式 }
    a:visited{ 已访问过的链接样式 }
    a:hover{ 鼠标悬停时的样式 }
    a:active{ 鼠标按住时的样式 }
    注意书写顺序:l – v – h – a 爱恨原则:love and hate

  8. 父子选择器:只选中直接为子辈的元素

    .box>h1{样式}

选择器的命名规则:
1、 一定注意不能使用数字开头,必须使用字母开头,起名尽量起有意义的与页面相关的名字
2、 特殊的符合的使用,减号(-)和下划线(_),不能使用其他符号
3、 起名可以根据(内容,位置,大小)去命名

选择器的优先级(权重关系)
条件1:当有不同选择器对同一个对象进行样式指定时;
条件2:并且两个选择器有相同的属性被赋予不同的值时;
这样就得出一个结论:优先级由小到大
标签选择器-Class选择器- Id选择器-行内样式
!important; 最高级别,提高样式权重,拥有最高的优先级

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值