快捷搜索:  汽车  科技

html基础知识测试(测试开发全栈化-HTML)

html基础知识测试(测试开发全栈化-HTML)可以看到所有的字都是蓝色了,那么对应的代码呢?来看看效果:属性1:属性值1;....}

上午我们讲了HTML中CSS样式里的id选择器,接下来说下通配符选择器。

在CSS中,通配符选择器使用 "*" 定义,表示选取页面中所有元素(标签)。

语法:

* {

属性1:属性值1;

....

}

来看看效果:

html基础知识测试(测试开发全栈化-HTML)(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>测试全栈化-HTML中CSS样式之通配符选择器</title>

<style>

* {

color: blue;

}

</style>

</head>

<body>

<div>我的</div>

<span>我是一个人</span>

<ul>

<li>我还是我</li>

</ul>

</body>

</html>

*这里将 html body head等标签都设置为红色

需要注意点:

通配符选择器不需要调用,自动就给所有元素使用样式

在特殊情况下会使用,比如清除所有的元素标签的内外边距,例如:

* {

margin:0;

padding:0;

}

接下来总结下所有的基础选择器:

标签选择器: 可以选出所有的标签,不能差异化选择,在很多场景中使用

类选择器: 可以选出一个或多个标签,可以根据需求选择,使用情况非常多

id选择器: 一次只能选择一个标签,ID属性只能在每个HTML文档中出现一次,一般和js搭配

通配符选择器:选择所有的标签,缺点是选择的太多,有的标签不需要,一般都是特殊情况下使用的。

每个基础选择器都有使用场景,都需要掌握

如果修改样式,类选择器是使用最多的

好的,CSS样式基础选择器就讲完了,大家晚安~

猜您喜欢: