一文带你入门css【选择器的详细介绍】

文章目录

前言

前面带领大家了解了一个web网页中都有什么,html中的标签是干什么的,今天带领大家入门一下他的好兄弟css

一、(〃‘▽’〃)css简介、英文全称：Cascading Style Sheets

1.概念

css又称层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或
XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
用一句通俗的话讲就是html搭建了人的骨架,css给人穿上了华丽的衣服。

2.用样例体会css的作用

①.未加入css代码之前

    可以从以下案例看出字体又小又瘦,平平无奇。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>Hello World
    </p></body></html>

在这里插入图片描述

②.加入css代码之后

    可以看出经过修饰字体变大也变了颜色,并且跑到了中间位置。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{margin:0 auto;width: 1000px;height: 100px;font-size: 90px;color: chartreuse;background-color: aqua;text-align: center;}</style></head><body><p>Hello World
    </p></body></html>

在这里插入图片描述

③原因分析

    在以上两段代码中,文件2比文件1新增了一个style标签,而标签内的东西才是关键所在
    因为hello world是在p标签内所以将p标签选了出来经过一系列的修改得到了如图的效果。
    具体是如何做的目前不必深究,需要知道的是css可以这么做,日后还会进行更多的样式介绍
    希望大家给个关注阅读其他文章。

二、css中选择器的介绍

1.标签选择器

    上述介绍的案例就是使用的标签选择器,标签选择器就是
    直接使用标签将相应的所有标签做出改变

①案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 标签选择器 --><!-- 选择之后会将标签内的所有数据都改掉 --><style>p{color: red;font-weight: 20;font-size: 100px;}div{color:rgb(0, 124, 128);font-weight: 200px;}</style></head><body><p>Hello world</p><div>Hello word</div></body></html>

②结果

在这里插入图片描述

2.类选择器

    在此引入一个概念,给标签赋予类
    例如：<p class="test"></p>
    这样可以选出这一类标签
       <!-- 类选择器可以将不同模块的属性在分模块填写达到分离效果 -->
    <!-- 定义选择器时在选择器前加上.  调用时直接拿类名进行调用 -->
    <!-- 可以给多个标签使用,可以一个类使用多个选择器 -->

①.案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.stylE{background-color: greenyellow;width: 10;height: 10;font-size: 20;}.green{color: green;}.red{color: red;}</style></head><body><pclass="stylE red">hello World</p><divclass="stylE green">Hello World</div></body></html>

②.结果

在这里插入图片描述

3.id选择器

    使用方法与类选择器类似,可以对标签赋予id
一般来说：
    <!-- id选择器与class选择器不同点是id选择器只能由一个标签使用，
    用过之后不能在给其他的标签使用 -->因为id具有唯一性。
经博主测试：
    同一个html页面多个标签可以同时使用同一个id

①.案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>#greeny{background-color: greenyellow;width: 100px;height: 100px;color: red;}</style></head><body><pid="greeny">Hello World</p></body></html>

②.结果

在这里插入图片描述

4.通配符选择器

通配符选择器一般用于项目的初始化,可以直接选出所有标签,或具有某一特征的标签

①.案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 通配符选择器 --><!-- 将所有的字体颜色都变成一种颜色,特殊情况下使用 --><style>*{color: red;}</style></head><body><p>hello world</p><div>helloworld</div><ul><li>hahha</li></ul></body></html>

②.结果

在这里插入图片描述

5.属性选择器

    根据属性，选择出符合条件的标签。
    基本语法：
            选择出有类属性的标签
            span[class=“re”] {
                color: blue;
            }
        
            /* 该标签属性是1+10=11 */
            选择出开头是demo的标签
            div[class^="demo"] {
                color: chartreuse;
            }
            选择出结尾是data的id
            select[id$="data"] {
                color: cyan;
            }
            选择出类名包含demo0的标签
            div[class*="demo0"] {
                color: darkorchid;
            }

①.案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 
        属性选择器,伪类选择器,伪元素选择器权重均是10
        属性选择器有几种分类
        1.直接填写属性名称
        2.填写属性名称等于什么
        3.使用倒着的箭头,指定属性的前缀
        4.使用$指定属性的后缀
        5.使用*指定属性中有什么
     --><style>span[class]{color: blue;}/* 该标签属性是1+10=11 */div[class^="demo"]{color: chartreuse;}select[id$="data"]{color: cyan;}div[class*="demo0"]{color: darkorchid;}</style></head><body><spanclass="re">Hello World</span><span>Hello World</span><br><divclass="1demo1">Hello World</div><divclass="demo1">Hello World</div><divclass="demo2">Hello World</div><divclass="demo3">Hello World</div><selectname="one"id="one_data">Hello World</select><selectname="two"id="two_data">Hello World</select><selectname=""id="three_">Hello World</select><divclass="demo0_1">Hello World</div><divclass="1_demo0">Hello World</div><divclass="1_demo0_1">Hello World</div></body></html>

②.结果

在这里插入图片描述

6.伪类选择器

   伪类选择器有两种
    一种是孩子伪类选择器：以孩子为主体
    一种是类型选择器：以类型为主体

    /* 
    ul 标签下的div标签的第一个与最后一个孩子
     */
    ul div:last-child {
        color: aquamarine;
    }

    ul div:first-child {
        color: blueviolet;
    }

    /* 
    odd是奇数
    even是偶数
    括号内支持数学公式
     */
    div div:nth-child(odd) {
        background-color: grey;
    }

    div div:nth-of-type(even) {
        background-color: #ccc;
    }

    /* 
    以下两个标签是这两种标签最本质的区别
    child以孩子个数为主,先检查孩子所属的位置,然后对比标签类型只有都符合才会触发效果
    type以标签类型为主,在指定的标签类型中找到标签的次序,然后触发效果
     */
    ul div:nth-child(1) {
        background-color: hotpink;
    }

    ol div:nth-of-type(1) {
        background-color: brown;
    }

①.案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 
        第一个与最后一个
         */ul div:last-child{color: aquamarine;}ul div:first-child{color: blueviolet;}div div:nth-child(odd){background-color: grey;}div div:nth-of-type(even){background-color: #ccc;}ul div:nth-child(1){background-color: hotpink;}ol div:nth-of-type(1){background-color: brown;}</style></head><body><ul><p>Hello</p><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div></ul><ol><p>Hello</p><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div></ol><div><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div></div></body></html>

②.结果

在这里插入图片描述

7.伪元素选择器

    伪元素选择器之所以叫伪元素选择器,就是因为标签不是真实存在的
    而是依赖原有的盒子存在的,而原有的盒子身份是他的父盒子
    伪元素有before after两种
 
    div {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: blueviolet;
    }

    /* 伪元素选择器必须要有content这一属性,如果啥也不存就用双引号引起来空格 */
     div:hover::after {
        content: 'Hello';
        position: absolute;
        width: 300px;
        height: 300px;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 300px;
        font-size: 30px;
        font-weight: 700;
    }

①.案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!--<style>div{position: relative;width: 300px;height: 300px;background-color: blueviolet;}div:hover::after{content:'Hello';position: absolute;width: 300px;height: 300px;background-color:rgba(0, 0, 0, 0.5);text-align: center;line-height: 300px;font-size: 30px;font-weight: 700;}</style></head><body><div></div></body></html>

②.结果

在这里插入图片描述

总结

没有css的html代码没有华丽的外表,没有js的html代码没有灵魂。

标签： css html 前端

本文转载自: https://blog.csdn.net/apple_51931783/article/details/122639849
版权归原作者 酷尔。 所有，如有侵权，请联系我们删除。

一文带你入门css【选择器的详细介绍】

文章目录

前言

一、(〃‘▽’〃)css简介、英文全称：Cascading Style Sheets

1.概念

2.用样例体会css的作用

①.未加入css代码之前

②.加入css代码之后

③原因分析

二、css中选择器的介绍

1.标签选择器

①案例

②结果

2.类选择器

①.案例

②.结果

3.id选择器

①.案例

②.结果

4.通配符选择器

①.案例

②.结果

5.属性选择器

①.案例

②.结果

6.伪类选择器

①.案例

②.结果

7.伪元素选择器

①.案例

②.结果

总结

发表评论

“一文带你入门css【选择器的详细介绍】”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航