选择器

一、css选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/hello.css" type="text/css" rel="stylesheet" />
        
    </head>
    <body>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
    </body>
</html>
View Code

 二、id选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/hello.css" type="text/css" rel="stylesheet" />s
    </head>
    <body>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span><br/>
        <span id="style2">这是一则非常重要的新闻</span><br/>
        
    </body>
</html>
View Code

三、html选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/hello.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        你好北京！
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span><br/>
        <span id="style2">这是一则非常重要的新闻</span><br/>
        
    </body>
</html>
View Code

hello.css

.hello{
    font-weight: bold;
    font-size: 20px;
    background: pink;
}

#style2{
    font-weight: 30px;
    background: gold;
}
body{
    color: purple;
}
View Code

当一个元素被id选择器与类选择器html选择器修饰

优先级是：id>类>html

 

综合案例;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/hello.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        你好北京！
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span>
        <span class="hello">新闻一</span><br/>
        <span id="style2">这是一则非常重要的新闻</span><br/>
        <a href="h1.html">goto souhu</a><br/>
        <a href="h3.html">goto souhu</a><br/>
        <a href="h2.html">goto souhu</a><br/>
    </body>
</html>
View Code
.hello{
    font-weight: bold;
    font-size: 20px;
    background: pink;
}

#style2{
    font-weight: 30px;
    background: gold;
}
body{
    color: purple;
}
a:link{
    color: black;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
    color: black;
}
a:visited{
    color: red;
}
View Code

 四、通配符选择器

 

.hello{
    font-weight: bold;
    font-size: 20px;
    background: pink;
}

#style2{
    font-weight: 30px;
    background: gold;
}
body{
    color: purple;
}
a:link{
    color: black;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
    color: black;
}
a:visited{
    color: red;
}
/*使用通配符选择器*/
*{
    /*margin: 0px;*/
    /*padding: 0px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 0px;*/
    margin: 100px 10px 0px 10px;/*如果margin给了四个值则表示上 右 下 左*/
    /*三个值 上、左右、下*/
    padding: 0px;/*规范与margin一样*/
}
View Code

 

posted @ 2019-05-21 16:13  Hello_World2020  阅读(169)  评论(0)    收藏  举报