cssx选择器
<!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>
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>
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>
hello.css
.hello{ font-weight: bold; font-size: 20px; background: pink; } #style2{ font-weight: 30px; background: gold; } body{ color: purple; }
当一个元素被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>
.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; }
原文：https://www.cnblogs.com/helloworld2019/p/10900304.html