本文介绍了CSS选择器的基本概念及应用，包括标签选择器、id选择器、类选择器、群组选择器和后代选择器，并展示了如何利用jQuery进行DOM操作。同时，通过实例演示了如何将CSS样式与JavaScript结合使用，实现网页动态效果。
<style>
/*标签选择器 通过标签名字找到某个元素*/
p{
font-size:30px;
}
/*id选择器 通过id值找到某个元素*/
#para{
font-weight:bold;
}
/*类选择器 通过class属性找到某个元素*/
.span{
color:red;
}
/*群组选择器 一些元素的集合*/
p,span{
background:green;
}
/*后代选择器 通过当前元素的后代元素(儿子,孙子)*/
ul li{
color:green;
}
/*通配选择器 匹配所有的元素*/
*{padding:0;margin:0}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
</script>
</head>
<body>
<p id="para">这是一个p元素</p>
<span class="span">这是span元素</span>
<ul>
<li>橘子</li>
<li>苹果</li>
<li>梨</li>
</ul>
</body>
/*标签选择器 通过标签名字找到某个元素*/
p{
font-size:30px;
}
/*id选择器 通过id值找到某个元素*/
#para{
font-weight:bold;
}
/*类选择器 通过class属性找到某个元素*/
.span{
color:red;
}
/*群组选择器 一些元素的集合*/
p,span{
background:green;
}
/*后代选择器 通过当前元素的后代元素(儿子,孙子)*/
ul li{
color:green;
}
/*通配选择器 匹配所有的元素*/
*{padding:0;margin:0}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
</script>
</head>
<body>
<p id="para">这是一个p元素</p>
<span class="span">这是span元素</span>
<ul>
<li>橘子</li>
<li>苹果</li>
<li>梨</li>
</ul>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
