无标题html第三话之选择器
Posted 别碰我的宏定义
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无标题html第三话之选择器相关的知识,希望对你有一定的参考价值。
html第三话
1.选择器:根据不同的需求将不同的标签选择出来。简单来说就暗示选择标签用的。示例如下:通过选择器来改变标签属性。
<!DOCTYPE html>
<!--通过改变选择器改变标签属性-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
/*选择器就是根据不同的需求将不同的标签选择出来。简单来说就暗示选择标签用的*/
/*标签选择器将同一标签设置为同一种样式*/
/*可以用 .classname,直接用classname调用即可*/
p
color: green;
div
color: pink;
.suibian
color: blue;
font-size: 50px;
</style>
<body>
<p class="suibian">男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
<ul>
<li class="suibian">例会</li>
<li>晚餐</li>
<li>爱情</li>
<li>面包</li>
</ul>
</body>
</html>
2.选择器的分类:标签选择器,id选择器,类选择器,通配符选择器,使用方式如下:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!--选择器-->
<style>
/*标签选择器*/
p
/*类选择器*/
.red
background-color: red;
font-size: 35px;
.green
background-color: green;
font-size: 35px;
.Red
color: red;
.fontsize
width: 100px;
height: 100px;
/*id选择器。用#idname定义,在标签里用id = "idname"只能调用,别人切勿使用*/
#pink
color: pink;
/*通配符选择器不需要去调用,自动就给所有的元素添加样式*/
/* *
*/
</style>
<body>
<!--多类名就是将多个类名添加给同一个元素用空格隔开隔开-->
<div class="red fontsize">红色</div>
<div class="green fontsize">绿色</div>
<div class="red fontsize">红色</div>
<div class="Red fontsize">刘德华</div>
<div id="pink">迈克尔 杰克逊</div>
</body>
</html>
以上是关于无标题html第三话之选择器的主要内容,如果未能解决你的问题,请参考以下文章