CSS 选择器

最新推荐文章于 2025-03-06 12:11:45 发布

原创最新推荐文章于 2025-03-06 12:11:45 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

HTML基础，css基础专栏收录该内容

3 篇文章

订阅专栏

CSS选择器包括元素选择器、id选择器、class选择器、属性选择器

1.元素选择器

用标签名作为选择器，选中所有相应的元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>css选择器</title>
   <style>
      div{
         background: #aaaaaa;
         color:red;
         width:200px;
         height:200px;
      }
      p{
         font-size: 17px;
         color:#000;
      }
   </style>
</head>
<body>
<div>我是一个盒子</div>
<p>我是一个段落</p>
</body>
</html>

2.id选择器

顾名思义，就是根据id来选择元素，其样式定义为：#id{ 样式 } ，id名不能重复。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>css选择器</title>
   <style>
     #demo{
         background: #aaaaaa;
         color:red;
         width:200px;
         height:200px;
      }
   </style>
</head>
<body>
<div id="demo">我是一个盒子</div>
</body>
</html>

3.class选择器

跟id选择器一样，是根据class类名来选择元素。其样式定义为： .classname{ 样式 }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>css选择器</title>
   <style>
     div.demo{
         background: #aaaaaa;
         color:red;
         width:200px;
         height:200px;
      }
   </style>
</head>
<body>
<div class="demo">我是一个盒子</div>
</body>
</html>

4.属性选择器

根据某个属性的特征来选择，话不多说，上代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>css选择器</title>
   <style>
      div{
         background: #f73287;
         width:100px;
         height:200px;
         display: inline-block;
         margin:15px;
      }
      div[title="div1"]{
         background: #f76e07;
         width:100px;
         height:200px;
      }
   </style>
</head>
<body>
<span class="demo">
   <div title="div1">1212</div>
   <div title="div2">12121</div>
   <div >12121</div>
   <div title="a div">12121</div>
</span>
</body>
</html>

运行效果：