<学习CSS>第二天笔记-选择器(标签选择器、类选择器、css命名规范、谷歌案例、多类名选择器、id选择器、通配符选择器、伪类选择器)

四、选择器

要想将CSS样式应用于持定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分则成为选择器(选择符)。

(一)标签选择器(元素选择器)
标签选择器是只用于HTML标签名作为选择器,按标签名分类,为页面中某一类标签指定统一的css样式。
基本语法格式:

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


元素名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
(标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。)

(二)类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名
语法格式:
.类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用时用class=”类名”即可

例:这里写图片描述
类选择器示例代码图

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

(三)CSS命名规范
*小技巧:①长名称或词组可以使用”-“中横线来为选择器命名;
②不建议使用”_“下划线来命名css选择器;
(浏览器兼容问题‘比如使用_tips的选择器命名,在IE6中是无效的’
能良好区分Java Script变量命名,JS变量命名是用”_“下划线)
③不要纯数字、中文等命名,尽量使用英文字母来表示。

(四)谷歌案例
这里写图片描述
谷歌案例代码图

这里写图片描述
谷歌案例效果图

(五)多类名选择器
我们可以给标签指定多个类名,从而达到更多的选择目的
*注意
①样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关;
②各个类名中间用空格隔开。
例:
这里写图片描述
多类名选择器实例代码图

这里写图片描述
多类名选择器实例效果图

(六)id选择器
id选择器使用”#“进行标识,后面紧跟id名。
其语法格式:

#id{属性1: 属性值1; 属性2: 属性值2;}

该语法格式中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应文档中某一个具体的元素。(用法基本和类选择器相同)
这里写图片描述
id选择器示例代码图

(七)id选择器和类选择器的区别
W3C标准规定,在同一页面中,不允许有相同的id对象出现,但允许相同名字的class。
类选择器,好比人的名字,是可以多次重复出现使用的;
id选择器,好比人的身份证号码,是唯一的,不得重复的,只能使用一次。

*总结:类选择器和id选择器的区别在于使用次数上。

(八)通配符选择器 [用的比较少,了解一下]
通配符选择器用*表示,*代表所有的选择器。
语法格式:

* { 属性1: 属性1; 属性值2: 属性值2; }

这里写图片描述
通配符选择器示例代码图

(九)伪类选择器

【1】链接伪类选择器
:link (未访问的链接)
:visited (已访问的链接)
:hover (鼠标移动到链接上)
:active (选定的链接 [当我们点击鼠标未松开时的显示状态] )

*注:写的时候顺序不能颠倒,必须按照 l v h a 的顺序写。
这里写图片描述
链接伪类选择器实例代码图

链接伪类选择器的简写方式:
这里写图片描述
链接伪类选择器简写方式实例代码图

【2】结构伪类选择器(css3)
:first-child:(选取属于其父元素的首个子元素的指定选择器)
:last-child:(选取属于其父元素的最后一个子元素的指定选择器)
:nth-child(n):(匹配属于其父元素的第n个子元素,不论元素的类型, even’偶数’、odd’奇数’、n ‘从0开始’ 、2n就是0/2/4/6…..、3n就是/3/6/9……)
:nth-last-child(n):(选择器匹配属于起父元素的滴n个子元素的每一个元素,不论元素的类型,从最后一个子元素开始计数,n可以是数字、关键词或公式)
这里写图片描述
这里写图片描述
这里写图片描述
结构伪类选择器示例代码图

【3】目标伪类选择器
:target 目标伪类选择器:选择器可以用于选取当前活动的目标元素。
例:

<style>
:target {
        color: red;
        font-size: 30px;
}
</style>
  • 1
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

花卷爱吃鱼

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值