CSS的选择器-基本选择器

1、标签选择器

作用于标签，对多有同名字的标签都用同一种样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		div{
      		color:red;
		}
		li{
     		color:green;
		}
	</style>
</head>
<body>

<div>标签选择器1</div>
<div>标签选择器2</div>
<div>标签选择器2</div>

<ul>
    <li>123</li>
    <li>234</li>
    <li>345</li>
</ul>
</body>
</html>

2、id选择器

以标签中的id进行样式的管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		#i1{
          color:red;
		}
	</sytle>
</head>
<body>
	<div id="i1>id选择器的使用</div>
</body>
</html>

3、class选择器

以标签中属性class的值进行样式的管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
	<!--只作用于class="c1"-->
        .c1{
            color: red;
        }
    </style>
</head>
<body>
    <div class="c1">class选择器1</div>
    <div class="c2">class选择器2</div>
</body>
</html>

4、通配选择器（基本不用）

所有标签都用以这样的样式进行管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
	<!--页面中所有的标签都用该样式-->
        *{
            color: red;
        }
    </style>
</head>
<body>
    <div class="c1">class选择器1</div>
    <p>通用</p>
    <div class="c2">class选择器2</div>
</body>
</html>

 

posted @ 2021-12-26 18:39  A熙  阅读(52)  评论(0)    收藏  举报