CSS笔记：选择器的基本应用

目录

css语法格式

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

基础选择器

扩展选择器

css语法格式
选择器 {
        属性名1:属性值1;
        属性名2:属性值2;
        ...
    }
注意：

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

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

基础选择器

id选择器

选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法：#id属性值{}

元素选择器

选择具有相同标签名称的元素

语法： 标签名称{}

注意：id选择器优先级高于元素选择器

类选择器

选择具有相同的class属性值的元素

语法：.class属性值{}

注意：类选择器选择器优先级高于元素选择器

案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>

    <style>

        .cls1{

            color: blue;
        }

        div{
            color:green;
        }


        #div1{
               color: red;
           }

    </style>
</head>
<body>
    <div id="div1">传智播客</div>
    <div class="cls1">黑马程序员</div>

    <p class="cls1">传智学院</p>

</body>
</html>
扩展选择器

选择所有元素

语法： *{}

并集选择器

语法：选择器1,选择器2{}

子选择器

筛选选择器1元素下的选择器2元素

语法： 选择器1 选择器2{}

父选择器

筛选选择器2的父元素选择器1

语法： 选择器1 > 选择器2{}

属性选择器

选择元素名称，属性名=属性值的元素

语法： 元素名称[属性名="属性值"]{}

伪类选择器

选择一些元素具有的状态

语法： 元素:状态{}

如： <a>

状态：

link：初始化的状态

visited：被访问过的状态

active：正在访问状态

hover：鼠标悬浮状态

案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>

    <style>
        div p{
            color:red;
        }

        div > p {
            border: 1px solid;
        }

        input[type='text']{
            border: 5px solid;
        }

        a:link{
            color: pink;
        }

        a:hover{
            color: green;
        }

        a:active{
            color: yellow;
        }

        a:visited{
            color: red;
        }

    </style>
</head>
<body>

    <div>
        <p>传智播客</p>
    </div>
    <p>黑马程序员</p>

<div>aaa</div>

    <input type="text" >
    <input type="password" >

    <br>    <br>    <br>

    <a href="#">黑马程序员</a>

</body>
</html>
【注】：参考黑马CSS教程

id选择器	选择具体的id属性值的元素.建议在一个html页面中id值唯一语法：#id属性值{}
元素选择器	选择具有相同标签名称的元素语法：标签名称{} 注意：id选择器优先级高于元素选择器
类选择器	选择具有相同的class属性值的元素语法：.class属性值{} 注意：类选择器选择器优先级高于元素选择器

选择所有元素	语法： *{}
并集选择器	语法：选择器1,选择器2{}
子选择器	筛选选择器1元素下的选择器2元素语法：选择器1 选择器2{}
父选择器	筛选选择器2的父元素选择器1 语法：选择器1 > 选择器2{}
属性选择器	选择元素名称，属性名=属性值的元素语法：元素名称[属性名="属性值"]{}
伪类选择器	选择一些元素具有的状态语法：元素:状态{} 如： <a> 状态： link：初始化的状态 visited：被访问过的状态 active：正在访问状态 hover：鼠标悬浮状态

CSS笔记：选择器的基本应用

css语法格式

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

基础选择器

扩展选择器

猜你喜欢