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

Css3选择器(一)

2016-05-12 22:56 453 查看

一、元素选择器
1.最常见的选择器就是元素选择器，文档的元素就是最基本的选择器

例如：h1{} a{} ……

<p>HelloWorld</p>
p{
color: blue;
}

二、选择器分组
1.例子：
h1、h2{}

h1,h2{
color: red;
}

2.通配符：

*{}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<p>HelloWorld</p>
</body>
</html>

*{
color: red;
}
h1,h2{
font-size: 45px;
}

通常会使用通配符来取消内外边距

*{
margin: 0px;
padding: 0px;
}

三、类选择器
1.类选择器允许以一种独立于文档元素的方式来指定样式
例如：.class{}

.div{
color: red;
}

2.结合元素选择器

例如：a.class{}

a.div{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div">
HelloWorld
</div>

<a class="div">HelloWorld</a>
</body>
</html>

3.多类选择器

例如：.class.class{}

.p1{
color: blue;
}
.p2{
font-size: 30px;
}
.p1.p2{
font-style: italic;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="p1">This is my web page</p>
<p class="p2">This is my web page</p>
<p class="p1 p2">This is my web page</p>
</body>
</html>

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

标签： 选择器 Css3

相关文章推荐

新的分享

章节导航