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

CSS 选择器

2017-07-13 00:00 155 查看

CSS选择器包括元素选择器、id选择器、class选择器、属性选择器

1.元素选择器

用标签名作为选择器，选中所有相应的元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>css选择器</title>
<style>
div{
background: #aaaaaa;
color:red;
width:200px;
height:200px;
}
p{
font-size: 17px;
color:#000;
}
</style>
</head>
<body>
<div>我是一个盒子</div>
<p>我是一个段落</p>
</body>
</html>

2.id选择器

顾名思义，就是根据id来选择元素，其样式定义为：#id{ 样式 } ，id名不能重复。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>css选择器</title>
<style>
#demo{
background: #aaaaaa;
color:red;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="demo">我是一个盒子</div>
</body>
</html>

3.class选择器

跟id选择器一样，是根据class类名来选择元素。其样式定义为： .classname{ 样式 }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>css选择器</title>
<style>
div.demo{
background: #aaaaaa;
color:red;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="demo">我是一个盒子</div>
</body>
</html>

4.属性选择器

根据某个属性的特征来选择，话不多说，上代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>css选择器</title>
<style>
div{
background: #f73287;
width:100px;
height:200px;
display: inline-block;
margin:15px;
}
div[title="div1"]{
background: #f76e07;
width:100px;
height:200px;
}
</style>
</head>
<body>
<span class="demo">
<div title="div1">1212</div>
<div title="div2">12121</div>
<div >12121</div>
<div title="a div">12121</div>
</span>
</body>
</html>

运行效果：

title~='div': 选中属性值包含指定完整单词div的元素。

title^=’div‘: 选中title属性值以div开头的元素。

title$=’div‘: 选中title属性值以div结尾的元素。

title*=’div‘: 选中title属性值包含div的元素。

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

标签： css选择器 HTML基础

相关文章推荐

新的分享

章节导航