HTML选择器的作用

wp2023090219

于 2024-09-30 22:47:32 发布

阅读量303

点赞数 19

文章标签： html 前端 css

本文链接：https://blog.csdn.net/2301_81426182/article/details/142644826

版权

一.基本选择器：

标签选择器：用标签名称作为选择器，为对应标签名的元素设置样式

如图所示

<h2 style="color: red;">选择器</h2>

运行效果

类选择器：用class名作为选择器，为指定class名的元素设置样式，

在head标签里面，添加style标签，然后在class名前加(.)即可以使用类选择器

如图所示

<style>

.xzq{

color: aqua;

}

</style>

</head>

<body>

<h2 class="xzq">选择器</h2>

</body>

运行效果

id选择器：用id名作为选择器，为指定id的元素设置样式，

在head标签里面，添加style标签，然后在class名前加(#)即可以使用id选择器

注意id名是唯一的

如图所示

<style>

#xzq{

color: green;

}

</style>

</head>

<body>

<h2 id="xzq">id选择器</h2>

</body>

运行效果

二.选择器的复合：

1.交集选择器：两个选择器直连；第一个必须是标签选择器，第二个必须是类选择器或者id选择器，且选择器之间不能有空格。

类选择器的如图所示

<style>

h2.tll{color: brown;

}

</style>

</head>

<body>

<h2 class="tll">天亮了</h2>

<h2 class="tll">天暗了</h2>

<h2 class="tll1">晚上了</h2>

</body>

运行效果

h2.tll表示选择类名为tll的h2标签

id选择器的如图所示

<style>

h2#tll{color: blue;

}

</style>

</head>

<body>

<h2 id="tll">写作业</h2>

<h2 id="tll">玩手机</h2>

<h2 id="wl">完啦</h2>

</body>

运行效果

h2.tll表示选择id为tll的h2标签

2.交集选择器：即多个选择器写在一起（用逗号隔开），使用相同的样式效果

如图所示

<style>

p.xzq,#xzq1{

color: blue;

}

</style>

</head>

<body>

<p class="xzq">选择器</p>

<h2 id="xzq1">选择器1.0</h2>

</body>

运行效果

3.关系选择器（重点）

a.后代选择器（可跨代）：选择被嵌套的标签，选择器之间用空格来隔开

如图所示

<style>

ol ul{

color:brown;

}

</style>

</head>

<body>

<ol>

<li>我来了</li>

<ul>

<li>我到了</li>

<p>提出</p>

</ul>

<li>我走了</li>

</ol>

</body>

运行效果

ol ul 表示的是嵌套在ul中的ul标签的样式效果

b.子代选择器（不可跨代）：选择被嵌套的标签，选择器之间用大于号>来隔开

如图所示

<style>

ol>ul>.we{

color:green;

}

</style>

</head>

<body>

<ol>

<li>我来</li>

<ul>

<li class="we">我到</li>

<p class="we">提出了</p>

<p>嗡嗡嗡</p>

</ul>

<li>我走</li>

</ol>

</body>

运行效果

ol>ul>.we表示嵌套在ol的ul标签中的类名为we的样式效果

c.相邻兄弟选择器（相邻且顺序的同级）：选择被嵌套的标签，选择器之间用+来隔开

如图所示

<style>

li+ul{

color: red;

}

</style>

</head>

<body>

<ol>

<li>来</li>

<ul>

<li class="we">到</li>

<p class="we">出了</p>

<p>嗡嗡嗡</p>

</ul>

<li>走</li>

</ol>

</body>

运行效果

li+ul表示嵌套在li的ul标签中的所有样式效果

d.通用兄弟选择器 （有没有顺序都不重要）：选择被嵌套的标签，选择器之间用~来隔开

如图所示

<style>

li~ul{

color: red;

}

</style>

</head>

<body>

<ol>

<li>来</li>

<ul>

<li class="we">到</li>

<p class="we">出了</p>

<p>嗡嗡嗡</p>

</ul>

<li>走</li>

</ol>