css选择器

1、id选择器

如以下程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
        background-color: #2459a2;
        height: 48px;
        }
    </style>
</head>
<body>
    <div id="i1">abcd</div>
</body>
</html>

id选择器中，标签的id是唯一的，不允许重复

执行结果如下：

2、class选择器

一般使用class选择器，程序如下：

class选择器，class不仅限于一个标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
        background-color: red;
        height: 48px;
        }
    </style>
</head>
<body>
    <div class="c1">abcd</div>
    <div class="c1">9876</div>
</body>
</html>

3、div选择器

div标签中的内容显示该属性

　　<style>
        div{
        background-color: blue;
        height: 48px;
        }      
    </style>

    <div id="i1">abcd</div>
    <div class="c1">abcd</div>

4、层级选择器

以空格分开，如下：

span div与.c1 div效果一样，都是将8888背景渲染

　　<style>
        span div{
        background-color: blue;
        height: 48px;
        }
        
        .c1 div{
        background-color: blue;
        height: 48px;
        }
    </style>
   
    <span class="c1">qwer<div>8888</div>tyui</span>

5、组合选择器：

以逗号分开，如下：

 </style>
    .c1,.c2,.c3{
        background-color: red;
        height: 48px;
        }
 </style>

 <div class="c1">efgh</div>
 <div class="c2">ijk</div>
 <div class="c3">lmn</div>

这时三个div背景全是红色。

6、属性选择器：

input[属性]{渲染背景}

<style>   
     input[type='text']{ width:100px; height:200px; }
 </style>
 
 <input type="text" name="user"/>
或者
 <style>
    .c1[type=‘text’]{ width:100px; height:100px; }
 </style>
    
 <input class="c1"  type="text" />

 

posted @ 2020-02-19 18:00  凸凸yolotheway  阅读(132)  评论(0)  编辑  收藏  举报