【css基础】css选择器常见用法总结

css选择器

1 css类型：

1. 行内样式

   <div style="color:green">行内样式</div>

2. 内部样式

   写在style标签中，嵌套在html页面里

   <style>

   ​ body{

   ​ color: green;

   ​ font-size: 54px;

   ​ }

   </style>

3. 外部样式

   1 创建一个css文件

   2 使用link标签引入css文件

   <link rel="stylesheet" href="[CSS⽂件路径]">

2 样式优先级

行内样式>内部样式>外部样式

3 选择器种类

1. 类选择器：

   . 类名{

   ​ 属性1：属性值1；

   ​ 属性2：属性值2；

   }

   <p class="类名"></p>

2. 标签选择器

   标签名{

   ​ 属性1：属性值1；

   ​ 属性2：属性值2；

   }

3. id选择器

   #id名{

   ​ 属性1：属性值1；

   ​ 属性2：属性值2；

   }

   <p id="id名"></p>

4. 通用选择器

   *{

   属性1：属性值1；

   ​ 属性2：属性值2；

   }

4 选择器小结：

选择器	作用	特点	使用情况
标签选择器	能选出所有相同标签	不能差异化选择	较多
类选择器	能选出⼀个或多个标签	根据需求选择, 最灵活, 最常⽤.	非常多
id 选择器	能选出⼀个标签	同⼀个 id 在⼀个 HTML 中只能 出现⼀次	不推荐
通配符选择器	选择所有标签	特殊情况下使⽤	不推荐

5 css 复合选择器

1. 包含选择器

   h2 span{

   }

   父 子 仅对子生效

2. 组合选择器

   h2, span{

   }

   所有选择器都可执行 不用再写一遍

3. 父子选择器

   h2>span{

   }

   父 子仅对包含在内的子生效

4. 相邻选择器

   h2+span{

   }

   选择器1 选择器2 仅对与第一个选择器1相邻的选择器2生效（对比父子选择器的 仅对选择器1包含在内的选择器2生效）

5. 属性选择器

   1 a[herf]{

   }

   2 p[class=""]{

   }

6. 交集选择器

   p.class{ }

   <p class="class"></P>

7. 伪类选择器

   用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。

   链接伪类，是利用交集选择器.

   • a:link 未访问的链接
   • a:visited 已访问的链接
   • a:hover 鼠标移动到链接上
   • a:active 选定的链接

   实际工作中，很少写全四个状态，一般写法如下：

   a {   /* a是标签选择器  所有的链接 */
      font-weight: 700;
      font-size: 16px;
      color: gray;
         text-decoration: none; /* 清除链接默认的下划线*/
   }
   a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
      color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
   }
   

6 复合选择器小结

选择器	作用	特征	使用情况	隔开符号及用法
包含选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
父子选择器	选择 最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
组合选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法