CSS基本选择器

原创已于 2024-10-27 18:01:26 修改 · 539 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #css3 #前端

于 2024-10-27 17:57:59 首次发布

前端专栏收录该内容

7 篇文章

订阅专栏

基本选择器包括：

通配选择器
元素选择器
类选择器
ID选择器

1 通配选择器

作用：可以选中所有的HTML元素。

语法：

* {
     属性名:属性值;
 }

举例：

 * {
      /* 选中所有元素 */
      color: aqua;
      font-size: 40px;
  }

在清除样式时，回应很大帮助

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>01_通配选择器</title>
     <style>
         * {
             /* 选中所有元素 */
             color: aqua;
             font-size: 40px;
         }
     </style>
 </head>
 <body>
     <h1>古诗文网</h1>
     <br>
     <h2>出自唐代骆宾王的《咏鹅》</h2>
     <p>鹅，鹅，鹅，曲项向天歌。</p>
     <p>白毛浮绿水，红掌拨清波。</p>
 
 </body>
 </html>

2 元素选择器

作用：为页面中某种元素统一设置样式。

语法：

 标签名{
     属性名:属性值;
 }

举例：

 h1 {
    color: blue;
 }
 h2 {
    color: aquamarine;
 }
 p {
    color: brown;
 }

备注：元素选择器无法实现差异化设置，例如上面代码中，所有的p元素效果都一样。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>02_元素选择器</title>
     <style>
         h1 {
             color: blue;
         }
         h2 {
             color: aquamarine;
         }
         p {
             color: brown;
         }
     </style>
 </head>
 <body>
     <h1>古诗文网</h1>
     <br>
     <h2>出自唐代骆宾王的《咏鹅》</h2>
     <p>鹅，鹅，鹅，曲项向天歌。</p>
     <p>白毛浮绿水，红掌拨清波。</p>
     
 
     <h2>出自唐代李白的《静夜思》</h2>
     <p>床前明月光，疑是地上霜。</p>
     <p>举头望明月，低头思故乡。</p>
 
 </body>
 </html>

3 类选择器

作用：根据元素的class值，来选中某些元素。

语法：

.类名 {
     属性名:属性值;
 }

举例：

/* 选中页面中所有类名为test01的元素 */
         .test01 {
             color: rgb(9, 161, 161);
         }
         .test02{
         /* 选中页面中所有类名为test02的元素 */
             color: rgb(78, 233, 181);
         }
         .big {
             font-size: 60px;
         }

注意点：

元素的class属性值不带.，但CSS的类选择器要带 .。
class值，是我们定义的，按照标准：不要使用纯数字，不要使用中文，尽量使用英语与数字的组合，若由多个单词构成，使用 —做连接，例如：left—menu，且命名要有意义。

一个元素不能写多个class属性，下面是错误示例：

 <p class="test01" class="big">鹅，鹅，鹅，曲项向天歌。</p>

一个元素的class属性，能写多个值，要用空格隔开，例如
```
 <p class="test01  big">鹅，鹅，鹅，曲项向天歌。</p>
```

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>03_类选择器</title>
     <style>
         /* 选中页面中所有类名为test01的元素 */
         .test01 {
             color: rgb(9, 161, 161);
         }
         .test02{
         /* 选中页面中所有类名为test02的元素 */
             color: rgb(78, 233, 181);
         }
         .big {
             font-size: 60px;
         }
     </style>
 </head>
 <body>
     <h1>古诗文网</h1>
     <br>
     <h2>出自唐代骆宾王的《咏鹅》</h2>
     <p class="test01  big">鹅，鹅，鹅，曲项向天歌。</p>
     <p class="test01">白毛浮绿水，红掌拨清波。</p>
     
 
     <h2>出自唐代李白的《静夜思》</h2>
     <p class="test02">床前明月光，疑是地上霜。</p>
     <p class="test02">举头望明月，低头思故乡。</p>
 </body>
 </html>

4 ID选择器

作用：根据元素的id属性值，来精准的选中某个元素。

语法：

 #id值{
     属性名:属性值;
 }

举例：

  /* 选中id值为er的那个元素 */
        #er {
         color: blue;
        }

注意点：

id属性值：尽量由字母，数字，下划线，短杆组成，最好以字母为开头，不要包含空格，区分大小写。
一个元素只能拥有一个id属性值，多个元素的id属性值不能相同。
一个元素可以同时拥有id和class属性。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>04_ID选择器</title>
     <style>
         /* 选中id值为er的那个元素 */
        #er {
         color: blue;
        }
        #jing {
         color: red;
        }
        .libai {
         font-size: 35px;
        }
     </style>
 </head>
 <body>
     <h1>古诗文网</h1>
     <br>
     <h2 id="er">出自唐代骆宾王的《咏鹅》</h2>
     <p>鹅，鹅，鹅，曲项向天歌。</p>
     <p>白毛浮绿水，红掌拨清波。</p>
     
 
     <h2 id="jing" class="libai">出自唐代李白的《静夜思》</h2>
     <p>床前明月光，疑是地上霜。</p>
     <p>举头望明月，低头思故乡。</p>
 
 </body>
 </html>

5 基本选择器总结

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式。	* { color: aqua }
元素选择器	选中所有同种标签，但是不能差异化选择	h1 {color: blue}
类选择器	选中所有特定类名（class）的元素——使用频率很高	.big {font-size: 60px}
ID选择器	选中特定`id`值的那个元素（唯一的）	#er {color: blue}