2024年C C++最新CSS个人学习笔记（day 4）_后代选择如何悬停(1)，2024年最新2024C C++春招

最新推荐文章于 2024-08-07 17:33:57 发布

2401_84978573

最新推荐文章于 2024-08-07 17:33:57 发布

阅读量812

点赞数 30

分类专栏：程序员文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84978573/article/details/138779718

版权

程序员专栏收录该内容

39 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

```

示例：

注意点：

子代之包含：儿子
子代选择器中,选择器与选择器之前通过 > 隔开

6.1.3 选择器进阶- 并集选择器

并集选择器：,

**作用：**同时选择多组标签,设置相同的样式

**选择器语法：**选择器1 , 选择器2 {css}

结果：

找到选择器1 和选择器2 选中的标签,设置样式

 <style>
      /* p div span h1 文字颜色是红色 */
      /* 选择器1, 选择器2 {} */
      p,
      div,
      span,
      h1 {
          color: red;
      }
  </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
</body>

示例：

注意点：

并集选择器中的每组选择器之间通过,分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个,提高代码的可读性

6.1.4 选择器进阶- 交集选择器

交集选择器：紧挨着

**作用：**选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2 {css}

结果：

(即又原则) 找到页面中既能被选择器1选中, 又能被选择器2选中的标签,设置样式

<title>Document</title>
    <style>
      /* 必须是p标签,而且添加了box类 */
      p.box {
          color: red;
      }
    </style>
</head>
<body>
    <!-- 找到第一个p, 带box类的,设置文字颜色是红色-->
    <p class="box">这是p标签：box</p>
    <div class="box">这是div标签:box</div>
</body>

示例：

注意点：

交集选择器中的选择器之间是紧挨着的,没有东西分隔
交集选择器中如果有标签选择器,标签选择器必须写在最前面

6.1.5 选择器进阶- 伪类选择器

伪类选择器: :hover

**作用：**选中鼠标悬停在元素上的状态, 设置样式

选择器语法：选择器:hover {css}

 <style>
       /* 悬停的时候文字颜色是红色*/
       a:hover {
           color: red;
           background-color: green;
       }
</style>

示例：

注意点：

伪类选择器选中的元素的某种状态

6.1.6 选择器进阶- Emmet语法

**作用：**通过简写语法、快速生成代码

   记忆             示例                         效果
  标签名             div                      <div><div>
 类选择器           .red                <div class="red"></div>
 id选择器           #one                <div id="one"></div>
交集选择器         p.red#one           <p class="red" id="one"></p>
子代选择器          ul>li                 <ul><li></li></ul>
 内部文本      ul>li{我是li的内容}    <ul><li>我是li的内容</li></ul>
 创建多个          ul>li*3         <ul><li></li><li></li><li></li></ul>
 div+同级          div+p                 <div></div><p></p>
 div+父级          div>p                 <div><p></p></div>

<!-- ul里面有3个li,li里面有文字1,2,3 
     ul>li{$}*3
-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

七、背景相关属性

7.1.1 背景- 背景色

属性名：background-color (bgc)

属性值：

颜色取值：关键字、rgb表示法、rgba表示法、十六进制…

<style>
      div {
           width: 400px;
           height: 400px;
           /* background-color: pink; */
           background-color: #ccc;

           /* 红绿蓝三颜色,a是透明度0-1 */
           /* 下面两种写透明度方法都可以 */
           /* background-color: rgba(0,0,0,0.5); */
           background-color: rgba(0,0,0,.5);
       }
</style>

注意点：

背景颜色默认值是透明：rgba(0,0,0,0)、transparent是全透明黑色(black)的速记法
背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色

7.1.2 背景- 背景图片

属性名：background-image(bgi)

**属性值：**background-image: url( ‘图片的路径’ );

<style>
     div {
          width: 1152px;
          height: 720px;
          background-color: pink;
          background-image: url(./images/1.jpeg);
      }
</style>

注意点：

背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色, 是不能撑开盒子的

7.1.3 背景- 背景平铺

属性名：background-repeat (bgr)

属性值：

取值效果

repeat (默认值) 水平和垂直方向都平铺

no-repeat 不平铺

repeat-x 沿着水平方向 (x轴)平铺

repeat-y 沿着垂直方向 (y轴)平铺

<style>
      div {
          width: 1152px;
          height: 720px;
          background-color: pink;
          background-image: url(./images/1.jpeg);
            
          background-repeat:repeat; 默认值 
            
          /*不平铺: 图片只显示一个 工作中最常用  */
          /* background-repeat:no-repeat; */

          /* background-repeat: repeat-x; */
          /* background-repeat: repeat-y; */
        }
</style>

7.1.4 背景- 背景位置

背景位置：background-postion (bgp)

**属性值：**background-position：水平方向位置垂直方向位置;

取坐标系正数: 向右向下移动; 负数向左向上移动

<style>
        div {
            width: 1152px;
            height: 720px;
            background-color: pink;
            background-image: url(./images/1.jpeg);
            background-repeat: no-repeat;


![img](https://img-blog.csdnimg.cn/img_convert/5d16604e0360cb4b3081627bc5b4626b.png)
![img](https://img-blog.csdnimg.cn/img_convert/fb5f273407f4d99b72efd54650a164be.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

repeat: no-repeat;


[外链图片转存中...(img-f4KnoK8p-1715548246348)]
[外链图片转存中...(img-38IQ76Kw-1715548246348)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84978573

关注

30
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
2024年C C++最新CSS个人学习笔记（day 4）_后代选择如何悬停(1)，2024年最新2024C C++春招

``**作用：**同时选择多组标签,设置相同的样式**选择器语法：**找到选择器1 和选择器2 选中的标签,设置样式**作用：**选中页面中同时满足多个选择器的标签(即又原则) 找到页面中能被选择器1选中,能被选择器2选中的标签,设置样式**作用：**选中鼠标悬停在元素上的状态, 设置样式。
复制链接

扫一扫