CSS 选择器

CSS 选择器

1. 标签选择器<4优先级最低>

　　p{color: green;} a{color: green;} div{color: green;}

2. id选择器<1优先级最高>

　　#id{color: green;}  (注意id选择都需要加上#)

3. class选择器<3优先级>

　　.class{color: green;} (注意class选择需要加上.)

4. 属性选择器<2优先级>

　　input[type="text"]{color: green;}

5. 层级选择器

　　.c1 p a{color: green;}

6. 组合选择器　　

　　.c1,.c2{color: green;}

7. 伪类样式(修改背景颜色),选择鼠标指针浮动在其上的元素：

　　.c10:hover{color: green;}

8. 链接css文件

<head>
    <meta charset="UTF-8">
    <title>display_hide</title>
    <link href="commons.css" rel="stylesheet" />
</head>

 

CSS优先级

！important

id选择器

属性选择器

class选择器

标签选择器

 

css - Backgroud背景图片

    <style>
        .c1{
            color: chartreuse;
            background-image: url("image.jpg");
            background-repeat: no-repeat;
            background-position-x: 10px;
            background-position-y: 10px;
        }
    </style>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
　　　　 标签选择器
        p{
            color: rebeccapurple;}
　　　　 id选择器
        #image{color: blue}
　　　　 class选择器
        .c1{
            color: chartreuse;}
　　 　　属性选择器
        input[type="text"]{color: red;}
    </style>
</head>
<body>
    <div>
        <p>hello world</p>
        <p id="image">hello world</p>
        <p class="c1">hello world</p>
        <input type="text" name="helloworld" value="helloworld"/>
    </div>
</body>
</html>

　效果图：

css- Display: none

关键词： display:none  

document.getElementById("c1").classList.remove

document.getElementById("c1").classList.add

onclick="showDiv()"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display_hide</title>
    <!--<link href="commons.css" rel="stylesheet" />-->
    <style type="text/css">
        .c1{
            color: red;
            font-family: 微软雅黑;
            font-size: 20px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" name="出现吧" value="出现吧" onclick="showDiv()">
        <input type="button" name="消失吧" value="消失吧" onclick="hideDiv()">
        <div id="c1" class="c1 hide" >你好 中国</div>
        <script>
            function showDiv(){
                document.getElementById("c1").classList.remove("hide");
            }
            function hideDiv(){
                document.getElementById("c1").classList.add("hide");
            }
        </script>
    </div>
</body>
</html>
View Code

 

css- 边框(border)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .d1{
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
</body>
</html>
View Code

 

　

　　

posted @ 2017-04-08 16:24  Vincen_shen  阅读(157)  评论(0)    收藏  举报