选择器（一）-CSDN博客

本文链接：https://blog.csdn.net/ylycrp/article/details/129876211

本文介绍了CSS中的各种选择器，包括元素选择器、ID选择器、类选择器、通配选择器、复合选择器（交集和并集）、关系选择器（子元素、后代、兄弟等）以及属性选择器的用法和示例，展示了如何精确地选取和操作网页元素。

摘要由CSDN通过智能技术生成

单个的选择器
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{ } h1{ } div{ }
粒度太粗，会同时选择文档中的多个标签

id选择器
作用：根据元素的id属性值选择一个元素
语法：#id属性值{ }
例子：#box{ } #red{ }
注意：id名具有唯一值，不能重复使用
id选择器一般配合javascript一起使用

类选择器
作用：根据元素的class属性值选择一组元素
语法：.class属性值{ }
例子：.box{ } .red{ }

一般class属性用的多,id用的少
可以同时为一个元素指定多个class
<h1 class="blue abc"> 多个class之间使用空格隔开

通配选择器
作用：选中页面中的所有元素
语法：*{ }

复合选择器
1，交集选择器
1.将class为red的div字体大小设置为30px
同时要满足两个条件
div.red{
}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

2，并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{ }
例：#b1,.p1,h1,span,div,.red{ }

关系选择器
父元素，子元素，祖先元素，后代元素，兄弟元素

子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素
例：div>span
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先后代
例： div span{ }
选择下一个兄弟元素
语法：前一个+下一个
例：p+span{ }
选择下边所有的兄弟
语法：兄~弟

属性选择器
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性值$=属性值]选择属性值以指定值结尾的元素
[属性值*=属性值]选择属性值中含有某值的元素的元素
例：p[title]{ }
p[title=abc]{ }
   p[title^=abc]{ }
   p[title$=abc]{ }
   p[title*=abc]{ }

<body>
少小离家老大回
乡音无改鬓毛衰
儿童相见不相识
笑问客从何处来