HTML——复合选择器、CSS特性、背景属性、 显示模式

已于 2023-12-19 16:26:45 修改
阅读量229 收藏
点赞数 6
分类专栏： html 文章标签： html css 前端 学习
于 2023-11-18 20:16:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52874695/article/details/134481519
版权
本文详细介绍了CSS选择器的种类、CSS的三大特性（继承性、层叠性、优先级）、背景属性的使用以及元素的显示模式（块级、行内、行内块）。还通过实例展示了如何转换HTML元素的显示模式，如将``标签从行内转换为块级或行内块级元素。
摘要由CSDN通过智能技术生成

目录

css选择器：

css三大特性：

背景属性:

显示模式: 

转换显示模式:

css选择器：

          1.基本选择器：

            1.1 通配符选择器：*{}

            1.2 元素选择器：标签名{}

            1.3 类选择器：.类名{}

            1.4 id选择器：#id名{}

          2.复合选择器：

            2.1 后代选择器：选择器1 选择器2{}---中间间隔一个空格

            ----作用对象：离{}最近的选择2,

            ----选择器1的作用是：筛选，

            2.2 子代选择器：选择器1>选择器2{},中间间隔一个>

            2.3 并集选择器：选择器1,选择器2{},中间间隔一个,

            2.5 伪类选择器(了解)：选择器:伪类名{}

            :hover{}---鼠标悬停效果

标签代码:

    <span>span标签</span>
    <div>
      <span>这是 div 的儿子 span</span>
    </div>
    <div class="title">
      标题<a href="">百度<span>百科</span></a>
    </div>
    <div class="content1">
      <span>这是 div 里面的 span</span>
      <p>
        <span>这是 div 里面的 p 里面的 span</span>
      </p>
    </div>
    <div class="content2">
      <span>一个和尚</span>
      <p>两个和尚</p>
      <a href="">三个和尚</a>
    </div>
    <p class="box">p 标签，使用了类选择器 box</p>
    <a href="#">芒果</a>

样式代码:

    <style>
      * {
        font-size: 30px;
      }
      span {
        color: rgb(255, 0, 0);
      }
      div span {
        color: rgb(0, 162, 255);
      }
      .title {
        color: rgb(162, 0, 255);
      }
      .title a {
        color: rgb(0, 0, 0);
      }
      .title a span {
        color: rgb(255, 0, 0);
      }
      .content1 > span {
        color: rgb(51, 255, 0);
      }
      .content2 span,
      .content2 p,
      .content2 a {
        color: rgb(255, 0, 179);
      }
      p.box {
        color: rgb(255, 174, 174);
      }
      a:hover {
        color: rgb(195, 0, 255);
        text-decoration: none;
      }
    </style>

效果:

 小案例:

标签代码:

    <ul>
      <li><a href="">文旅部发布优化疫情防控最新安</a></li>
      <li><a href="">露营旅游休闲发展指导意见发布</a></li>
      <li><a href="">“中意面对面”系列活动启动</a></li>
      <li><a href="">#城市巡游记#正式启动</a></li>
    </ul>

样式代码:

    <style>
      li {
        color: rgb(255, 136, 0);
      }
      a {
        /* 去除下划线 */
        text-decoration: none;
      }
      a:hover {
        color: rgb(255, 136, 0);
        text-decoration: underline;
      }
    </style>

效果:

css三大特性：

            1.继承性---子标签会继承父标签的样式---只继承字体样式属性

            2.层叠性---当有多个样式作用于同一个标签时，会按照优先级进行覆盖

            3.优先级---

              3.1 选择优先级：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样                                    式 < !important

            3.2 写入方式的优先级：行内样式 > 内部样式 > 外部样式

                  就近原则：同一种写入方式，就近原则

标签代码:

    <div>
      盒子内容
      <h1>标题</h1>
      <span>标题1</span>
      <a href="">1234567</a>
    </div>
    <div id="content">内容</div>

样式代码:

    <style>
      div {
        color: rgb(255, 0, 0);
        font-size: 30px;
        /* width: 600px;
            height: 100px;(子级默认继承父级的文字控制属性) */
        /* 注意：如果标签有默认文字样式会继承失败。
           例如：a 标签的颜色、标题的字体大小。 */
      }
      div {
        /* 注意：如果标签有默认文字样式会继承失败。 */
        color: rgb(0, 110, 255);
        /* 不同的属性会叠加：不同的 CSS 属性都生效 */
        font-weight: bold;
      }
      /* div {
        color: rgb(0, 0, 0) !important;
      } */
      /* 优先级：
         规则：选择器优先级高的样式生效。
         公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important（选中标 
              签的范围越大，优先级越低） */
      #content {
        color: rgb(183, 0, 255);
      }
    </style>
    <link rel="stylesheet" href="./test.css" />

test.css代码:

#content {
  color: rgb(0, 247, 255);
}

效果;

背景属性:

        background-color:背景颜色

        background-image:背景图片

        background-repeat:背景图片是否重复

        background-position:背景图片位置

        background-attachment:背景图片是否随滚动条滚动

        background:背景属性的简写形式

        background-size:背景图片的大小

标签代码:

<div></div>

样式代码:

    <style>
      div {
        /* width: 1000px; */
        /* 背景属性的使用前提：当前盒子必须有一定的高度
        */
        height: 600px;
        background-color: lavenderblush;
        /* 不平铺 */
        background-repeat: no-repeat;
        /* 平铺 */
        /* background-repeat: repeat; */
        /* 水平方向平铺 */
        /* background-repeat: repeat-x; */
        /* 垂直方向平铺 */
        /* background-repeat: repeat-y; */
        background-image: url(./img/cat2.jpg);
        /* 图片居中 */
        background-position: center;
        /* 等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见 */
        /* background-size: cover; */
        /* 等比例缩放背景图片以完全装入背景区，可能背景区部分空白 */
        /* background-size: contain; */
        background-size: 200px;
        /* 背景不会随着元素的内容滚动(背景固定) */
        background-attachment: fixed;
      }
    </style>

效果:

小案例(头部列表):

标签代码:

    <div>
      <div class="title"><a href="">新闻</a></div>
      <div class="title"><a href="">视频</a></div>
      <div class="title"><a href="">军事</a></div>
      <div class="title"><a href="">体育</a></div>
      <div class="title"><a href="">NBA</a></div>
    </div>

样式代码:

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        padding: 0 20px;
        background-color: #1479d7;
        line-height: 100px;
        height: 100px;
      }
      a {
        font-size: 32px;
        color: rgb(255, 255, 255);
        text-decoration: none;
      }
      .title {
        width: 100px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }
      .title:hover {
        background-color: #808080;
      }
    </style>

效果:

显示模式: 

显示模式：标签（元素）的显示方式
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

        1.分类：

            块级元素---独占一行,可以设置宽高

            行内元素---不独占一行,不可以设置宽高

            行内块元素---不独占一行,可以设置宽高

标签代码:

    <!-- 块级元素：div,li等 -->
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <!-- 行内元素:span,a -->
    <span class="sp1">文本1</span>
    <span class="sp2">文本2</span>
    <span class="sp3">文本3</span>
    <!-- 行内块元素；img -->
    <img src="./img/小刘.jpg" alt="" width="150px" />
    <img src="./img/小刘.jpg" alt="" width="100px" />

样式代码;

    <style>
      div.box1 {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
      div.box2 {
        width: 100px;
        height: 100px;
        background-color: forestgreen;
      }
    </style>

效果:

转换显示模式:

    <style>

      a {

        width: 100px;

        height: 50px;

        background-color: forestgreen;

        /* 转换为块级 */

        display: block;

        /* 转换为行内(不独占一行，并且不可以设置高度) */

        /* display: inline; */

        /* 转换为行内块 */

        /* display: inline-block; */

      }

    </style>

  </head>

  <body>

    <div>

      <a href="" class="title1">标题1</a>

      <a href="" class="title2">标题2</a>

      <a href="" class="title3">标题3</a>

      <a href="" class="title4">标题4</a>

    </div>

  </body>

效果:

weixin_52874695
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML选择器
m0_63595186的博客
12-02 790
一、选择器 1、作用：选择页面上的元素 2、语法： 选择器{ 样式声明（和在标签内写养生的语法一致） } 二、选择器的具体语法 一）基础选择器 1、标签选择器/元素选择器 选择器就是标签的关键字 标签关键字{ 样式声明; } ...
前端开发基础之CSS选择器——复合选择器
weixin_52626489的博客
04-02 188
所使用的软件：Visual Studio Code。 以下选择器都要在style标签里填写。 1．后代选择器（空格）： 需求：只要这是一个p标签变红 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
什么是HTML复合选择器,CSS 的复合选择器
weixin_34911236的博客
06-03 347
3. CSS 的复合选择器3.1 什么是复合选择器在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等3.2 后代选择器后代选择器又称为包含选...
什么是HTML复合选择器,CSS样式之复合选择器
weixin_33622555的博客
06-03 467
1.交集选择器交集选择器使用的方法是其中一个为HTML的标签,另外一个是类选择器,示例如下:p.one 解释: p是HTML中的标签 , .one 是一个类选择器的书写方式,使用 1232.并集选择器多个选择器用逗号分开,所有选择器都能实现后面的样式 ,示例如下:a , p , .one , #id {}3.后代选择器外层的标签写在前面,内层标签写在后面 ,示例如下:div p {} 解释 ...
CSS：选择器 / 14种类型
最新发布
snowball的博客
07-06 2316
CSS中的UI元素伪类选择器主要用于定义用户界面元素的特殊状态样式，如链接的悬停（hover）、激活（active）状态，以及输入框的焦点（focus）状态等。：尽量使用更具体的选择器来定位你想要样式化的元素，这样可以减少不必要的性能开销，并提高样式表的可维护性。然而，需要注意的是，当通用选择器与其他选择器结合使用时，它仍然会匹配所有元素，但样式只会应用到那些也符合其他选择器条件的元素上。符号，它选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。在CSS中，ID选择器以井号。
html复合选择器
CHL0605的博客
12-03 271
父元素 子元素 祖先元素 后代元素 后代选择器： 选中某个元素的后代 语法：祖先元素 后代元素{ 样式声明 } 通过标签选择器选中、class、id 特点： 1、祖先元素选择器和后代元素选择器之间必须有一个空格 2、只会选中后代元素，祖先元素不受...
HTML：复合选择器
weixin_75179509的博客
04-02 256
CSS选择器一般包括：后代选择器，子代选择器，并集选择器，交集选择器，伪类选择器。
HTML-选择器
Wh532530的博客
03-31 4938
四种状态的顺序最好固定，link visited hover active。逗号选择器，可以同时设置多个标签，使用逗号进行分割。要使用伪元素选择器一定要加上content属性。标签选择器：根据标签的名称获取。id属性唯一，class不唯一。获取的是某个标签的第一级子标签。获取的某个标签里面所有的子标签。id选择器：获取的是ID属性。类选择器 ：class属性。
CSS——CSS复合选择器（重中之重 ☆）
流楚丶格念的博客
06-27 4951
文章目录CSS复合选择器交集选择器并集选择器后代选择器子元素选择器伪类选择器链接伪类选择器 CSS复合选择器 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 交集选择器 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。 记忆技巧： 交集选择器 是 并且的意思。 即…又…的意思 比如： p.one 选择的是： 类名为 .one 的 段落标签。 用的相
（二）CSS 复合选择器与特性
weixin_57162892的博客
06-03 210
1. Emmet 语法 2. 复合选择器 3. 元素显示模式 4. CSS 的背景 5. CSS 的三大特性
前端学习——CSS选择器
yuyu_724的博客
08-12 644
目标伪类选择器用法 :target 可用于选择当前活动的元素（就相当于在电脑主界面点击一个图标，则只有此图标变色即被选中，其余没有被选中的图标状态样式是不改变的）
WEB前端学习 （3）CSS复习二 （ 复合选择器+元素显示模式+ 背景）
Puppy_CQ的博客
04-27 180
一 CSS 复合选择器 总结：复合选择器 1. 后代选择器 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在 后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */ 元素1 和 元素2 中间用空格隔开 元素1 是父级，元素2 是子级，最终选择的是元素2 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可 元素1.
CSS复合选择器
yiyiivy的专栏
04-18 1111
文章简介：使用css的类名交集复合选择器. 首先先看一下基本定义： 复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器，主要包括“交集”选择器、“并集”选择器、“后代”选择器。 交集选择器 “交集”复合选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器
HTML的类选择器
linsa_pursuer的博客
10-27 1237
Document /*class类选择器：给要修饰的某一类标记，加上相同的class类属性，然后通过属性值来选择到这一类标记*/ .pb{ color:yellow; font-size:40px; /*设置文本水平排列方式left/center/right*/ text-align:cen
07.css学习-css选择器
weixin_30757793的博客
11-08 87
<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">/*选择器： 选择器的作用就是找到对应的数据进行样式化。 1.标签选择器： 就是找到所有指定的标签进行样式化。 格式： 标签名{ 样式1；样式2.... } 例子： div...
CSS选择器之复合选择器（HTML+CSS学习笔记06）
Ambition_fiee的博客
02-14 252
CSS的复合选择器 在css中，可以更具选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 ⭐复合选择器可以更准确、更高效地选择目标元素（标签） ⭐符合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 ⭐常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等 一、后代选择器： 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为
选择器
Majson的博客
09-16 241
css选择器
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值