css常用选择器(基础)

CSS选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
记住id选择器不使用复合选择器。

CSS子元素和后代选择器:

在这里插入图片描述
在这里插入图片描述
例子:
在这里插入图片描述
例子:
在这里插入图片描述
在这里插入图片描述
例子:
在这里插入图片描述
注意:这里的子元素选择器不支持ie6.开发时要问清需求。

CSS伪类选择器

在这里插入图片描述
在这里插入图片描述
例:a:link{color : green;}
在这里插入图片描述
a:visited{color : red;}
在这里插入图片描述
文本框聚焦的意思就是鼠标点一下文本框
在这里插入图片描述
在这里插入图片描述
注意,hover和active可以对其他标签使用,例如p标签

CSS伪元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
例子:
在这里插入图片描述
这里要注意,before和after所写的content在页面中是无法复制的。(特殊用法)

CSS属性选择器

title属性,这个属性可以给任何标签指定,当鼠标移到该元素上时,元素中的title属性值将作为提示文字显示。
在这里插入图片描述
例子:p[title]{backgroundcolor : yellow}
p[title = “hello”]{backgroundcolor : yellow}

CSS子元素的伪类选择器

在这里插入图片描述
例子:
p:first-of-type{} 为所有p元素中的第一个设置样式
p:nth-of-type(even){} 为所有位于偶数位置的p标签设置样式
在这里插入图片描述
例子:
p:first-child{} 为所有元素中的第一个且第一个是p元素 设置样式(如果不符合条件则不设置)
在这里插入图片描述
例子:
p:nth-child(3){} 为第三个p元素设置样式
p:nth-child(even){} 为所有p元素处于偶数位置的设置样式

注意:这里不建议使用-child的样式,因为是从全部标签中选择,容易造成混淆,推荐-of-type。

CSS兄弟元素选择器:

在这里插入图片描述
例子:
span + p {bg-c : yellow}
注意 是紧挨着span的后一个兄弟p,不然无效。
在这里插入图片描述
span ~ p {bg-c: yellow}
选中span后的所有兄弟p元素。

CSS否定伪类:

在这里插入图片描述
例子:
p:not(.class){bg-c:yellow}

CSS样式的继承:

在这里插入图片描述
继承性可以参考w3c上元素的继承性

css选择器的优先级:

在这里插入图片描述
总结来说就是范围越小的优先级越高
越靠近元素的优先级越高
在这里插入图片描述
譬如11个类选择器加起来优先级上限为99 不会超过id选择器
在这里插入图片描述
!important是最高级别的,但不推荐使用

css伪类的顺序:

在这里插入图片描述
按照这个顺序写,不然会出错。
简单记忆就是 love hate(lvha)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值