前端三剑客CSS篇——CSS选择器

这篇具有很好参考价值的文章主要介绍了前端三剑客CSS篇——CSS选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

初识CSS选择器


CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。

CSS标签是由键值对的模式来排列的。

height:100px; /*height:键 100px:值 意识是高度设置为100px*/

CSS三大特征👍

学习CSS之前,先认识一下CSS的三大特征:

  1. 层叠性

    对同一个标签使用了同一种样式更改时,决定标签最后显示的样式是使用就近原则法,不会对之前修改的样式产生冲突

  2. 继承性

    子标签会继承父标签的某些样式,之前介绍HTML标签中,标签中互相存在着兄弟关系和父子关系,这种样式的继承是在于父子关系之间的

  3. 优先级

    如果选择器相同的情况下,会执行层叠性的规则,否则就是根据其权重来展示样式的。

前端三剑客CSS篇——CSS选择器

CSS的三种使用方法👏

  1. 内部引入

    (1) 这里可以将标签放在任何地方,不过一般是放在头部或者尾部

    <style>
            div {
                height: 100px;
                width: 100px;
                background-color: orange;
            }
    </style>
    

    前端三剑客CSS篇——CSS选择器

  2. 内联引入

    (1) 这里是对div 标签直接使用,其优先级大于其他标签

<div style="height: 100px; width: 100px; background-color: orange;">
        我是一个盒子
</div>
  1. 外部引入

    (1)创建一个以css结尾的文件,可以在文件中写入第一种方式的CSS样式,然后在head标签中引入文件。

<link rel="stylesheet" href="01.css">

虽然CSS有三种引入方式,不过最常使用的是内部引入和外部引入,因为看起来比较美观,修改时也比较简单。

CSS常见选择器👀

选择器,就是一个标签,在引入样式时指定的标签就称为选择器。

标签选择器

标签选择器就是使用HTML标签名来选择元素来进行样式处理,用于选取页面中所有具有相同标签的元素,标签选择器可以匹配所有的HTML标签,是最常见,最基本的标签之一。

举个例子🎁:

div {
    background-color: orange;
}

这个CSS规则会选中HTML文档中所有的div元素,然后将他们的背景色设置为橙色.

类选择器

每个标签都可以设置1个或多个类,比如给一个p标签设置一个名为message的类:

<p class="message">
    我是一段文字
</p>

类选择器就是使用标签中的类名所扩展的一种选择器,要使用选择器中的样式就必须在这个标签中引用这个类。注意,类选择器和标签选择器写法也不同。

举个例子🎁:

.message {
    color:blue;
}

使用了这个类的文字都会变成蓝色。

id选择器

每个HTML标签可以只能设置一个idid具有唯一性,所以使用这个样式一般是给特定的元素设置的。

<p id="textid">测试id选择器</p>

这种选择器很少会使用,不过在特定时期会对页面有一个很大的作用,id选择器的使用方法也与其他的不同,在id名前加#作为该选择器的名称。

举个例子🎁:

#textid {
    color: pink;
}

将这个id的元素的文字颜色设置成粉色。

后代选择器

允许根据类名或标签名嵌套在其他元素中的位置来选中元素,这意味着可以选择父元素下的特定后代元素或者元素集合,后代选择器可以嵌套许多层。

举个例子🎁:

<!-- HTML部分 -->
<div class="parent-element">
    <p>子元素p标签</p>
</div>
<!-- CSS部分 -->
<style>
    .parent-element p {
        color: chartreuse;
    }
</style>

这个代码的意思是将类名为parent-element父元素下的所有p标签元素中文字颜色改为chartreuse

举个例子🎁🎁:

<!-- html -->
<div class="parent-element">
    <p>
        <a href="#">孙子元素a标签</a>
    </p>
</div>
<!-- CSS -->
<style>
    .parent-element p a {
        color: chartreuse;
    }
</style>

这个代码的意思是将类名为parent-element父元素下的所有p标签中所有a标签元素中文字颜色改为chartreuse

属性选择器

属性选择器可以根据元素的属性和值来选择元素。这些选择器对于选中元素有特定的属性,并且这个属性还可以等于一个值或包含一个值。

  1. 等于选择器=

    选中的属性包含指定的属性

    举个例子🎁:

    <!-- html -->
    <div>
        效果组: <input type="text"><br>
        对比组: <input type="email">
    </div>
    <!-- css等于选择器 -->
    <style>
        input[type="text"] {
            background-color: brown;
        }
    </style>
    

    这个选择器的含义是将input标签中所有将type设置成text属性的标签背景颜色改为brown

    前端三剑客CSS篇——CSS选择器

  2. 包含选择器*=

    选中的属性包含指定元素

    举个例子🎁:

    <!-- html -->
    <div>
        效果组:<a href="www.google.com">谷歌</a><br>
        对比组:<a href="www.baidu.com">百度</a>
    </div>
    <!-- css包含选择器 -->
    <style>
        a[href*="google"] {
            font-size: 50px;
        }
    </style>
    

    a标签中所有href属性值包含google字样的字体属性设置为50px的大小。

    前端三剑客CSS篇——CSS选择器

  3. 开始选择器^=

    选择元素属性值以指定开头的元素

    举个例子🎁:

    <div>
        效果组:<a href="https://www.google.com">谷歌</a><br>
        对比组:<a href="www.baidu.com">百度</a>
    </div>
    <!-- css开始选择器 -->
    <style>
        a[href^="https://"] {
            color: #46eb5c;
        }
    </style>
    

    a标签中的href属性中以https://开头的元素中文字颜色改为绿色。

    前端三剑客CSS篇——CSS选择器

  4. 结束选择器$=

    这个与前者真好相反,这个是将属性值中以这个指定的字符串结尾的元素

    举个例子🎁:

    <!-- html -->
    效果组:<img src="../boy.png" style="width: 100px;">
    对比组:<img src="../book1.jpg" style="width: 100px;">
    <!-- css结束选择器 -->
    <style>
        img[src$=".jpg"] {
            border: 2px solid red;
        }
    </style>
    

    .jpg结尾的属性加边框,前面是边框像素,第二个是边框样式,最后一个是边框颜色。

    前端三剑客CSS篇——CSS选择器

  5. 匹配选择器|=

    选择具有前缀属性的元素,或者是以指定值开始和连接字符为-属性值的元素

    举个例子🎁:

    <!-- html -->
    <div class="parent">
        <p>
            属性匹配
        </p>
    </div>
    <!-- css匹配选择器 -->
    <style>
        div[class|="parent"] p {
            font-size: 30px;
        }
    </style>
    

    选择class所有具有parent开头或者只是parent,并包含在div中所有的p标签中所有的字体设置为30px

    复合选择器

    复合选择器是由多个简单选择器(如:标签,类,id,属性,等)组合在一起的选择器,用来更精准的匹配HTML元素,简单的几个选择器由空格隔开。

    举个例子🎁:

    <!-- html -->
    <div class="parent">
        <p id='son'>匹配</p>
        <p>测试</p>
    </div>
    <!-- css复合选择器 -->
    <style>
        .parent p#son {
            font-size: 30px;
        }
    </style>
    

    选择类名为parent的元素中所有p标签中idson的元素。

CSS代码风格📜

虽然CSS是不区分大小写的,不过一般都是使用小写来编写CSS代码,这次的分享都在这里,其实我们编写css代码会经常忘记,不过没关系,业精于勤,忘记了可以去工具查找我们需要使用的标签即可,多动手,自然会手到擒来ヽ(≧□≦)ノ文章来源地址https://www.toymoban.com/news/detail-439506.html

到了这里,关于前端三剑客CSS篇——CSS选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端三剑客简介

    W3C标准:网页主要由三部分组成 结构:html 表现:css,层叠样式表 行为:JavaScript div标签称为选择器,在div中各种属性来进行选择 css导入html有三种方式: 1,内联样式:在div标签中使用style 属性 2,内部样式:定义《style》标签,在标签内部定义css样式 3,外部样式:定义《

    2024年02月11日
    浏览(41)
  • 『 前端三剑客 』:HTML常用标签

    在HTML中标签是以成对的结构出现的,在HTML当中代码是通过标签来组织的 , 下面通过见得的Hello World的展现来显示歘HTML 标签的结构 如上述代码块所示,形如 用尖括号进行组织的,成对出现的这个东西就叫做标签 (tag) , 也可以叫做元素(element); 通常情况下一个标签是成对出现的, 开

    2024年02月09日
    浏览(46)
  • 消息队列黄金三剑客:RabbitMQ、RocketMQ和Kafka全面对决,谁是最佳选择?

    1.RabbitMQ: 适用于易用性和灵活性要求较高的场景 异步任务处理:RabbitMQ提供可靠的消息传递机制,适用于处理异步任务,例如将耗时的任务放入消息队列中,然后由消费者异步处理,提高系统的响应速度和可伸缩性。 解耦系统组件:通过使用RabbitMQ作为消息中间件,不同的

    2024年02月14日
    浏览(36)
  • html、css、javascript简单三剑客实现樱花飘落\雪花飘落特效汇总

    素材来源于网络稍作修改 侵删 如果觉得复制下面运行有问题或者嫌麻烦 可以直接下载源代码 欢迎fork、star 预览 话不多说,直接上代码 预览 预览

    2024年02月14日
    浏览(61)
  • 【剧前爆米花--前端三剑客】html的一些常用标签及其实例

    作者:困了电视剧 专栏:《JavaEE初阶》 文章分布:这是一篇关于html前端的文章,在这篇文章中我会简单介绍一些常用的html标签,并给出他们的应用实例,希望对你有所帮助!   目录 html常见标签 标题标签 段落标签 换行标签 格式化标签 图片标签 超链接标签 表格标签 列表

    2024年02月15日
    浏览(38)
  • 【剧前爆米花--前端三剑客】JavaScript(WebAPI)中的相关方法和实例

    作者:困了电视剧 专栏:《JavaEE初阶》 文章分布:这是一篇关于JavaScript(WebAPI)的文章,在这篇文章中我会简单介绍一些常用的js方法,并给出他们的应用实例,希望对你有所帮助!   目录 什么是WebAPI DOM的基本概念 什么是DOM DOM树 事件初识 基本概念 事件三要素 获取元素

    2024年02月16日
    浏览(45)
  • linux的三剑客

    1、grep命令 grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权限是所有用户。它是Linux系统中一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来。 shell脚本中也经常使用grep,因为grep通过返回一个状态值来说明搜索的结果

    2024年02月07日
    浏览(55)
  • Linux 三剑客

            grep主打的就是查找功能 ,它能够在一个或者多个文件中搜索某一特定的字符模式。         grep [选项] 模式 文件名 先说选项: 1.选项         要么是正则要么是字符串 -c       列出共出现多少次 -i        忽略大小写 -n       在前面列出行号 -v       列出没

    2024年02月11日
    浏览(42)
  • linux文本三剑客

    过滤/查找 参数 用法 作用 -i grep -i STRING xxx.txt 从xxx.txt文件查找不区分大小写STRING -w grep -w STRING xxx.txt 精确匹配STRING -e grep -e STRING1 -e STRING2 xxx.txt 查找多个STRING行 -n grep -n STRING xxx.txt 查看STRING 在第几行 -v grep -v STRING xxx.txt 输出不包含STRING的行 -r grep -r STRING DIR/ 查找DIR目录下哪

    2024年02月11日
    浏览(41)
  • 文本三剑客之 awk

    Linux/UNIX 系统中,awk 是一个功能强大的编辑工具。逐行读取输入文本 以空格作为分割符,多个空格他会自动压缩成一个空格 AWK信息的读入也是逐行指定的匹配模式进行查找,对符合条件的内容进行格式化输出或者过滤处理. 1按照命令找指定的行  2.找到的行 打印,操作 awk

    2024年02月08日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包