CSS常用选择器1

一. 元素(标签) 选择器
作用:根据指定标签名称,在当前界面找到所有该名称的标签,然后为其设置属性。
格式:标签名称{
属性:属性值;
}
注意点:只要是HTML中的标签,都可以作为标签选择器。

二. class选择器
作用:根据指定类名称,在当前界面找到所有该类名的标签,然后为其设置属性。
格式: .类名{
属性:属性值;
}
注意点:
1.每个HTML标签都有一个class属性
2.在同一个界面中的class名称是可以重复的
3.在编写类选择器之前必须添加一个小数点(英文状态下)
4.类名就是用来给某个或多个特定的标签设置样式的
5.在html中一个标签可以对应多个类名(命名规则:class="name1 name2 name3 ...")

三. id选择器
作用:根据指定id名称,在当前界面找到该id名的标签,然后为其设置属性。
格式: #id名{
属性:属性值;
}
注意点:
1.每个HTML标签都有一个id属性
2.在同一个界面中的id名称是不可以重复的
3.在编写id选择器之前必须添加一个#(英文状态下)
4.类名就是用来给某个特定的标签设置样式的
5.id名称不能是html标签的名称
6.在企业中一般id多用于js操作,在操作样式表中用的较少

四. 后代(包含)选择器
作用:在当前界面找到指定标签的所有后代标签中的特定的后代标签,然后为其设置属性。
格式: 指定标签名称 后代标签名称{
属性:属性值;
}
注意点:
1.后代选择器必须用空格隔开
2.后代不一定只是儿子,也包括孙子,重孙等,只要是指定标签下的后代标签中相同的标签都被选中
3.后代选择器不仅可使用标签名称构造选择器,也可将其他选择器结合使用

五. 群组选择器
作用:根据选择器名称,在当前界面找到这些的标签,然后为其设置属性。
格式: 选择器1 ,选择器2 ,...{
属性:属性值;
}
注意点:
1.当有多个选择器应用相同样式时
2.选择器之间必须用,(逗号)隔开

六. *通配符选择器
作用:给当前界面所有元素(标签)设置属性。
格式: *{
属性:属性值;
}
注意点:运用通配符选择器时,会遍历当前界面所有标签,当标签过多时,性能也会变差,企业中一般很少使用。

七. 伪类选择器
作用:根据指定选择器或标签名称后接伪类选择器,设置其链接状态属性。
格式:
1) a:link{属性:属性值;}
2) a:visited{属性:属性值;}
3) a:hover{属性:属性值;}
4) a:active{属性:属性值;}
注意点:
1.link表示设置鼠标链接初始状态的属性
2.visited表示设置鼠标链接浏览后状态的属性
3.hover表示设置鼠标链接悬停状态的属性
4.active表示设置鼠标链接激活状态的属性
5.除hover可给其他标签使用外,其余均只能用在超链接标签(a)上。

先归纳这六种,均为html+css布局中的常用选择器,有归纳的不合理的地方,读友们一定要提出评论哦。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 137,104评论 19 139
  • 选择器: 标签选择器格式:标签名称{属性:值;} id选择器格式: id名称{ } 类选择器格式:.类名{属性:值...
    往事一块六毛八阅读 545评论 0 0
  • CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然...
    Jackson_yee_阅读 589评论 0 0
  • ## CSS选择器 # 标签选择器 # id选择器 # 类选择器 # 后代选择器 # 子元素选择器 # 交集选择器...
    KsKison阅读 681评论 0 0
  • 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性格式...
    e919b03f06c2阅读 330评论 0 0

友情链接更多精彩内容