css元素选择符
<!DOCTYPE html> <!--通用选择符-->
<html>
<head>
<style type="text/css">
*{
background-color:#5e4a25;
color:#eedc80;
}
</style>
<title>朱坚强威武霸气</title>
</head>
<body>
<h1>通用选择符*</h1>
<p>这里*表示全部</p>
<p>对所有元素起作用</p>
</body>
</html>
<!DOCTYPE html> <!--标记选择符-->
<html>
<head>
<style type="text/css">
p{
background-color:#5e4a25;
color:#eedc80;
}
</style>
<title>朱坚强威武霸气</title>
</head>
<body>
<h1>通用选择符*</h1>
<p>这里不起作用</p>
</body>
</html>
<!DOCTYPE html> <!--类选择符-->
<html>
<head>
<style type="text/css">
.s1{
background-color:#5e4a25;
color:#eedc80;
}
p.s2{
background-color:#d0dbf3;
color:#5e4a25;
}
</style>
<title>朱坚强威武霸气</title>
</head>
<body>
<h1 class="s1">类选择符，应用了样式s1</h1>
<h2>没有引用样式</h2>
<p class="s1">段落引用了样式s1</p>
<p class="s2">段落引用了样式s2</p>
<p>段落没有引用样式</p>
</body>
</html>
<!DOCTYPE html> <!--id选择符-->
<html>
<head>
<style type="text/css">
#s1{
background-color:#5e4a25;
color:#eedc80;
}
p#s2{
background-color:#d0dbf3;
color:#5e4a25;
}
</style>
<title>朱坚强威武霸气</title>
</head>
<body>
<h1 id="s1">id选择符，应用了样式s1</h1>
<h2>没有引用样式</h2>
<p id="s1">段落引用了样式s1</p>
<p id="s2">段落引用了样式s2</p>
<p>段落没有引用样式</p>
</body>
</html>
伪类选择符
<html> <!--dd效果不显示 显示的是p和儿子的-->
<head>
<style>
#dd #p{
background-color:blue;
color:yellow;
}
</style>
<title>朱坚强威武霸气</title>
</head>
<body>
<h1>后代选择器：</h1>
<div id="dd">
<span id="s">子s</span>
<p id="p">
子p
<span>子子s</span>
</p>
<div id="d">子d</div>
<p>选择器外部的P不受影响</p>
</div>
</body>
</html>
<html> <!--只有孙子的执行-->
<head>
<style>
div>p>span{
color:yellow;
}
</style>
<title>朱坚强威武霸气</title>
</head>
<body>
<h1>后代选择器：</h1>
<div id="dd">
<p>
大儿子
<span>大孙子</span>
<p>
大外孙
</p>
</p>
<p>
二儿子
<span>二孙子</span>
</p>
</div>
</body>
</html>结束。。。大大的END***
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
