1. CSS语法:
格式:
选择器 {
属性名1 : 属性值1 ;
属性名2 : 属性值2 ;
...
}
选择器:筛选具有相似特征的元素
注意:
每一对属性需要使用 ;隔开,最后一对属性可以不加;
2. 选择器:筛选具有相似特征的元素
分类:
1. 基础选择器
1. id 选择器:选择具体的 id属性值 的元素
语法:# id属性值 { }
建议在一个html页面中id值唯一:
2. 元素选择器:选择具有 相同标签名称 的元素
语法:标签名称 { }
注意:id选择器优先级高于元素选择器
3. 类选择器:选择具有相同的 class属性值 的元素
语法:.class属性值{ }
注意:类选择器优先级高于元素选择器
类选择器优先级高于元素选择器:
2. 扩展选择器
1. 选择所有元素:(任意元素都被选中)
语法:*{ }
2. 并集选择器:
语法:选择器1,选择器2{ }
3. 后代选择器:筛选选择器1元素下所有选择器2元素(包括孙类)
语法:选择器1 选择器2{ }
4. 子选择器:只是选择直接子类(一代子类),二代以上是不包含的
语法:选择器1 > 选择器2 { }
5. 属性选择器:选择元素名称,属性名=属性值的元素
语法:元素名称[ 属性名= "属性值"]{ }
6. 伪类选择器:选择一些 元素具有的状态
语法:元素:状态{ }
如:<a>
状态:
link:初始化的状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮状态
CSS 中有4种不同的组合器:
-
后代选择器 (空格)
-
子选择器 (
>
) -
相邻兄弟选择器 (
+
) -
通用兄弟选择器 (~)
后代选择器 空格
后代选择器匹配属于 指定元素后代的所有元素。
子选择器 >
子选择器匹配属于 指定元素子元素的所有元素。
相邻兄弟选择器 +
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”。
通用兄弟选择器 ~
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。