前端学习——CSS选择器

目录

CSS选择器

基础选择器

复合选择器

一、CSS基础选择器

标签选择器

类选择器(最常用的选择器)

id选择器(和类选择器结合记忆)

通配符选择器(使用范围最广)

伪类选择器

链接伪类选择器(用a标签可以添加的状态,可以改变链接不同状态的样式)

结构(位置)伪类选择器(CSS3)

目标伪类选择器

二、CSS复合选择器(由两个或多个基础选择器组合而成)

交集选择器

并集选择器

后代选择器

属性选择器

伪元素选择器


CSS选择器

  1. 基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器
  1. 复合选择器

  • 多个基础选择器组成

一、CSS基础选择器

标签选择器

标签名{ 属性1:属性值; 属性2:属性值; 属性3:属性值; ... ... }

作用:

        

  • 可以把某一类标签全部选出来,譬如<div>,<span>

优点:

        

  • 能够快速为页面元素设置统一样式

缺点:

        

  • 不能差异化,全部统一


类选择器(最常用的选择器)

在CSS中定义一个类,为这个类添加样式属性,在HTML中为需要此样式的标签添加class属性。

作用:通过使用标签,可以在一段相同标签中为预设的一个或多个语句添加样式。

注意:

  • 长命名可以在雷鸣中使用短横线,例:.yu-ong{}
  • 类命名规则
CSS:
.类名{
    属性1:属性值;
    ...
    ...
}

HTML:
<li class="类名">...</li>
<li>...</li>
<li>...</li>


id选择器(和类选择器结合记忆)

W3C规定:

类选择器可以重复多次使用,类似于人名,是可以复用的

id选择器是唯一的,类似于身份证号,且只允许使用一次

CSS:
#big{ /*id选择器*/
    color:red;
}

HTML:
    <div id="big">lily</div>


通配符选择器(使用范围最广)

<style>
    *{  *就代表所有选择器
        color:pink;    
    }
</style>
<body>
    <p>1111</p>
    <div>2222</div>
    <span>3333</span>
    <em>4444</em>
    <strong>5555</strong>
</body>


伪类选择器

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值