选择器

一、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

相关阅读:
mac下webstorm自动编译typescript配置
 [转]Golang 中使用 JSON 的小技巧
 Element-UI 框架 el-scrollbar 组件
 npm读取config配置的优先级(yarn同理)
win, mac, linux 默认系统缓存目录
 yum离线安装rpm包
 常见网络摄像机(摄像头)的端口及RTSP地址
 sed命令在mac和linux下的区别
 canvas笔记备忘
 shell脚本：批量修改文件名(添加/删除文件名中字符)
原文地址：https://www.cnblogs.com/helloworld2019/p/10900304.html