Javaweb的学习20_CSS的语法格式+选择器

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种不同的组合器：

• 后代选择器 (空格)

• 子选择器 (>)

• 相邻兄弟选择器 (+)

• 通用兄弟选择器 (~)

后代选择器   空格

后代选择器匹配属于  指定元素后代的所有元素。

子选择器    >

子选择器匹配属于  指定元素子元素的所有元素。

相邻兄弟选择器   +

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

通用兄弟选择器   ~

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。