选择器总结

什么是选择器?
选择器:描述后面的样式施加到哪些目标,或者说是根据某个依据来选择应用样式的目标。
根据选择依据的不同,就产生了各种不同的选择器。
元素选择器
按照标签(元素)的名称来选择相应的目标

div{
	background-color:red;
}

id选择器
根据元素的id属性来选择,比方下例中的选择器就是选中id="tt"的目标,书写格式是:

#idname
#tt{
	font-size:24px;
}

类选择器
根据元素的class属性来选择,比方下例中的选择器选中class="tt"的元素,其书写格式为:

.classname
.tt{
	font-size:24px;
}

属性选择器
根据属性的特征来选择应用样式的目标,所以从这个意义上来讲,它包含了id选择器和类选择器,书写格式为
[title]:选择设置了title属性的元素
[title=“tt”]:选择title属性等于"tt"的元素
[title^=“tt”]:选择title属性以"tt"开头的元素
[title$=“tt”]:选择title属性以"tt"结尾的元素
[title~=“tt”]:选择title属性包含完整"tt"单词的元素
[title*=“tt”]:选择title属性包含"tt"的元素

关系选择器:
根据元素见的家族关系来选择目标
E F:在选择器E选中的目标中再去选中后代满足F选择器的目标
E>F:选择直接后代
E+F:选择第一个“弟”元素
E~F:选择所有的“弟”元素
学习方法的提示:这些细节有可能记不住了,但是只要理解了就好,需要用的时候不记得查一下就行。

伪类、伪元素选择器
伪元素:其效果与增加一个元素来实现的效果等价,所以称之为伪元素
伪类:其效果与增加一个类来实现的效果等价,所以称之为伪类

组合选择器:多个选择器使用同一个样式描述,以逗号隔开

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值