CSS进阶 - 技术栈

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

1.后代选择器

用来选择某元素的后代的选择器

语法：

父级子级（顺延写下来就可以了）

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father {
        background-color: beige;
        height: 200px;
        width: 200px;

    }

    .father p {
        color: blueviolet;
    }
</style>

<body>
    <div class="father">
        <p>子元素</p>
    </div>
</body>

</html>

2.子代选择器

定义：选中某元素的子代元素

语法：父级 > 子级

html 复制代码

<style>
 div > span {
  color: red;
 }
</style>
<div>
 <span>这是 div 里面的 span</span>
 <p>
  <span>这是 div 里面的 p 里面的 span</span>
 </p>
</div>

3.并集选择器

并集选择器：选中多组标签设置相同的样式。

语法：把需要应用样式的元素用逗号隔开

html 复制代码

<style>
 div,
 p,
 span {
  color: red;
 }
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

4.交集选择器

交集选择器：选出满足多个筛选条件的元素的选择器

如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

html 复制代码

<style>
 p.box {
 color: red;
}
</style>
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

5.伪类选择器

给样式应用上伪类选择器，则会在某些条件下启动样式，比如hover，当我们应用上这个伪类选择器，当光标移到元素上时，元素会启动样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father:hover {
        background-color: rgb(244, 244, 22);
        height: 200px;
        width: 200px;

    }

    .father {
        background-color: blueviolet;
        height: 200px;
        width: 200px;
    }
</style>

<body>
    <div class="father">
        <p>子元素</p>
    </div>
</body>

</html>

当我们把光标移到div上，div会从blueviolet颜色变成黄色。

CSS特性

1.继承性

继承性：子级默认继承父级的文字控制属性。

当我们给父级元素一个样式，如果它的后代元素没有特别地应用样式，那么它就会继承它父级的样式。

2.层叠性

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性

不同的属性会叠加：不同的 CSS 属性都生效

这个特性很有用，可以用于后期修改别人的控件的样式，也可以在不用找样式位置的情况下快速添加样式。

3.优先级

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

背景属性

背景图：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father {
        background-image: url();
    }
</style>

<body>
    <div class="father">
        <p>子元素</p>

    </div>
</body>

</html>

background-image:url()引入背景图片，但是我们很快就会发现如果图片太大，那么我们只能看到很小一部分，该怎么解决呢？

平铺

html 复制代码

.image{
background: url(../../static/images/ai1.jpg) top center;
background-size: cover;
}

上述代码可以把背景图片平铺

背景定位

背景图缩放

background-size:cover/contain

● cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

● contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白

背景图固定

background-attachment: fixed;

显示模式

display:block/inline/inline-block

block:

● 独占一行

● 宽度默认是父级的100%

● 添加宽高属性生效
inline-block:

● 一行可以显示多个

● 设置宽高属性生效

● 宽高尺寸也可以由内容撑开
inline:

● 一行可以显示多个

● 设置宽高属性不生效

● 宽高尺寸由内容撑开