CSS学习笔记2——高级选择器

本文详细介绍了CSS中的层次选择器、后代选择器、子选择器、兄弟选择器和通用选择器,以及属性选择器的使用方法。通过实例展示了如何精准定位和样式化网页元素,包括后代元素、直接子元素、紧跟兄弟元素以及具有特定属性的元素。这些选择器的运用,对于网页样式控制至关重要。
摘要由CSDN通过智能技术生成

层次选择器

后代选择器
body p{
    background: red;
}

body后的p标签全部选中

子选择器
body>p{
    backgorund: yellow;
}

body后一代的p全部选中

弟弟选择器
.ID + p{
    background: blue;
}

id为ID的标签的下面首个p标签被选中

通用选择器
.ID ~ p{
    background: green;
}

id为ID的标签的下面所有p标签被选中

属性选择器

选择存在某属性的元素
a[id]{
    background: orange;
}
选择某属性为某值的元素
a[id="ID"]{
    background: cyan;
}
选择某属性包含含某值的元素
a[class*="CLASS"]{
    background: brown;
}
选择某属性以某值开头的元素
a[href^="https"]{
    background: pink;
}
选择某属性以某值结尾的元素
a[[href$="jpg"]{
    background: black;
}

所以说这不就是正则吗?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值