通配选择符

最新推荐文章于 2022-04-12 23:29:19 发布

honeyws

最新推荐文章于 2022-04-12 23:29:19 发布

阅读量493

点赞数

分类专栏： Web前端基础文章标签：通配选择符

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102904973

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

选择符
Id选择符，class选择符，tag选择符，通配选择符，分组选择符，包含选择符和伪类选择符
Id，class选择符上个说过了。就直接说tag选择符。
Tag选择符
也叫标签选择符，可直接通过HTML标签的名字来设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择符</title>
    <style>
    div{    color: brown;}
    p{  color: burlywood;}
</style>
</head>
<body>
 <div>第一个标签</div>
    <div>第二个标签</div>
    <p>第一个段落</p>
    <p>第二个段落</p>
</body>
</html>

在同一个HTML网页中，相同的标签可能有不同的样式

<style>
  /*带有active样式的div标签添加颜色
 </style>
</head>
<body>
 <div class="active">第一个div标签</div>
    <div>第二个标签</div>
    <p class="active">第一个p标签</p>
    <p>第二个p标签</p>
</body>
</html>

上面的代码中需要将带有active样式的

标签添加颜色，但是对同样带有active样式的

标签没有影响，这时就需要tag选择符和class选择符组合来设置选择符，使网页能够只选择

标签中带active的class样式，而不去选择其他标签中带active的class样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择符</title>
    <style> div.active{ color: chartreuse;}
    </style>
</head>
<body>
   <div class="active">第一个div标签</div>
    <div>第二个标签</div>
    <p class="active">第一个p段落</p>
    <p>第二个段落</p>
</body>
</html>

Tag选择符和class选择符可以和class选择符组合使用时，tag与class之间是紧挨着的，无需空格隔开。
通配选择符
可以把样式通用在所有标签中，通过星号(*)的方式来设置，要慎用统配选择符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统配选择符</title>
    <style>
            *{color: cornflowerblue;}
    </style>
</head>
<body>
    <div>这是一个标签</div>
    <p>这是一个p标签</p>
    <h1>这是一个h1标签</h1>
</body>
</html>

组选择符
分组选择符可以简化相同的操作，通过逗号(,)来进行分组设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分组选择符</title>
    <style>
        div,p,h1{   color: red;}
    </style>
</head>
<body>
    <div>这是一个标签</div>
    <p>这是一个p标签</p>
    <h1>这是一个h1标签</h1>
</body>
</html>

将div，p，h1标签统一设置颜色，和把标签分开设置颜色效果相同，但是这种写法提供了可维护性。
包含选择符
是指被选标签被其他标签所包含，从何人通过筛选的方式进行操作，通过空格来包含设置。例如只需要ul中的li添加颜色，而ol中的li不做任何处理，这时就要用到包含选择符进行选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>包含选择符</title>
    <style>
        ul li{  color: slateblue;}
    </style>
</head>
<body>
    <ul>
        <li>李云龙</li>
        <li>杨秀琴</li>
        <li>和尚</li>
    </ul>
    <ol>
        <li>赵刚</li>
        <li>楚云飞</li>
        <li>田雨</li>
    </ol>
</body>
</html>

honeyws

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通配选择符

选择符Id选择符，class选择符，tag选择符，通配选择符，分组选择符，包含选择符和伪类选择符Id，class选择符上个说过了。就直接说tag选择符。Tag选择符也叫标签选择符，可直接通过HTML标签的名字来设置样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...
复制链接

扫一扫