CSS几类选择器总结
2021-03-07 15:28
标签：https png one onclick 技术 分组 hid 常用 注意 MDN Web docs https://developer.mozilla.org/zh-CN/docs/Web/CSS 一、常用选择器 二、复合选择器 三、关系选择器 四、属性选择器 CSS几类选择器总结 标签：https png one onclick 技术 分组 hid 常用 注意 原文地址：https://www.cnblogs.com/L-Memory/p/12885335.html/*
1、元素选择器
作用：根据标签名来选中指定元素
语法：标签名：{}
例子 p{} h1{} div{}
*/
/*
2、id选择器
作用：根据元素id属性选择一个元素，不能重复使用
语法：#id属性值{}
例子： #abc{}
*/
/*
3、类选择器
作用：根据元素的class属性选中一组元素，可重复使用；可以同时给一个元素制定多个class，空格隔开。
语法：.class属性值{}
*/
/*
4、通配选择器
作用：选择页面中所有元素
语法：*{}
*/
/*
1、交集选择器
作用：选中同时符合多种条件的元素
语法：选择器1选择器2选择器3...{}
例子：.a.b.c{}
注意：交集选择其中如果有元素选择器，必须以它开头。如果有id选择器就不用符合。
*/
/*
2、并集选择器（选择器分组）
作用：同时选择多个选择其对应的元素。
语法：选择器1，选择器2，选择器3...{}
例子：h1,span{}
*/
div>
我是一个div。
p>
我是div里面的p元素。
span>我是p里面的span元素span>
p>
span>我是div的span元素。span>
span>我是div的span元素。span>
span>我是div的span元素。span>
div>
/*
2、后代元素选择器
作用：选指定元素的所有后代。
语法：祖先 后代
*/
div span{
color: green;
}
/*
3、兄弟元素选择器
选择下一个(紧挨着)兄弟
语法：前一个 + 下一个
选择下面所有相抵
语法：前一个 ~ 后一个
*/
p + span{
color:red;
}
p ~ span{
color: yellow;
}
p title="abc">我是一个粉刷匠p>
p title="abcdef">粉刷本领强p>
p title="hello">啦啦啦啦啦啦p>
p>我是卖报的小行家p>
/*
[属性名]选择含有指定属性的元素。
[属性名=属性值]选择含有指定属性和属性值的元素。
[属性名^=属性值]选择属性值以指定值开头的元素。
[属性名￥=属性值]选择属性值以指定值结尾的元素。
[属性名*=属性值]选择属性值中含有某值的元素。
*/
p[title]{
color: orange;
}
p[title=abc]{
color:green;
}
p[title^=abc]{
color: honeydew;
}
p[title*=e]{
color: hotpink;
}
上一篇：MacOS下Lucene学习
下一篇：其他系列 | NodeJs Could not install from "Files\nodejs\node_cache\_npx\31128" as it do