css选择器

css中的选择器

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

基本选择器

1.元素选择器

语法: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>