前端基础-css复合选择器

Posted 2021-09-06 咖啡壶子

一.Emmet 语法

作用

快速生成html和css

用法

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $
7. 如果想要在生成的标签内部写内容可以用 { } 表示

二.复合选择器

复合选择器是建立在基础选择器之上，对 基本选择器进行组合形成的

分类

1. 后代选择器(选中的是最后一个选择器)
   ul li { 样式声明 }

2. 子选择器
   ul>li { 样式声明 }

3. 并集选择器
   ul,div { 样式声明 }

4. 伪类选择器
   ①用法：
   a:hover {
   color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
   }
   ②分类：

链接伪类选择器：
a:link 选择未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 鼠标指针移上去的链接
a:active 鼠标按下未弹起的链接

:focus 伪类选择器
input:focus { background-color:yellow; }

三.元素显示模式

含义

元素（标签）以什么方式进行显示

分类

1. 块级元素 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
   ① 独占一行。
   ② 高度，宽度、外边距以及内边距都可以控制。
   ③ 宽度默认是容器（父级宽度）的100%。
   ④ 是一个容器及盒子，里面可以放行内或者块级元素。
2. 行内元素（内联元素）：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
   ① 一行可以显示多个。
   ② 高、宽直接设置是无效的。
   ③ 默认宽度就是它本身内容的宽度。
   ④ 行内元素只能容纳文本或其他行内元素
3. 行内块元素：<img />、<input />、<td>
   ① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
   ② 默认宽度就是它本身内容的宽度（行内元素特点）。
   ③ 高度，宽度、外边距以及内边距都可以控制（块级元素特点）。

显示模式转换

1. 转换为块元素：display:block;
2. 转换为行内元素：display:inline;
3. 转换为行内块：display: inline-block;

四.css背景

背景颜色

background-color:颜色值

背景图片

background-image : url (url)

背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片位置

1. 用法：
   background-position: x y;

2. 值的分类
   ①方位词
   如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致；
   如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
   ②精确单位：
   如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标；
   如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
   ③混合单位
   如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景图像固定

background-attachment : scroll | fixed

复合写法

background: transparent url(image.jpg) repeat-y fixed left top ;

背景色半透明

background: rgba(0, 0, 0, 0.3);