css选择器

⭐️⭐️⭐️    作者：船长在船上
 主页：来访地址船长在船上的博客
 简介：CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习

  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。

目录

1. 基本CSS选择器

通配选择器（Universal selector）

元素选择器（Type selector）

类选择器（Class selector）

ID选择器（ID selector）

属性选择器（Attribute selector）

2. 复合选择器

交集选择器

并集选择器（选择器分组）

3. 关系选择器

子元素选择器（Child combinator）

后代元素选择器（Descendant combinator） 

兄弟元素选择器（Sibling combinator）

---

1. 基本CSS选择器

通配选择器（Universal selector）

作用：选中页面中的所有元素

* {
    color: red;
}

元素选择器（Type selector）

也叫类型选择器、标签选择器

• 作用：根据标签名来选中指定的元素
• 语法：elementName{}

p{
    color: red; 
}

h1{
    color: green;
}

类选择器（Class selector）

• 作用：根据元素的class属性值选中一组元素
• 语法：.classname

.blue {
    color: blue;
}
.size {
    font-size: 20px;
}

class是一个标签的属性，它和id类似，不同的是class

• 可以重复使用
• 可通过class属性来为元素分组，
• 可以同时为一个元素指定多个class属性

 类选择器（Class selector）

ID选择器（ID selector）

• 作用：根据元素的id属性值选中一个元素
• 语法：#idname{}

#red{
    color: red;
}

优先级：id > class > 标签

属性选择器（Attribute selector）

作用：根据元素的属性值选中一组元素

 语法：

• [属性名]选择含有指定属性的元素
• [属性名=属性值]选择含有指定属性和属性值的元素
• [属性名^=属性值]选择属性值以指定值开头的元素
• [属性名$=属性值]选择属性值以指定值结尾的元素
• [属性名*=属性值] 选择属性值中含有某值的元素

p[title] {
    color: orange;
}
p[title=e] {
    color: orange;
}
p[title^=e] {
    color: orange;
}
p[title$=e] {
    color: orange;
}
p[title*=e] {
    color: orange;
}

2. 复合选择器

交集选择器

• 作用：选中同时复合多个条件的元素
• 语法：选择器1选择器2…选择器n { }
• 交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red {
    font-size: 30px;
}

.a.b.c {
    color: blue;
}

交集选择器

并集选择器（选择器分组）

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1,选择器2,…选择器n { }

h1,span {
    color: green;
}

3. 关系选择器

父元素：直接包含子元素的元素叫做父元素

子元素：直接被父元素包含的元素是子元素

祖先元素：直接或间接包含后代元素的元素叫做祖先元素；父元素也祖先元素

后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素

兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器（Child combinator）

• 语法：父元素 > 子元素 { }
• 作用：选中指定父元素的指定子元素

div.box > p > span{
    color: orange;
}

后代元素选择器（Descendant combinator） 

•  语法：祖先 后代 { }

div span{
    color: skyblue;
}

兄弟元素选择器（Sibling combinator）

• 作用：选择下一个兄弟
• 语法：

A1 + A2 { }相邻的兄弟选择器：找紧挨着的下一个兄弟元素

A1 ~ A3 { }通用兄弟选择器：后面所有兄弟元素

p + span{
    color: red;
}

p ~ span{
    color: red;
}

CSS语法_船长在船上的博客-CSDN博客

https://blog.csdn.net/SmartJunTao/article/details/126537192https://blog.csdn.net/SmartJunTao/article/details/126537192

  欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。