03-CSS选择器

1. 标签选择器

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <meta charset="utf-8">
    <style>
        /*标签选择器跟html标签名一样*/
        h2{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>  
    <h2>CSS样式</h2>
    <h2>CSS样式</h2>  
</body>
</html>

这里写图片描述

2. 类选择器

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <meta charset="utf-8">
    <style>
        /*类选择器，需要在html标签中定义类*/
        .red{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>  
    <h2 class="red">CSS样式</h2>
    <h2>CSS样式</h2>  
</body>
</html>

这里写图片描述

3. id选择器

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <meta charset="utf-8">
    <style>
        /*id选择器，需要在html标签中定义id*/
        #blue{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>  
    <h2>CSS样式</h2>
    <h2 id="blue">CSS样式</h2>    
</body>
</html>

这里写图片描述

4. 扩展选择器

1. 通配选择器
* 表示所有的html元素，初始化操作
<style>
    *{
        color: red;
        font-size: 30px;
    }
</style>

2. 属性选择器
选择器[html属性名]{
    属性：属性值;
}
input[type]{
    border:1px solid blue;
}

选择器[属性=属性值]{
    属性：属性值;
}
input[name='username']{
    border:1px solid blue;
}

选择器[属性： ^=某些字符]{
    属性:属性值;
}
/*以p开头字段的input标签*/
input[name ^='p']{
    border:1px solid blue;
}

选择器[属性: $=某些字符]{
    属性：属性值;
}
/*以e结尾字段的input标签*/
input[name $='e']{
    border:1px solid blue;
}

选择器[属性 *=某些字符]{
    属性：属性名;
}
/*含有e字符字段的input标签*/
input[name *='e']{
    border:1px solid blue;
}

3. 关系选择器
/*选择器1后面所有选择器2，选择器之间用空格隔开*/
选择器1 选择器2{
    属性:属性值;
}

/*选择选择器1的子元素是选择器2*/
选择器1 > 选择器2{
    属性:属性值;
}

/*选择选择器1的兄弟元素的选择器2*/
选择器1 ~ 选择器2{
    属性:属性值;
}

/*选择选择器1中第一个选择器2*/
选择器1 + 选择器2{
    属性:属性值;
}

4. 组合选择器
/*为选择器1，选择器2，选择器3设置相同的样式*/
选择器1,选择器2,选择器3{
    属性:属性值;
}

5. 伪类选择器
:link 设置链接的样式
:hover 设置鼠标移动该元素的样式
:active 设置鼠标点击时的样式
:visited 设置鼠标点击后的样式
:focus  设置焦点样式

6. 结构性伪类选择器
:first-child 选择ul中第一个子元素
:last-child 选择ul中最后一个子元素
:nth-child(n) 选择ul中第n个子元素

1. 标签选择器

2. 类选择器

3. id选择器

4. 扩展选择器

猜你喜欢