AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-11-08 104
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一文带你入门css【选择器的详细介绍】

前言


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


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


1.概念


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


2.用样例体会css的作用


①.未加入css代码之前


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



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello World
    </p>
</body>
</html>

e629dfc6c8bc4ad1a266e8102b725240.png


②.加入css代码之后

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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>

8744d29cfe9544b89d0118ff4791b7f8.png


③原因分析


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

二、css中选择器的介绍


1.标签选择器


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


①案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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>


②结果

1fb51f8eb2044483a443fa864339603b.png


2.类选择器


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


①.案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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>
    <p class="stylE red">hello World</p>
    <div class="stylE green">Hello World</div>
</body>
</html>


②.结果


425cff5f0514475da7dd6889081ee510.png


3.id选择器

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


①.案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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>
    <p id="greeny">Hello World</p>
</body>
</html>


②.结果


204373e08f7c467394364aed40852caa.png


4.通配符选择器


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


①.案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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>


②.结果


06e180d833ed4e26a0da4dbd1224c9d4.png


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;
          }


①.案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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>
    <span class="re">Hello World</span>
    <span>Hello World</span>
    <br>
    <div class="1demo1">Hello World</div>
    <div class="demo1">Hello World</div>
    <div class="demo2">Hello World</div>
    <div class="demo3">Hello World</div>
    <select name="one" id="one_data">Hello World</select>
    <select name="two" id="two_data">Hello World</select>
    <select name="" id="three_">Hello World</select>
    <div class="demo0_1">Hello World</div>
    <div class="1_demo0">Hello World</div>
    <div class="1_demo0_1">Hello World</div>
</body>
</html>


②.结果


274a198faf904cffbb3d6717fc951886.png


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;
    }


①.案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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>


②.结果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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;
    }


①.案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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>


②.结果


f22923217a69426eb3a5775ffcb62717.png


8.关系选择器


①后代选择器


  顾名思义,就是选出某标签包含的所有标签,进行样式的统一
  这个特性得益于标签的继承,如果没有对某一标签进行样式
  指定,那么他的样式与父标签相同


代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        后代选择器就是将该标签下的子孙后代都选取出来,统一的进行样式修改
     -->
    <style>
        ul {
            color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <!-- ul的孩子 -->
        <li>Hello World</li>
        <li>Hello Sky</li>
        <li>Hello Boy
            <!-- 孙子辈 -->
        <li>Hello man</li>
        <p>Hello Tim</p>
        </li>
    </ul>
</body>
</html>

结果：


5c48d432c9e444f490c82eabfc5f648a.png


②子代选择器


与后代选择器不同的是,并没有将所有的子标签全选上,而是选择的某特定的标签


代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        子代选择器就是将后代中的直系子代选择出来,孙子辈及以下不能被选择出来
     -->
    <style>
        .nav>a {
            color: rgb(158, 157, 167);
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="nav">
        <a href="#">Hello World</a>
    <p>
        <a href="#">Hello World</a>
    </p>
    </p>
</body>
</html>


结果：


40f1dca8ef844044b6db4d756987967f.png

③并集选择器


  将标签进行并联选择,也就是某几种标签有相同的样式


代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        并集选择器直接将处于选择器指定的每一个级选择出来,使用','隔开
     -->
    <style>
        .nav>a,
        div,
        ul li {
            color: springgreen;
            font-family: '幼圆';
            font-style: italic;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div>
        <!-- 格式改变 -->
        Hello World
    </div>
    <p class="nav">
        <!-- 格式改变 -->
        <a href="#">Hello World</a>
    <p>
        <!-- 格式不变 -->
        <a href="#">Hello World</a>
    </p>
    </p>
    <ul>
        <li>Hello W</li>
        <li>Hello O</li>
        <li>Hello RLD</li>
    </ul>
</body>
</html>


结果：


460d7b3b46d94e8b8ce2e4f9cd318e19.png


④链接伪类选择器（放上去有动态效果）


  就是在鼠标触发某事件后,进行相应的选择


代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        连接伪类选择器就是对连接进行装饰,可以有一种动态的感觉
        其中有四种而且书写时必须按照LVHA顺序进行书写
     -->
    <style>
      //标签颜色
        a:link {
            color: skyblue;
            font-size: 70px;
        }
        //点击过的标签颜色
        a:visited {
            color: violet;
        }
    //代表如果鼠标放在了链接标签上就进行相应的样式变化
        a:hover {
            color: yellowgreen;
        }
        a:active {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <a hred="http://www.baidu.com">网址之家</a>
    <a href="#">HELLO</a>
    <a href="http://www.baidu.com">WORLD</a>
    <a href="http://www.baidu.com">!</a>
    <a href="http://www.bilibili.com">YES</a>
</body>
</html>


结果：


1fc4baf3e55344f98ba5fef969282de9.png


⑤表单伪类选择器


进行表单操作时，样式的变化
1


代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        表单伪类选择器是针对表单的一种动态的选择
        选择器可以对表单中的样式进行修改
     -->
    <style>
      //当鼠标聚焦在输入框时,输入框的样式变化
        input:focus {
            color: greenyellow;
            outline: 0;
            border: 1px solid blue;
            box-shadow: 0px 0px 10px 0px blue;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>


结果：


361c2699dad14b8bb44a5c1d81eb2cd4.png

总结


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


文章标签：
JavaScript
前端开发
关键词：
CSS选择器
CSS入门
酷尔。
目录
相关文章
gudanhero2018
|
2月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
gudanhero2018
36 1
gudanhero2018
|
2月前
|
前端开发 JavaScript
CSS：基础选择器
CSS：基础选择器
gudanhero2018
46 1
小徐在进步
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性：继承性、层叠性和优先级，并深入讲解了背景图的相关属性，包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中，继承性指子元素自动继承父元素的文字控制属性；层叠性指相同属性后定义覆盖前定义，不同属性可叠加；优先级涉及选择器权重，包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
小徐在进步
253 91
那年春天
|
10天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨，我们可以更好地理解和应用它们，为网页设计和开发带来更丰富、更灵活的样式效果。同时，要注意在实际应用中根据具体情况合理选择和使用伪类选择器，以达到最佳的设计效果和用户体验。
那年春天
26 2
小徐在进步
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性，通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性，并提供了实用的代码示例。此外，还简要介绍了调试工具中的一些细节，如错误属性标识和属性生效状态的控制。
小徐在进步
64 28
周一同学Zelina
|
2月前
|
前端开发 JavaScript 容器
谁动了我的选择器？深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理，包括不同种类选择器的权重计算规则，并通过实例说明了如何解决样式冲突问题，确保所需的样式能够正确应用到目标元素上。
周一同学Zelina
68 7
六卿
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS（层叠样式表）的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用，展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS，讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外，还强调了使用`!important`规则时的优先级高于行内样式。
六卿
80 1
小徐在进步
|
2月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式，包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外，还深入解析了不同种类的选择器：标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景，并提供了实例帮助理解。最后，通过具体的新属性示例，指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
小徐在进步
48 15
何雨晨
|
30天前
|
前端开发
CSS常见的选择器
CSS常见的选择器
何雨晨
17 0
小徐在进步
|
2月前
|
前端开发
【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧
定位、CSS精灵与一些其他CSS高级技巧
小徐在进步
34 9