基础选择器用法详解

最新推荐文章于 2024-04-03 17:58:14 发布

Ys@_yxl

最新推荐文章于 2024-04-03 17:58:14 发布

阅读量485

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_45817492/article/details/109524610

版权

基础选择器

基础选择器包括通配符选择器,标签选择器，id选择器，类选择器。

通配符选择器

可以设置所有的标签的样式。
基本语法：

*{属性1：属性值；属性2：属性值}

用法如下：


    /* 通配符选择器 */
       * {
           padding: 0;
           margin: 0;
       }

标签选择器

统一设置样式，不能差异设置。只能单独选一个或者多个标签，去设置样式。
基本语法：

标记名{属性1：属性值；属性2：属性值}

用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
   p {
           font-size: 12px;
       }

       div {
           width: 200px;
           height: 200px;
           margin: auto;
       }
}
 </style>
</head>
   <body>
   <p>  
   <div>
     <input type="text">
   </div>
   </body>
   </html>

ID选择器

id选择器只能调用一次。（结构类调用标签）
一个标签只能使用一个id选择器,一个标签可以同时用id选择器和类选择器。
基本语法：

#ID名{属性1：属性值；属性2：属性值}

用法如下：

/* id选择器 */
        #w1 {
            color: blueviolet;
        }

        #w2 {
            font-size: 20px;
        }


body{
   <p id="w1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, vero.</p>
       <p id="w2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, sunt?</p>
}

类选择器

一个标签可以有多个类名，（class属性中可以写多个类名，类名要用空格隔开，一个标签可以拥有多个类选择器的样式）
注意：在HTML中的每一个标签都可以同时有多个类名，在同一个界面是类名可以重复。
基本语法：

.类名{属性1：属性值；属性2：属性值}

用法如下：

.w3 {
            color: brown;
        }

 body{
<p class="w3">Deserunt neque optio enim aliquam qui obcaecati quo reprehenderit molestiae.</p>
 }

类名规范

不要以数字开头
以小写字母开头
不能以纯数字，中文命名
尽量不要用拼音
命名要简洁通俗易懂
可以使用- 或者 _

Ys@_yxl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础选择器用法详解

基础选择器基础选择器包括通配符选择器,标签选择器，id选择器，类选择器。通配符选择器可以设置所有的标签的样式。style{ /* 通配符选择器 */ * { padding: 0; margin: 0; }} 标签选择器统一设置样式，不能差异设置。只能单独选一个或者多个标签，去设置样式。styly{ p { font-size: 12px; }
复制链接

扫一扫