章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
一:什么是css选择器?
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。
二:css3中5种常见的基本选择器
css3中的选择器种类有很多,下面介绍的是5种常见的基本选择器:通配选择器,类选择器,元素选择器, ID选择器和群组选择器。
1.通配符选择器(所有浏览器支持)
通用选择器用*来表示,用来选择所有元素,,也可以选择某个元素下的所有元素;
*{marigin: 0;
padding: 0;
font-size: 14px;
}
上面代码大家在reset样式文件中看到的肯定不少,他所表示的是,所有元素的margin和padding都设置为0,字体大小都设置为14px,另外一种就是选择某个元素下的所有元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border:1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html>
效果图:
我们可以看到在demo元素里的三个子元素div,p,span都是分别没有设置css样式的,但只要我们设置了demo元素下的所有元素的统一样式,那么demo元素里的三个子元素div,p,span就会出现样式。
对了,在这里说一下,我目前是在职web前端开发,如果你现在正在学习前端,了解前端,渴望成为一名合格的web前端开发工程师,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,都可以随时关注并私信我:前端,我都会根据大家的问题给出针对性的建议,缺乏基础入门的视频教程也可以直接来找我,我这边有最新的web前端基础精讲视频教程, 还有我做web前端技术这段时间整理的一些学习手册,面试题,开发工具,PDF文档书籍教程,都可以直接分享给大家。
2.类选择器 (所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。)
类选择器根据类名来选择,前面以”.”来标志,是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">类选择器</div>
</body>
</html>
效果图:
3.元素选择器(所有浏览器支持)
元素选择器(标签名选择器),是css3选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等下下面例子中选择了span元素,并设置了字体颜色为红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="demo">
<p>这里使用<span>元素选择器</span>改变了样式</p>
</div>
</body>
</html>
效果图:
4.ID选择器(所有浏览器都支持)
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#demo)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
</html>
效果图:
ID选择器有几个地方需要特别注意:
第一:一个文档中一个id选择器只充许使用一次,因为id在页面中是唯一的;
第二,id选择器不能像类选择器一样多个合并使用,一个元素只能命名一个id名;
第三,可以在不同的文档中使用相同的id名,比如说在“test.html”中给h1定了“#important”,也可给“test1.html”中定义p的id为"#important",但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。
5.群组选择器(所有浏览器都支持)
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器,这一点大家在使用中千万要小心加小心。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
p,li{
color: blue;
}
.demo1,.demo2{
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<p>这里是一个段落!</p>
<ul><li>列表</li></ul>
<a href="#" class="demo1">链接一</a><br>
<span class="demo2">文字文字!</span>
</div>
</body>
</html>
效果图:
以上就是什么是css选择器?css3中5种常见的基本选择器(代码实例)的详细内容,更多请关注我!!!
作者:程序猿的生活
链接:https://zhuanlan.zhihu.com/p/152153067
前在用fourinone分布式框架的时候需要做一个Web页面,可以借助fourinone的api展示各存储节点的树形目录结构。我最初的思路是利用递归扫面各节点下的文件和目录,并将其存储在数据库。然后从数据库取出展示。额,好像跑题了... 不管了,总之每个节点的文件和目录的数量太大,所以只能是找一个可以异步加载并显示树形目录结构的框架。于是我百度到了zTree。 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
今天我们先来学习一下如何静态加载数据并显示出树形目录结构。
首先,zTree是基于jQuery的,所以先在网页中引入jq,然后引入zTree的js文件和css样式文件。
<link rel="stylesheet" href="css/metroStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
然后创建一个显示区域
<div id="demotree" style="margin-left:230px;margin-top:50px"> <!--定义div来放树-->
<ul id="treeDemo" class="ztree"></ul> <!--树的本质是无序列表,绑定数据时根据数据的关系添加li或ul-->
</div>
然后定义json格式的数据
var treeNodes=[ {"id":"1","name":"Demo1","isParent":"1","pId":"0"},
{"id":"2","name":"Demo2","isParent":"1","pId":"1"},
{"id":"3","name":"Demo3","isParent":"1","pId":"1"},
{"id":"4","name":"Demo4","isParent":"0","pId":"2"},
{"id":"5","name":"Demo5","isParent":"0","pId":"2"},
{"id":"6","name":"Demo6","isParent":"1","pId":"3"},
{"id":"7","name":"Demo7","isParent":"0","pId":"1"},
{"id":"8","name":"Demo8","isParent":"0","pId":"2"},
{"id":"9","name":"Demo9","isParent":"0","pId":"3"},
{"id":"10","name":"Demo10","isParent":"0","pId":"6"},
{"id":"11","name":"Demo11","isParent":"0","pId":"1"}
];//id是节点id,pId是父节点id,通过他们的关系来绑定
接着对树进行设置
var setting={//树的设置
//外观
view: {
showIcon: true, //设置是否显示节点图标
showLine: true, //设置是否显示节点与节点之间的连线
fontCss : {color:"black",size:30}//字体颜色和大小
},
//数据类型
data: {
simpleData: {
enable: true, //设置是否启用简单数据格式(json格式)
}
},
//回调事件
callback: {//这里可以做很多回调,比如点击,点击前等等,在下一篇的动态加载数据中会介绍
}
};
最后是对树进行初始化
var zTree;
$(document).ready(function(){//全部加载完后执行
$.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化树
});
效果图如下
全部代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>zTreeDemo</title>
<link rel="stylesheet" href="css/metroStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
</head>
<body align="center" >
<div id="demotree" style="margin-left:230px;margin-top:50px"> <!--定义div来放树-->
<ul id="treeDemo" class="ztree"></ul> <!--树的本质是无序列表,绑定数据时根据数据的关系添加li或ul-->
</div>
</body>
<script type="text/javascript">
var treeNodes=[ {"id":"1","name":"Demo1","isParent":"1","pId":"0"},
{"id":"2","name":"Demo2","isParent":"1","pId":"1"},
{"id":"3","name":"Demo3","isParent":"1","pId":"1"},
{"id":"4","name":"Demo4","isParent":"0","pId":"2"},
{"id":"5","name":"Demo5","isParent":"0","pId":"2"},
{"id":"6","name":"Demo6","isParent":"1","pId":"3"},
{"id":"7","name":"Demo7","isParent":"0","pId":"1"},
{"id":"8","name":"Demo8","isParent":"0","pId":"2"},
{"id":"9","name":"Demo9","isParent":"0","pId":"3"},
{"id":"10","name":"Demo10","isParent":"0","pId":"6"},
{"id":"11","name":"Demo11","isParent":"0","pId":"1"}
];//id是节点id,pId是父节点id,通过他们的关系来绑定
var setting={//树的设置
//外观
view: {
showIcon: true, //设置是否显示节点图标
showLine: true, //设置是否显示节点与节点之间的连线
fontCss : {color:"black",size:30}//字体颜色和大小
},
//数据类型
data: {
simpleData: {
enable: true, //设置是否启用简单数据格式(json格式)
}
},
//回调事件
callback: {
}
};
var zTree;
$(document).ready(function(){//全部加载完后执行
$.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化树
});
</script>
</html>
最后谢谢大家观看,下一篇是利用ajax和zTree动态加载树形目录结构,实现点击一个文件夹加载一层。
对了!还有,zTree可以到它的官网下载,里面也包含了jQuery。再见!
lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery入口函数</title>
<!--1. 使用CDN网络地址-->
<!-- <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>--> <script src='js/jquery/jquery.min.js'></script>
<script type='text/javascript'>
/* jquery相关入口函数 */
$(document).ready(function(){
alert('jquery的入口函数')
})
$(function(){
console.log('jquery的入口函数简写版')
})
$(function(){
/* 根据id找 html包含全部内容 text只是文本内容 */
console.log($('#t').html())
console.log($('#t').text())
/* 根据标签找相关数据长度 */
var fruit=$('li')
for(var j=0;j<=fruit.length;j++){
console.log(fruit[j])
}
console.log($('li').length)
/* 根据类名找相关数据的长度 */
var all=$('.fruit')
for(var i=0;i<=all.length;i++){
console.log(all[i])
}
console.log($('.fruit').length)
})
/* js和jquery之间的相互转化 */
$(function(){
/* javascript格式---->jquery格式的转化 */
console.log(document.getElementById("t").innerHTML)
var t1=document.getElementById("t")
console.log($(t1))
console.log($(t1).html())
console.log($(t1).text())
/* jquery格式----javascript格式之间进行转化 */
console.log($('#t')[0].innerHTML)
console.log($('#t').get(0).innerHTML)
console.log($('.fruit')[2].innerText)
})
/* 层级选择器 */
$(function(){
/* 空格表示包含的所有 */
console.log($('.div1 h1').length)
//> 表示下级
console.log($('.div1 > h1').length)
for (var i=0;i<=$('.div1 > h1').length;i++){
console.log($('.div1 > h1')[i])
}
// aaa相邻的下一个
console.log($('.aa + h1').html)
// aaa的所有兄弟
console.log($('.aa ~ h1').length);
})
</script>
</head>
<body>
<!-- 层级选择器 树状结构 父级 子级 兄弟级 -->
<div class='div1'>
<h1 class='aa'>aaaaaaaa</h1>
<h1>bbbbbbbb</h1>
<div class='div2'>
<h1>11111111</h1>
<h1>22222222</h1>
<h1>33333333</h1>
</div>
<h1>cccccccc</h1>
</div>
<h1 id='t'><i>标题</i></h1>
<ul>
<li class='fruit'>苹果</li>
<li class='fruit'>香蕉</li>
<li class='fruit'>橘子</li>
<li class='fruit'>梨子</li>
<li class='fruit'>葡萄</li>
</ul>
</body>
</html>
*请认真填写需求信息,我们会在24小时内与您取得联系。