首页问答社区 web技术正文

css选择器

2021-02-06 16:42:22 164 0

css中的选择器

css的作用就是修饰html，每个html标签都可以被css修饰，这时就需要使用选择器让css和被修饰的html标签产生关系，css中有4种选择器，分别是：基本选择器，属性选择器，伪元素选择器，层级选择器。

基本选择器

1.元素选择器

css选择器

语法：html的标签名{css属性}
示例：
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>元素选择器</title>

    <style type="text/css">
        span{color:red;font-size:88px; }
    </style>

    </head>
    <body>
        <span>我想学习css</span>
    </body>
    </html>

2.id选择器html中，每个标签都有一个id属性，id的值在一个html文件中是唯一的

语法：#id的值{css属性}
示例：

    <!DOCTYPE html>
    <html>
    <head>    
    <meta charset="UTF-8">
    <title>id选择器</title>

    <style type="text/css">
        #div1{background-color: orange;}
        #div2{background-color: pink;}
    </style>

    </head>
    <body>
        <div id="div1">css id选择器1</div>
        <div id="div2">css id选择器2</div>
    </body>
    </html>

3.class选择器

语法：.class的值{css属性}
示例：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>class选择器</title>

    <style type="text/css">
        .style1{background-color: orange}
        .style2{background-color: pink}
    </style>

    </head>
    <body>
        <div class="style1">css class选择器1</div>
        <div class="style1">css class选择器2</div>
        <div class="style2">css class选择器3</div>
    </body>
    </html>

选择器的优先级：id>class>元素

属性选择器

语法：基本选择器[属性='属性值']{css属性}示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>

<style type="text/css">
    input[type='text']{background-color: yellow}
    input[type='password']{background-color: pink}
</style>

</head>
<body>
    <form action="">
        <tr>
            <td>用户名：</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" /></td>
        </tr>
    </form>
</body>
</html>

伪元素选择器

常用的一般就是a标签的伪元素选择器语法： a标签一般有下面四种状态静止状态 a:link{css属性} 悬浮状态 a:hover{css属性} 触发状态 a:active{css属性} 完成状态 a:visited{css属性}

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>

<style type="text/css">
    a:link{color:blue}
    a:hover{color:red}
    a:active{color:yellow}
    a:visited{color:green}
</style>

</head>
<body>
    <a href="#">点我试试！</a>
</body>
</html>

层级选择器

语法：父级选择器子级选择器 …..示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>

<style type="text/css">
    #d1 .dd2 span{color:red}
</style>

</head>
<body>
    <div id="d1">
        <div class="dd1">
            <span>span1-1</span>
        </div>
        <div class="dd2">
            <span>span1-2</span>
        </div>
    </div>
    <div id="d2">
        <div class="dd1">
            <span>span1-1</span>
        </div>
        <div class="dd2">
            <span>span1-2</span>
        </div>
    </div>
</body>
</html>

css