HTML的基本选择器

基本选择器

1 标签选择器：选择一类标签  ：标签{}

2 类选择器class：选择所有class一致的标签  ：.类名{}

3 id选择器：全局唯一  ：#id名{}

其他选择器

4 属性选择器：根据元素的属性选择元素 ： 元素[属性] {}

5 子元素选择器： 根据元素的父级关系来选择元素

6 后代元素选择器： 根据元素的祖先关系来选择元素

7 相邻兄弟选择器： 根据元素在同一级中的位置来选择元素

8 通用兄弟选择器： 根据元素在同一层级中的位置来选择元素

9 伪类选择器： 可以为一些特殊状态下的元素添加样式。通常以冒号开头

10 群组选择器： 在CSS中选择多个元素并为他们应用相同样式规则

11 通配符选择器： 用*表示，可以匹配HTML文档中的所有元素

                1· 标签选择器样式 
                h1{ 
                   width: 200px;
                   height: 200px; 
                   background-color: pink; 
                } 
                 2·类选择器样式 
                .class{ 
                       width: 300px; 
                       height: 300px; 
                       background-color: skyblue; } 
                3· id选择器样式 
                #id{ 
                    width: 400px;
                    height: 400px;
                    background-color: red;
                } 
                4.属性选择器
                img[title] {
                   border-color:red ;
                }
                5.子元素选择器
                div > p {
                   font-size: 20px;
                }
                6.后代元素选择器
                div p {
                   font-size: 30px;
                }
                7.相邻兄弟选择器
                .box + * {
                   background-color: red ;
                }
                8.通用兄弟选择器
                .box ~ * {
                   font-size: 30px;
                }
                9.伪类选择器
                - :hover: 鼠标悬停在元素上时触发
                - :nth-child: 匹配某个父元素对的第n个子元素
                10.群组选择器
                selector1,selector2,selector3 {
                   property1: value1;
                   property2: value2;
                }
                11.通配符选择器
                * {
                  margin : 0;
                  padding : 0;
                  }

id选择器 > 类选择器，伪类选择器 > 元素选择器