提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

入门CSS 介绍 详细 一文 选择器
2023-09-27 14:20:14 时间

文章目录

前言

前面带领大家了解了一个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>

在这里插入图片描述

②.加入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>

在这里插入图片描述

③原因分析

	在以上两段代码中,文件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>

②结果

在这里插入图片描述

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>

②.结果

在这里插入图片描述

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>

②.结果

在这里插入图片描述

4.通配符选择器

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

①.案例

<!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>

②.结果

在这里插入图片描述

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>

②.结果

在这里插入图片描述

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>

②.结果

在这里插入图片描述

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>

②.结果

在这里插入图片描述

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>

结果：

在这里插入图片描述

②子代选择器

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

代码：

<!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>

结果：

在这里插入图片描述

③并集选择器

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

代码：

<!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>

结果：

在这里插入图片描述

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

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

代码：

<!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>

结果：

在这里插入图片描述

⑤表单伪类选择器

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

代码：

<!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>

结果：

在这里插入图片描述

总结

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

相关文章