css中利用选择器选择器选取需设置样式的元素:
1、元素选择符:
<style>
div{
background-color: aqua;
color:red;
}
h1{
color:antiquewhite;
}
</style>
</head>
<body>
<div>11111111</div>
<div>111111111111</div>
<h1>22222222222</h1>
</body>
2、类选择器:
<style>
/*两个 样式 里都有作用于同一个div,在style里就近原则 */
.ibm{
background-color: blue;
color:brown
}
.qianfeng{
color:blueviolet;
background-color: antiquewhite;
}
</style>
</head>
<body>
<!-- aa,bb 为自己定义的,随便写 -->
<div>1111111</div>
<div class="aa bb">22222</div>
<div class="aa">3333333</div>
<div class="bb">4444444444</div>
<div>555555555</div>
</body>
3、id选择器:
<style>
#box1{
background-color: aqua;
}
#box2{
background-color: blanchedalmond;
}
#box3{
background-color: blueviolet;
}
</style>
</head>
<body>
<!-- 只能写一个id,具有唯一性 -->
<div id="box1">111111111111</div>
<div id="box2">22222222222222</div>
<div id="box3">3333333333333</div>
4、通配符(清边距):
<style>
*{
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
}
</style>
</head>
<body>
<h1>标题</h1>
<div>1111111111</div>
<ul>
<li>111111</li>
<li>22222222</li>
<li>3333333</li>
</ul>
</body>
5、群组选择器:
<style>
/* div{
background-color: yellow;
}
p{
background-color: yellow;
}
h1{
background-color: yellow;
} */
/* 群组选择器:提出公共代码,节约代码量 */
div,p,h1{
background-color: yellow;
}
div,.aaa,h1{
color: red;
}
</style>
</head>
<body>
<div>22222222222</div>
<p class="aaa">222222222222</p>
<h1>33333333333</h1>
</body>
6、后代选择器:
<style>
/*后代选择器,包含选择器
匹配原则:从右到左匹配选择*/
div p{
background-color: aqua;
}
p b{
background-color: beige;
}
</style>
</head>
<body>
<div>
<p>111111111111</p>
</div>
<p>22222222222</p>
<p>
<b>2222222222222222</b>
</p>
<div>
<b>3333333333333333</b>
</div>
</body>
7、伪类选择器:
<style>
/* 顺序不能改变 link,visited,hover,active*/
/* 访问前,初始状态 */
a:link{
color:yellow;
}
/* 访问之后 */
a:visited{
color:red;
}
/* 鼠标移上 */
a:hover{
color:orange;
}
/* 点击激活 */
a:active{
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
网友评论