2 CSS 选择器

css选择器：
一.基础选择器
-标签（元素）选择器

<!DOCTYPE html>
<html>
<head>
	<title>css的基础选择器</title>
    <link rel="stylesheet"  
    href="css/index.css">

</head>
<body>
	<div id="container">
		<h3>抖音</h3>
		<p>
			张磊清仓的也不光是中概股，也涉及到美国的互联网公司FAANG，
			对大热的苹果，FB，亚马逊张磊也是毫不留情， 也许对互联网
			赛道的兴趣减弱了
		</p>
		<img src="images/index01.png"
		alt="一个成功人士" title="帅哥"
		width="200">
		<p>
			高瓴资本对互联网兴趣减弱，全面All in投入生物制药。特别是美国的生物创新药
		</p>
		<img src="images/index02.png"
		alt="一个美女" title="老婆"
		width="200">
		
	</div>

</body>
</html>

-类（class）选择器
-id(身份证号)选择器

</head>
<body>
	<div id="container">
		<h3 class="active title">抖音</h3>
		<p>
			张磊清仓的也不光是中概股，<span class="active">也涉及到美国的互联网公司
			FAANG，</span>
			对大热的<span id='张磊'>苹果，FB，亚马逊张磊也是毫不留情， 也许对互联网
			赛道的兴趣减弱了</span>
		</p>
		<img src="images/index01.png"
		alt="一个成功人士" title="帅哥"
		width="200">
		<p>
			<span id='高领'>高瓴资本</span>对互联网兴趣减弱，全面All in投入生物制药。
			特别是美国的生物创新药
		</p>
		<img src="images/index02.png"
		alt="一个美女" title="老婆"
		width="200">
        <!--  -->
		<p class='lv big'>eddie</p>
		<p class="lv bold">eddie</p>
		<p class="big bold">eddie</p>
		
	</div>

</body>
</html>

　#index.css 代码

p{
    color: orange;
    font-size: 14px;
    font-weight: bold;
}

#张磊{
    color: blue;

}
#高领{
    color: green;
}

.active{
    color: black;

}
.title{
    font-size: 30px
}
.lv{
    color: green;
}
.big{
    font-size: 20px;
}
.bold{
    font-weight: bold;
}
/*
# id选择器名称{
    样式
}
*/

二.高级选择器
-后代选择器
-子代选择器
-组合选择器
-交集选择器
-伪类选择器

猜你喜欢