-
css初学之css基础用法及选择器（二）
2.css基础语法
一、css基础语法
css主要是两部分组成：选择器 声明块
要为元素设置某种样式，前提是照到、选中这个元素，然后才能对其设置样式属性
例如：
选择器{
样式属性
key:value;
key:value;
key:value;
}
二、选择器
①基础选择器
基础选择器分为四大类：
-元素选择器 通过元素的名字去选择对应的元素 如：div span p
-id选择器 语法 #id值 每一个元素都具备id属性 id值是惟一的
-类选择器 语法 .类名 每一个元素都具备class属性 类名是可重复的
-通配符选择器 语法： * 选中页面中所有的元素
②复合选择器
复合选择器：是由两个或多个基础选择器组成
复合选择器分为两种类型：
交集选择器： 选择器1选择器2选择器3
被选中的元素要满足所有的选择器条件，才会被选中
并集选择器：选择器1，选择器2，选择器3
被选中的元素只需要满足其中一个选择器条件就会被选中
③关系选择器
html元素与元素之前存在哪些关系
-父子关系
-祖先后代关系
-兄弟关系
各元素含义：
父元素：直接含有被嵌套元素的元素，可以称作为父元素
子元素：被父元素包裹的元素，可以称作为子元素，子元素也是特殊的后代元素
兄弟元素：拥有同一个父元素的元素，可以称作为兄弟元素
祖先元素：间接包含着后代的元素称为祖先元素
后代元素：被某个元素间接包裹的，称为该元素的后代元素
子代选择器：选择器1>选择器2
后代选择器：选择器1 选择器2
兄弟选择器：
-选择器1+选择器2 选中选择器1后的第一个兄弟
-选择器1~选择器2 选中选择器1后的所有兄弟
④属性选择器
title属性 全局属性 额外对该元素的描述信息
属性选择器语法：
[属性名] 只要拥有该属性的元素都会被选中
[属性名=值] 拥有该属性并且值是一样的
[属性名^=值] 拥有该属性并且值是以某些字段开头的
[属性名$=值] 拥有该属性并且值是以某些字段结尾
[属性名*=值] 拥有该属性并且包含特定的字符
⑤伪类选择器
伪类：不存在的类，假的
在css中可以将伪类分为两种：
- 结构型伪类 （html元素结构有关）
- 动态伪类（用户交互有关）
伪类选择器的语法： :伪类名
注意：通常情况下，伪类选择器不会单独使用会和其他选择器配合使用，因为这样没意义
常见的结构伪类：
- first-child 父元素下的第一个子元素
- last-child 父元素下的最后一个子元素
- nth-child 父元素下任意的顺序子元素
注意:以上三个伪类，顺序的排列不是某个类型之间的排列，是将父元素下的所有不同类型的子元素进行排列的
:first-of-type
:last-of-type
:nth-of-type()
这三个伪类就是在同类型之间进行排序
三、代码及效果
(1)基础选择器
①元素选择器
代码：
效果：
②id选择器
代码：
效果：
③类选择器
代码：
效果：
④通配符选择器
代码：
效果：
(2)复合选择器
①交集选择器
代码：
效果：
②并集选择器
代码：
效果：
③关系选择器
子代选择器：
选择器代码： .span1>div>div>q{
color: aqua;
}
html代码：
效果：
后代选择器：
选择器代码：
.span1 div q{
color: red;
}
html代码：
效果：
兄弟选择器：
选择器代码： #xx+li{
color: red;
}
html代码：
效果：
④属性选择器
选择器代码：
[title]{
color: red;
}
html代码：
效果：
⑤伪类选择器
代码：
效果：
-
相关阅读:
2022 蔚来杯 牛客多校 后缀自动机(SAM) 马拉车(Manacher)
R-YOLOv7-tiny检测浸水玉米胚乳裂纹
程序员的职业发展出路有哪些？
操作系统备考学习 day10
SwiftUI 状态管理系统指南
76-SpringSecurity介绍
【正厚软件】0基础学IT，来Linux的发展历史吧
java毕业设计电视设备租借系统Mybatis+系统+数据库+调试部署
小张的秋招面经（持续更新版）
目标识别项目实战：基于Yolov7-LPRNet的动态车牌目标识别算法模型
- 原文地址：https://blog.csdn.net/weixin_45654230/article/details/125817305