前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性

淩亂°似流年 2022-11-06 15:53 75阅读 0赞

### css样式表/层叠样式表（2） ###

*  （1）css复合选择器
 *   *  后代选择器
     *  子元素选择器
     *  交集选择器（不常用）
     *  并集选择器
     *  链接伪类选择器
 *  （2）标签的显示模式
 *   *  块级元素block-level
     *  行内元素inline-level
     *  行内块元素inline-block
     *  标签显示模式转换
 *  （3）单行文本垂直居中
 *  （4）css背景
 *  （5）css三大特性
 *   *  权重计算公式
     *  权重叠加

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]

# （1）css复合选择器 #

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

## 后代选择器 ##

**概念**  
后代选择器又称为包含选择器

**作用**  
用来选择元素或元素组的**子孙后代**  
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔

语法

.class h3 { 
        color:red;
        font-size:16px;
    }

![在这里插入图片描述][20210310133730670.png]

## 子元素选择器 ##

**作用**  
子元素选择器只能选择作为某元素子元素(亲儿子)的元素

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 `>`进行连接

语法

.class>h3 { 
        color:red;
        font-size:14px;
    }

![在这里插入图片描述][20210310155431887.png]

## 交集选择器（不常用） ##

**条件**  
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点  
![在这里插入图片描述][20210310155559354.png]  
交际选择器 是并且的意思。即…又…的意思

p.one是类名为 one的 段落标签

## 并集选择器 ##

![在这里插入图片描述][20210310155730246.png]

比如 .one, p , #test { color: #F00;}  
    表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
    通常用于集体声明

## 链接伪类选择器 ##

类选择器是一个点

.demo { }

伪类选择器用2个点（冒号）

:link { }

**作用**  
用于向某些选择器添加特殊的效果

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

**顺序【lvha】不要颠倒！！！**

a链接具有默认样式，需要给链接单独指定样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]

# （2）标签的显示模式 #

**标签的分类**  
html标签一般分为**块标签**和**行内标签**（块元素和行内元素）

<table> 
 <thead> 
  <tr> 
   <th>元素模式</th> 
   <th>元素排列</th> 
   <th>设置样式</th> 
   <th>默认宽度</th> 
   <th>包含</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>块级元素</td> 
   <td>一行只能放一个块级元素</td> 
   <td>可以设置宽度高度</td> 
   <td>容器的100%</td> 
   <td>容器级可以包含任何标签</td> 
  </tr> 
  <tr> 
   <td>行内元素</td> 
   <td>一行可以放多个行内元素</td> 
   <td>不可以直接设置宽度高度</td> 
   <td>它本身内容的宽度</td> 
   <td>容纳文本或则其他行内元素</td> 
  </tr> 
  <tr> 
   <td>行内块元素</td> 
   <td>一行放多个行内块元素</td> 
   <td>可以设置宽度和高度</td> 
   <td>它本身内容的宽度</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 块级元素block-level ##

常见的块元素有`<h1>~<h6>`、`<p>`、`<div>`、`<ul>`、`<ol>`、`<li>`等，其中`<div>`标签是最典型的块元素

**块级元素的特点**  
（1）独占一行  
（2）高度，宽度、外边距以及内边距都可以控制  
（3）宽度默认是容器（父级宽度）的100%  
（4）是一个容器及盒子，里面可以放**行内**或者**块级**元素

**注意：**

*  只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
 *  同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素

## 行内元素inline-level ##

常见的行内元素有`<a>`、`<strong>`、`<b>`、`<em>`、`<i>`、`<del>`、`<s>`、`<ins>`、`<u>`、`<span>`等，其中`<span>`标签最典型的行内元素。有的地方也成内联元素

**行内元素的特点**  
（1）相邻行内元素在一行上，一行可以显示多个  
（2）**高、宽直接设置是无效的**  
（3）默认宽度就是它本身内容的宽度。  
（4）行内元素**只能容纳文本**或则**其他行内元素**

**注意：**

*  链接里面不能再放链接
 *  特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全

## 行内块元素inline-block ##

在行内元素中有几个特殊的标签——`<img />`、`<input />`、`<td>`，可以对它们设置**宽高**和对齐属性，有些资料可能会称它们为行内块元素

**行内块元素的特点**  
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个  
（2）默认宽度就是它本身内容的宽度  
（3）**高度**，**行高**、**外边距**以及**内边距**都可以控制

## 标签显示模式转换 ##

`块` \--> `行内`

display: inline;

`行内` \--> `块`

display: block;

`块`、`行内元素` \-->`行内块`

display: inline-block;

<div>块级元素</div> <div>块级元素</div> <span>行内元素</span> <span>行内元素</span> <a href="#">百度</a> <a href="#">新浪</a> span { 
      /* 行内-->块 */
      display: block;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
    div { 
      /* 块-->行内 */
      display: inline;
      width: 200px;
      height: 200px;
      background-color: orange;
    }
    a { 
      /* 行内，块-->行内块 */
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: red;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]

# （3）单行文本垂直居中 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]**文字的行高等于盒子的高度**

行高 = 上距离 + 内容高度 + 下距离

**行高和高度的三种关系**

1.  行高 = 高度 文字会 垂直居中
2.  如果行高 > 高度 文字会 偏下
3.  如果行高 < 高度 文字会 偏上

<a href="#">体育</a> <a href="#">娱乐</a> <a href="#">汽车</a> a { 
      /* 行内，块-->行内块 */
      display: inline-block;
      width: 100px;
      height: 30px;
      text-align: center;
      background-color: pink;
      text-decoration: none;
      color: #fff;
      font-weight: 700;
      /* 行高==高度让单行文字垂直居中 */
      line-height: 30px;
    }
    a:hover { 
      background-color: red;
      color: yellow;
    }

![在这里插入图片描述][20210310161936290.png]

# （4）css背景 #

**背景颜色**

background-color: 颜色值; 默认transparent 透明的

**背景图片**

background-image: none | url(地址);

地址不要加**引号**

**背景平铺**

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>repeat</td> 
   <td>背景图像在纵向和横向上平铺（默认的）</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>背景图像不平铺</td> 
  </tr> 
  <tr> 
   <td>repeat-x</td> 
   <td>背景图像在横向上平铺</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>背景图像在纵向平铺</td> 
  </tr> 
 </tbody> 
</table>

**背景位置**

background-position : length || length
    background-position : position || position

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>百分数 / 由浮点数字和单位标识符组成的长度值</td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>top / center / bottom / left / center / right 方位名词</td> 
  </tr> 
 </tbody> 
</table>

**注意：**  
（1）必须先指定`background-image`属性  
（2）`position` 后面是`x`，`y`坐标；可以使用方位名词 或 精确单位  
（3）若指定两个值都是方位名词，则前后顺序无关，效果一致  
（4）若只指定一个方位名词，另一个值**默认居中对齐**  
（5）若`position`后面是精确坐标，第一个为`x`，第二个为`y`  
（6）若指定一个精确坐标，则数值为`x`坐标，另一个默认垂直居中  
（7）若指定两个值为精确单位和方位名词混合使用，则第一个值为`x`坐标，第二个值为`y`坐标

**背景附着**  
背景是滚动/固定

background-attachment: fixed | scroll;

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scroll</td> 
   <td>背景图像是随对象内容滚动</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>背景图像固定</td> 
  </tr> 
 </tbody> 
</table>

**背景简写**  
无强制标准  
`background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;`

background: #fff url(image.jpg) repeat-y  scroll center top;

**背景透明**

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

（1）最后一个参数alpha 透明度 取值范围 0~1  
（2）可以省略0.3的0  
（3）盒子里面的内容不受影响

# （5）css三大特性 #

（1）层叠性  
**概念**  
多种CSS样式的叠加

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

**原则**

*  样式冲突，遵循的原则是**就近原则**
 *  样式不冲突，不会层叠

（2）继承性  
**概念**  
子标签会继承父标签的某些样式，如文本颜色和字号

想要设置一个可继承的属性，只需将它应用于父元素

子元素可以继承父元素的样式（**text-，font-，line-这些元素开头的可以继承，以及color属性**）

（3）优先级  
**概念**  
定义CSS样式时，经常出现两个或更多规则应用在同一元素上  
（1）选择器**相同**，则执行层叠性  
（2）选择器**不同**，就会出现优先级的问题

## 权重计算公式 ##

![在这里插入图片描述][20210310162956911.png]

<table> 
 <thead> 
  <tr> 
   <th>标签选择器</th> 
   <th>计算权重公式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>继承</strong>或者 <code>*</code></td> 
   <td>0,0,0,0</td> 
  </tr> 
  <tr> 
   <td>每个元素（<strong>标签选择器</strong>）</td> 
   <td>0,0,0,1</td> 
  </tr> 
  <tr> 
   <td>每个<strong>类</strong>，<strong>伪类</strong></td> 
   <td>0,0,1,0</td> 
  </tr> 
  <tr> 
   <td>每个<strong>ID</strong></td> 
   <td>0,1,0,0</td> 
  </tr> 
  <tr> 
   <td>每个<strong>行内样式</strong> style=""</td> 
   <td>1,0,0,0</td> 
  </tr> 
  <tr> 
   <td>每个!important 重要的（样式属性后面添加）</td> 
   <td>∞ 无穷大</td> 
  </tr> 
 </tbody> 
</table>

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越

## 权重叠加 ##

![在这里插入图片描述][20210310163411474.png]  
**注意**  
数位之间没有进制  
比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况

**继承的权重为0**  
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中  
（1）如果**选中了**，那么以上面的公式来计权重。谁大听谁的  
（2）如果**没有选中**，那么权重是0，因为继承的权重为0

<div class="demo"> <p>胡梓卓</p> </div> div { 
        color: red;
    }
    p { 
        color: green;
    }
    .demo { 
        color: blue;
    }

![在这里插入图片描述][20210310163840841.png]

/* 21 */
            .c1 .c2 div{   
                color: blue;
            }
            /* 101 */
            
            /* 101 */
            #box1 div {  
                color:yellow;
            }
            /* 就近原则 */
            div #box3 {   
                color:green;
            }
        </style>
    </head>
    <body>
        <div id="box1" class="c1">
            <div id="box2" class="c2">
                <div id="box3" class="c3">
                    文字
                </div>
            </div>
        </div>
    </body>

![在这里插入图片描述][20210310163849401.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]: /images/20221023/ee56a7a7bec94dd7bb615cfc42882759.png
[20210310133730670.png]: /images/20221023/48ffa895e39e40f0bd963824dd0e3032.png
[20210310155431887.png]: /images/20221023/b2c22f70f0e74305aeffc9959cd6c12e.png
[20210310155559354.png]: /images/20221023/ad474210e4c448989b84a412cbca3be5.png
[20210310155730246.png]: /images/20221023/e9bc979ae4d04acbacc7fb4d69e1acbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]: /images/20221023/1a6ccab18f244c73bd795b917b6febb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]: /images/20221023/4c8450430dc741af97785ce3a23067ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]: /images/20221023/b6c634a16b2e4062a974c9309aa39adb.png
[20210310161936290.png]: /images/20221023/128e49ec483c49f98567655f2fae437a.png
[20210310162956911.png]: /images/20221023/cdea877a15934deeb339120d5315501b.png
[20210310163411474.png]: /images/20221023/ce9255f579484df9b242a02cfe723f1c.png
[20210310163840841.png]: /images/20221023/329b054c463b40e3bad00e35bc2478fd.png
[20210310163849401.png]: /images/20221023/d86ae578856b430688bae7f20908fc05.png