Css选择器分类

前端 专栏收录该内容
25 篇文章 0 订阅
选择器名 用法和解释
标签选择器

又称为元素选择器 ,最为基本

格式:标签名{}

ID选择器根据id选择标签 ,格式:#id{}
Class选择器

根据class名,设置的选择器

格式:.class名{} ,点一定注意

并集选择器

创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素 或者理解成将多个相同样式定义的选择器以逗号进行分组。

格式:选择器,选择器,选择器{}

后代选择器

多个选择器以空格分开,组合成包含关系,且右边的选择器从属于左边,即右边的选择器只能在左边的选择器范围内选择

格式:父选择器名   子代选择器名{}

子元素选择器

子代选择器和后代选择器很像,不过只选择匹配元素中的直接后代目标元素为匹配第一个选择器的元素的直接后代,且匹配第二个选择器用于选择指定标签元素的第一代子元素

语法:第一个选择器>第二个选择器

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

兄弟选择器

相邻兄弟选择器可以选择紧接着另一元素后的元素,必须得是同一个父元素

格式:a+b{} 

伪类选择器 动态伪类选择器:根据条件的改变匹配元素,是相对于文档的固定状态来说的。
        :link选择器 选择未访问链接元素
        :visited选择器 选择已访问的链接元素
        :hover选择器 鼠标悬停在其上的元素
        :active选择器 被用户激活的元素,通常意味着用户即将点击该元素 
属性选择器

属性选择器:对带有指定属性的 HTML 元素设置样式
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。 

格式:标签名[属性名='值']{}

 

 

 


   

        

       

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值