二、CSS基础选择器

最新推荐文章于 2022-11-18 21:39:05 发布

并不傻的狍子

最新推荐文章于 2022-11-18 21:39:05 发布

阅读量369

点赞数

分类专栏：前端开发文章标签： css html

本文链接：https://blog.csdn.net/qq_40836442/article/details/114628584

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、CSS选择器的作用

    <div>我是div</div>
    <div>我是div</div>
    <p>我是段落</p>
    <ul>
        <li>我是ul里面的小li哦</li>
    </ul>
    <ol>
        <li>我是ol里面小li哦</li>
    </ol>

1、我想把div里面的文字改为红色？

2、我想把第一个div里面的文字改为红色？

3、我想把ul里面的li文字改为红色？

选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。

以上CSS做了两件事：

1、找到所有的h1标签。选择器（选对人）。

2、设置这些标签的样式，比如颜色为红色（做对事）。

二、选择器分类

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。

基础选择器是由单个选择器组成的

基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

三、标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法

标签名{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
}

<!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>基础选择器之标签选择器</title>
    <style>
        /* 标签选择器：写上标签名 */
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。

优点：能快速的为页面中同一类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

四、类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。

语法

.类名{
    属性1：属性值1；
    ...
}

例如，将所有拥有red类的HTML元素均为红色。

.red{
    color：red；
}

结构需要用class属性来调用class类的意思

<div class='red'>变红色</div>

定义样式时不要忘记加 “.” ，调用class时不要使用 “.”

<!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>基础选择器之类选择器</title>
    <style>
        /* 类选择器口诀：样式点定义    结构类（class）调用  一个或多个  开发最常用 */
        .redColor{
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="redColor">冰雨</li>
        <li class="redColor">来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
        <li>江南style</li>
    </ul>
    <div class="redColor">我也想变红色</div>
</body>
</html>

注意：

①类选择器使用 “.” （英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。

②可以理解为给这个标签起了一个名字，来表示。

③长名称或词组可以使用中横线来为选择器命名。

④不要使用纯数字、中文等命名，尽量使用英文字母来表示。

⑤命名要有意义，尽量使别人一眼就知道这个类名的目的。

⑥命名规范：见附件（Web前端开发规范手册.doc）

头	header	内容	content/cotainer	尾	footer	导航	nav
侧栏	sidebar	栏目	column	页面外围控制整体布局宽度	wrapper	左右中	left right center
登录条	loginbar	标志	logo	广告	banner	页面主体	main
热点	hot	新闻	news	下载	download	子导航	subnav
菜单	menu	子菜单	submenu	搜索	search	友情链接	friendlink

五、课堂案例——用CSS画一个盒子

通过这个案例练习两个地方：

1、类选择器的使用

2、div就是一个盒子，用来装网页内容的。

<!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>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div> 
</body>
</html>

六、类选择器——多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

（一）多类名的使用方式

<div class="red font20">亚瑟</div>

1、在标签class属性中写多个类名

2、多个类名中间必须用空格分开

3、这个标签就可以分别具有这些类名的样式

（二）多类名的使用场景

我上面的案例中，红色的盒子和绿色的盒子都是一样的宽和高，就把公共的部分放到box类中。如果想统一更改大小，很方便。

<!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>
        .box {
            width: 100px;
            height: 100px;
        }
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            /* 背景颜色 */
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div> 
</body>
</html>

1、可以把一些标签元素相同的样式（共同的部分）放到一个类里面。

2、这些标签都可以调用这个公共的类，然后再调用自己独有的类。

3、从而节省CSS代码，统一修改也非常方便。

七、id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以 “#” 来定义。

语法

#id名 {
    属性1：属性值1；
    ...
}

例如，将id为nav元素中的内容设置为红色。

#nav {
    color：red；
}

注意：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>id选择器</title> 
    <style >
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
    <!-- 不可再次调用，等学了js就会报错了，现在不会报错 -->
    <div id="pink">pink老师</div>
</body>
</html>

id选择器和类选择器的区别：

①类选择器（class）好比人的名字，一个人可以有多个名字，同一个名字也可以被多个人使用。

②id选择器好比人的身份证号码，全中国是唯一的，不得重复。

③id选择器和类选择器最大的不同在于使用次数上。

④类选择器在修改样式中使用最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

八、通配符选择器

在CSS中，通配符选择器使用 “*” 定义，它表示选取页面中所有元素（标签）。

语法

* {
    属性1：属性值1；
    ...
}

    <style>
        * {
            color: red;
        }
    </style>

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景（以下是清除所有元素标签的内外边距，后期讲）

* {
    margin: 0;
    padding: 0;
}

九、基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p {color: red;}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav {color ： red；}
id选择器	一次只能选择一个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav {color:red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}