复合选择器

BBigSun 评论31阅读模式

复合选择器

定义: 由两个或者多个基础选择器,通过同的方式组合而成

作用:更准确、更高效的选择目标元素文章源自十年又十年-https://www.bbigsun.com/892.html

后代选择器

作用:选择某元素的所有后代元素文章源自十年又十年-https://www.bbigsun.com/892.html

写法:父选择器 子选择器 {CSS属性} ,父子选择器之间用空格隔开文章源自十年又十年-https://www.bbigsun.com/892.html

div span {
    color: red;
}

子代选择器

作用: 选中某元素的子代元素(最近的子级)文章源自十年又十年-https://www.bbigsun.com/892.html

写法:父选择器 > 子选择器 {CSS属性}, 父子选择器之间用 > 隔开文章源自十年又十年-https://www.bbigsun.com/892.html

div > span {
    color: red;
}

交集选择器

作用:选中同时满足多个条件的元素文章源自十年又十年-https://www.bbigsun.com/892.html

写法:选择器1选择器2 {CSS属性},选择器之间连写,没有任何符号文章源自十年又十年-https://www.bbigsun.com/892.html

p.box {
    color: red;
}

#big-box.small-box{
    color: red;
}

如果有标签选择器,先写标签选择器文章源自十年又十年-https://www.bbigsun.com/892.html 文章源自十年又十年-https://www.bbigsun.com/892.html

纸上得来终觉浅,绝知此事要躬行。

weinxin
17688689121
我的微信
微信扫一扫
BBigSun
  • 本文由 BBigSun 发表于 2024年 5月 19日 19:03:10
  • 转载请务必保留本文链接:https://www.bbigsun.com/892.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定