您的位置：首页 > Web前端 > CSS

css样式选择器的类型---lesson2

2017-06-07 00:31 429 查看

css样式选择器有4类：

1、类选择器，可以作用任何html元素

2、id选择器，仅用于一个html元素

3、标签选择器，用于相同的html标签元素

4、复合内容选择器，基于选择的内容

基本使用范例：

截图：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.zs-item {
font-size: 18px;
color: #F60;
}
#zs-first {
font-size: 24px;
color: #309;
}
a {
font-size: 14px;
color: #99F;
}
a:link {
color: #f00;
}
a:visited {
color: #0f0;
}
a:hover {
color: #00f;
}
a:active {
color: #FCF;
}
h1,h2,h3{
color:#309;
}

#item-btn button {
font-size: 18px;
font-weight: bold;
text-transform: none;
font-family: "Arial Black", Gadget, sans-serif;
font-style: normal;
line-height: normal;
background-color: #0CC;
width: auto;
float: left;
clear: none;
padding: 20px;
list-style-type: none;
}
</style>
</head>
<body>
<p class="zs-item">今天天气不错!
</p>
<p id="zs-first">天很蓝</p>
<em><strong><a href="http://www.baidu.com">去外面看看把 </a>
</strong></em>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<div id="item-btn">
<button>真无聊</button>
</div>
<button>真无聊2</button>
</body>
</html>

更加详细的可以参考下面图片设置规则：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航