CSS进阶方法——复合选择器、元素显示、背景设置

这篇具有很好参考价值的文章主要介绍了CSS进阶方法——复合选择器、元素显示、背景设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、复合选择器


复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素(标签)
  • 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
  • 常用的复合选择器包括:后代选择器子选择器并集选择器伪类选择器等.
1-1 后代选择器

后代选择器 元素1 元素2 {css样式}

后代选择器 又称为 包含选择器可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

  • 元素1 和 元素2 中间用 空格 隔开
  • 元素1 是父级,元素2 是子级,最终选择的是 元素2,即:元素1 是不会生效样式的
  • 元素2 可以是儿子,也可以是孙子等,只要是 元素1 的后代即可
        /* ①后代选择器  元素1 元素2 {css样式} */
        .father .son1 {
            width: 300px;
            height: 300px;
            border:5px solid rgb(2, 62, 115);
        }
        .father .son1-groundson{
            width: 200px;
            height: 200px;
            border:5px solid rgb(23, 147, 255);
        }

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

1-2 子选择器

元素1>元素2 {css样式}

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单理解就是选直接后代子元素。

 /* ②子选择器  元素1>元素2 {css样式} */
        .father>.son1{
            border:5px solid rgb(92, 209, 255);
        }

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

1-3 并集选择器

元素1,元素2{css样式}

并集选择器 可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明
并集选择器 是各选择器通过英文逗号 , 连接而成,任何形式的选择器都可以作为并集选择器的一部分。

        /* ③并集选择器   元素1,元素2{css样式} */
        .son1,
        .son2{
            border:5px solid rgb(181, 249, 255);
        }

并集选择器优先级低于后代、子选择器

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

1-4 伪类选择器

伪类选择器 用于向某些选择器添加特殊的效果,比如:给链接添加特殊效果(链接伪类),或选择第 n 个元素(结构伪类)。
伪类选择器 书写最大的特点是用冒号 : 表示

focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标,一般情况 <input> 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

        /* focus伪类选择器 */
        input:focus{
            background-color: aquamarine;
        }

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

链接伪类选择器

:link , :visited , :hover , :active

        /* ④链接伪类选择器   :link , :visited , :hover , :active */
        a:link{   /*原始颜色 */
            color:darkorange;
        }
        a:visited{   /* 展览过后颜色*/
            color:cornflowerblue;
        }
        a:hover{   /* 鼠标放置颜色*/
            color: hotpink;
        }
        a:active{  /*  长按/点击颜色  */
            color:rgb(139, 72, 255);
        }

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

1-5 复合选择器小结
选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 .nav a
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于 .nav>p
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住 a{}a:hover 实际开发的写法
:focus 选择器 选择获得光标的表单 跟表单相关 较少 input:focus 记住这个写法

强调:复合选择器的层级写得越细越好(可读性,可维护性,安全性),同时将复合选择器的层级写得越细,可以提前避免大部分的选择器优先级混乱!

1-6 结构伪类选择器

结构伪类是一种选择器,它可以选择符合特定条件的元素。

body中代码展示:

    <div class="box1">111
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
    </div>

    <div class="box1">222</div>

    <div class="box1">333</div>

  • :first-child:选择元素的第一个子元素。
        .box1 div:first-child{
            background-color:rgb(255, 203, 135) ;
            border:5px solid rgb(67, 44, 5);
        }

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

  • :last-child:选择元素的最后一个子元素。
        .box1 div:last-child{
            background-color:rgb(135, 255, 253) ;
            border:5px solid rgb(5, 48, 67);
        }

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

  • :nth-child(n):选择元素的第 n 个子元素。

其中可以写表达式,2n代表偶数,2n-1代表奇数

        .box1 div:nth-child(2n){
            background-color:rgb(255, 170, 194) ;
            border:5px solid rgb(67, 5, 16);
        }

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

  • :nth-last-child(n):选择元素的倒数第 n 个子元素。

    :nth-child(n)相似,只不过选择的是倒数某些子元素


  • :nth-of-type(n):选择元素的第 n 个同级元素。
/* 选择元素的第几个同级(class中相同)元素——:nth-ofotype(n) */
        .box1:nth-of-type(1){
            background-color:rgb(144, 255, 170) ;
            border:5px solid rgb(4, 89, 28);
        }

CSS进阶方法——复合选择器、元素显示、背景设置,css,前端

  • :nth-last-of-type(n):选择元素的倒数第 n 个同级元素。

    :nth-of-type(n)相似,只不过选择的是倒数某些子元素


  • :first-of-type:选择元素的第一个同级元素。
  • :last-of-type:选择元素的最后一个同级元素。

等同于:nth-of-type(1),选择同级元素的第一个



2、元素显示模式总结

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

学习元素显示模式的主要目的是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。



3、背景总结

属性 作用
backgroud-color 背景颜色 预定义的颜色值 / 十六进制 / RGB代码
backgroud-image 背景图片 url(图片路径)
backgroud-repeat 是否平铺 repeat / no-repeat / repeat-x / repeat-y
backgroud-position 背景位置 length / position 分别是 x 和 y 坐标
backgroud-attachment 背景附着 scroll(背景滚动)/ fixed(背景固定)
背景简写 书写更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明 背景颜色半透明 background: rgba(0, 0, 0, 0.3); 后面必须是4个值

背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)。文章来源地址https://www.toymoban.com/news/detail-784358.html

到了这里,关于CSS进阶方法——复合选择器、元素显示、背景设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS(二)-- 选择器的运用(针对基本选择器和复合选择器的详细解析)

    目录 1.  选择器的作用  2.  选择器的分类  3.  基本选择器 3.1  标签选择器 3.2  类选择器 3.3  id 选择器 小拓展: 3.4  通配符选择器 小总结: 4.  复合选择器(记忆) 4.1  子代选择器 4.2  后代选择器 小拓展: 4.3  交集选择器 4.4  并集选择器 选择器(选择符)就是 根据不

    2024年02月02日
    浏览(41)
  • 【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )

    链接伪类选择器 可以 设置 链接文本 的 不同状态的样式 : 未访问链接样式 : 默认的样式 , 界面打开后 , 默认显示该样式 ; 已访问链接样式 : 点击过的链接 , 链接变成该样式 ; 鼠标移动到链接样式 : 鼠标移动到 链接 上方 , 链接变成该样式 ; 选定链接样式 : 按下鼠标松开时 ,

    2024年02月04日
    浏览(53)
  • 纯css实现鼠标悬浮、点击更改元素背景

    css伪类 active:元素被点击时变色,点击后颜色消失 focus:元素被点击后变色,点击后颜色不消失 hover:鼠标悬浮时变色,移除后颜色消失 template部分代码 style部分代码

    2024年02月16日
    浏览(41)
  • 【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

    如果 盒子的大小 大于 背景图片的大小 , 默认的 图片 位置是 左上角 ; 设置背景位置的 CSS 语法如下 : background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ; length 长度 : 百分数 : 如 50% ; 浮点数 + 单位 : 如 : 150.5px ; position 方位 : 设置的是 x 坐标的方位 和 y 坐标的方

    2024年02月07日
    浏览(42)
  • 【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )

    背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ; 下面的 CSS 样式中 , 就是 设置黑色背景 , 透明度为 20% ; 颜色的透明度 alpha 取值范围是 0 ~ 1 之间 , 在使用时 , 可以 省略 0.x 前面的 0 , 直接使用 .x 作为透明度值 , 如 : 背景半透明 指的是 盒子的背景设置为半透明 , 可以看

    2024年02月01日
    浏览(44)
  • CSS中如何实现元素的渐变背景(Gradient Background)效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(57)
  • CSS 设置渐变背景 CSS 设置渐变边框

    一、css渐变背景添加透明度opacity css渐变背景经常会在项目开发中遇到,此时UI如果给出的是单一的渐变背景(没有背景透明度),这个我们会很快的写出代码,如下: 但偶尔的时候UI会给煎饼的背景色添加一个透明度,但是使用 opacity属性会导致文本也会有透明度 ,接下来给

    2024年02月09日
    浏览(43)
  • 前端成神之路-CSS(选择器、背景、特性)

    目录 前端成神之路-CSS(选择器、背景、特性) CSS 第二天 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. 标签显示模式(display)重点 2.1 什么是标签显示模式 2.2 块级

    2024年02月08日
    浏览(42)
  • CSS特性、背景属性和显示模式

    CSS特性:化简代码 / 定位问题,并解决问题 继承性 层叠性 优先级 继承性 继承性:子级默认继承父级的 文字控制属性 。 注意:如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。 层叠性 特点: 相同的属性会覆盖: 后面的 CSS 属性覆盖前面的

    2024年02月09日
    浏览(45)
  • CSS 设置背景图片

    一、基本设置 使用 CSS 可以通过以下属性设置背景图片: background-image : 设置背景图片的 URL。 background-size : 设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 \\\"cover\\\"(填充整个容器)或 \\\"contain\\\"(完整显示图片)。 background-repeat : 设置背景图片是否重复。可

    2024年02月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包