【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 选择器小结：

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 复合选择器小结