快捷搜索: 长连接 前端 源码 pan

前端研习录(03)——CSS元素选择器、类选择器及ID选择器


一、CSS选择器类型

  重拾前端记忆,记录学习笔记,现在进入CSS选择器类型部分,CSS选择器分为全局选择器、元素选择器、类标签选择器、ID选择器四个类型,以下一一说明,为方便记录,采用内部样式进行举例。

1、全局选择器

  可与任何元素匹配,优先级最低,一般用于初始化,如下:

*{
          
   
    margin: 0;
    padding: 0;
}

2、元素选择器

  对某类元素进行统一设定,描述元素的共性,不是某一个元素的个性,一旦设置,相关html文档中所有该类型的元素都会通用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>

    <style>
        p{
            
     
            color: blue;
            font-size: 40px;
        }

        span{
            
     
            color: red;
            font-size: 60px;

        }
    </style>

</head>
<body>
    
    <h3>元素选择器</h3>

    <p>我是<span>标签</span>选择器1</p>
    <P>我是标签选择器2</P>
    <span>我是标签选择器3</span>

</body>
</html>

3、类标签选择器

  通过对标签指定class属性,再对某一类(class值一样)的标签定义CSS样式,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>

    <style>
        .one{
            
     
            color: red;
        }

        .two,.three{
            
     
            color: green;
        }
        .size{
            
     
            font-size: 50px;
        }
    </style>

</head>
<body>
    
    <h3>类标签选择器</h3>

    <p class="one">我是类标签选择器1</p>
    <P class="two size">我是类标签选择器2</P>
    <span class="three">我是类标签选择器3</span>

</body>
</html>
注意:CSS选择器选择时可指定多个类进行定义,用 “,” 隔开 对应标签中也可以指定多个class值,用空格隔开

4、ID选择器

  通过对标签指定ID属性,再对某一ID的标签定义CSS样式,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>

    <style>
        #one,#three{
            
     
            color: red;
        }

        #two{
            
     
            font-size: 40px;
        }
    </style>

</head>
<body>
    
    <h3>ID选择器</h3>

    <p id="one">我是ID选择器1</p>
    <P id="two">我是ID选择器2</P>
    <span id="three">我是ID选择器3</span>

</body>
</html>
注意:ID选择器也可指定多个ID进行统一设定样式 标签ID是唯一的

二、选择器优先级

选择器的优先级: 元素选择器权重为1; class选择器权重为10; id选择器权重为100; 内联样式选择器权重为1000

优先级从高到低:行内样式>id选择器>类选择器>元素选择器

经验分享 程序员 微信小程序 职场和发展