0
点赞
收藏
分享

微信扫一扫

c语言题目

快乐小码农 2024-05-04 阅读 11

复合选择器

 1.后代选择器

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

语法:

父级 子级(顺延写下来就可以了)

<!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.子代选择器

语法:父级 > 子级 

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

3.并集选择器

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

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

4.交集选择器

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

 5.伪类选择器

 

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

<!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>

CSS特性 

1.继承性

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

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

2.层叠性

相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加:不同的 CSS 属性都生效

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

3.优先级

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

背景属性

背景图:

<!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()引入背景图片,但是我们很快就会发现如果图片太大,那么我们只能看到很小一部分,该怎么解决呢?

平铺

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

背景定位 

背景图缩放 

background-size:cover/contain

背景图固定 

background-attachment: fixed; 

显示模式 

display:block/inline/inline-block

举报

相关推荐

C语言题目

C语言 题目

C语言题目2

C语言循环题目

C语言经典题目(三)

【C语言】经典题目(二)

C语言题目记录2

0 条评论