CSS-语法格式和基础选择器

CSS-语法格式

格式：

选择器{　　
    属性名1:属性值1;   
    属性名2:属性值2；
.....
}

选择器:筛选具有相似特征的元素

 注意：

  • 每一对属性需要使用；隔开，最后一对属性可以不加

基础选择器

分类：

1.基础选择器

  • id选择器:选择器具体的id属性值的元素 建议在一共html页面中id值唯一
    • 语法：#id属性值{}

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基础选择器1</title>
        <style>
            
            #div1{
                color: #FF0000;
            }
            #div2{
                color: dodgerblue;
            }
            
        </style>
        
    </head>
    <body>
        
        <div id="div1">奇闻说今古</div>
        <div id="div2">兮香化鬼狐</div>
    </body>
</html>
复制代码

运行结果

  • 元素选择器:选择具有由相同标签名称的元素
    • 语法:标签名称{}
    • 注意:id选择器优先级高于元素选择器

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基础选择器1</title>
        <style>
            
            #div1{
                color: #FF0000;
            }
            div{
                color: deeppink;
            }
            
        </style>
        
    </head>
    <body>
        
        <div id="div1">奇闻说今古</div>
        <div id="div2">兮香化鬼狐</div>
    </body>
</html>
复制代码

运行结果

  • 类选择器:选择具有相同的class属性值的元素
    • 语法: .class属性值{}

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基础选择器1</title>
        <style>
            
            #div1{
                color: #FF0000;
            }
            div{
                color: deeppink;
            }
            
            .cls1{
                color: darksalmon;
            }
            
        </style>
        
    </head>
    <body>
        
        <div id="div1">奇闻说今古</div>
        <div id="div2">兮香化鬼狐</div>
        
        <p class="cls1">张三打李四</p>
        <p class="cls1">李四骂王五</p>
    </body>
</html>
复制代码

运行结果

2.扩展选择器

  • 选择所有元素:
    • 语法:*{}

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>扩展选择器</title>
        
        <style type="text/css">
            *{
                color: greenyellow;
            }
        </style>
        
    </head>
    <body>
        <div>
            <p>奇闻说今古</p>
        </div>
        
        <p>兮香化鬼狐</p>
    </body>
</html>
复制代码

运行结果

  • 并集选择器:
    • 选择器1,选择器2{}

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>扩展选择器</title>
        
        <style type="text/css">
            div,p{
                color: darkblue;
            }
        </style>
        
    </head>
    <body>
        <div>
            <p>奇闻说今古</p>
        </div>
        
        <p>兮香化鬼狐</p>
    </body>
</html>
复制代码

运行结果

  • 子选择器:筛选选择器1元素下的选择器2元素
    • 语法:选择器1 选择器2{}

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>扩展选择器</title>
        
        <style type="text/css">
            div p{
                color: darkblue;
            }
        </style>
        
    </head>
    <body>
        <div>
            <p>奇闻说今古</p>
        </div>
        
        <p>兮香化鬼狐</p>
    </body>
</html>
复制代码

运行结果

  • 父选择器:筛选选择器2的父元素选择器1
    • 语法:选择器1>选择器2{}

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>扩展选择器</title>
        
        <style type="text/css">
            div > p{
                color: darkblue;
                border:1px solid;
            }
        </style>
        
    </head>
    <body>
        <div>
            <p>奇闻说今古</p>
        </div>
        
        <p>兮香化鬼狐</p>
    </body>
</html>
复制代码

运行结果

  • 属性选择器：选择元素名称，属性名=属性值的元素
    • 语法：元素名称[属性名=“属性值”]{}

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>扩展选择器</title>
        
        <style type="text/css">
            div > p{
                color: darkblue;
                border:1px solid;
            }
            
            input[type="text"]{
                border:5px solid;
            }
        </style>
        
    </head>
    <body>
        <div>
            <p>奇闻说今古</p>
        </div>
        <p>兮香化鬼狐</p>
        
        <input type="text">
        <input type="password">
    </body>
</html>
复制代码

运行结果

  • 伪选择器：选择一些元素具有的状态
    • 语法:元素状态{}
    • 如:a
      • 状态
        • link:初始化的状态
        • visited:被访问过的状态
        • active:正在访问状态
        • hover:鼠标悬浮状态

HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>扩展选择器</title>
        
        <style type="text/css">
            div > p{
                color: darkblue;
                border:1px solid;
            }
            
            input[type="text"]{
                border:5px solid;
            }
            
            a:hover{
                color: #FF1493;
            }
            
        </style>
        
    </head>
    <body>
        <div>
            <p>奇闻说今古</p>
        </div>
        <p>兮香化鬼狐</p>
        
        <input type="text">
        <input type="password">
        
        <br>
        <a href="#">点击</a>
    </body>
</html>
复制代码

运行结果

posted @ 2022-11-16 17:18  想见玺1面  阅读(69)  评论(0)    收藏  举报