css叫做层叠样式表,用于修饰装饰网页的美观度。选择器是选取需设置样式的元素的模式
目录
(1)基本选择器
包括:标签选择器(标签名称获取)、ID选择器(获取的是id属性)、类选择器(获取的是class属性)、通用选择器(使用通配符)。<!--id属性是唯一的,class不唯一。选择器优先级依次为ID、class、标签、通配符-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#one{
color: aqua;
}
/*id选择器*/
.two{
color: blue;
}
/*类选择器*/
*{
color: blueviolet;
}
/*通用选择器*/
p{
color: crimson;
}
/*标签选择器 */
</style>
</head>
<body>
<p id="one" class="two">
一个标签
</p>
</body>
</html>
(2)包含选择
子代选择器:获取某个标签的第一级子标签。
后代选择器:获取某个标签里所有子标签。
分组选择(逗号选择器):可同时设置多个标签,使用逗号分割。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*子代选择器*/
div.list>ul{
border: 1px solid red;
}
/*后代选择器*/
.list li{
border: 1px solid blue;
}
/*逗号选择器*/
.one,.two,#f{
color: blueviolet;
width: 100px;
height: 100px;
background: brown;
border: 9px solid green;
}
</style>
</head>
<body>
<div class="one">第一个div</div>
<div class="two">第二个div</div>
<p id="f">段落标签</p>
<div class="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
(3)属性选择器
其中input[type="text"]是属性确切等于某个值,input[type*="a"]是关于属性包含某个值的,input[type^="a"]是关于属性以某个值开头的,input[type$="a"]是关于属性以某个值结尾的。其他情况如下图所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*选择标签存在的某个属性*/
div[title]{
border: 3px solid black;
}
/*属性确切等于某个值*/
input[type="text"]{
background: crimson;
}
/*属性包含某个值*/
input[type*="l"]{
background: chocolate;
}
/*+表示下一个标签*/
.msg +p{
border: 4px solid blue;
}
/*属性等于某个属性值*/
[title="一个标题"]{
color: blueviolet;
}
</style>
</head>
<body>
<div class="C">第一个div</div>
<div title="一个标题">第二个div</div>
<input type="text" name="" id="1" value="小明" >
<input type="email" name="" id="2" value="小红">
<input type="url" name="" id="3" value="星期一"><hr>
<div class="msg">又一个标签</div>
<p id="mgs1">一些文字</p>
</body>
</html>
(4)伪类选择器
伪类:同一个标签,根据不同的状态有不同的样式。
包括::link(对点击链接之前):visited(对点击链接之后):hover(鼠标键悬停于链接上方时)
:active(鼠标点击但不松手)<!--四种状态最好不改变-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*点之前*/
a:link{
color: blueviolet;
}
/*点之后*/
a:visited{
color: blue;
}
/*悬停*/
a:hover{
color: green;
}
/*点击不松手*/
a:active{
color: gold;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">点击链接</a>
</body>
(5)伪元素选择器
包括::before(在元素前面加伪元素)、 :after(在元素后面加伪元素)、::before、::after
<!--使用时一定要加上content属性,在content属性里加内容-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style type="text/css">
p:before{
content: "名字1";
color: red;
}
p:after{
content: "名字2";
color:green;
}
</style>
</head>
<body>
<p>另一些文字</p>
</body>
</html>
感谢观看,如有不足敬请指出!