初级选择器的使用
- 通配符选择器
- 元素选择器
- ID选择器
- class类选择器
- 类选择器与ID选择器之间的区别
- 后代选择器
提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
通配符选择器
*(星号)会匹配所有的元素,针对所有的元素设置,使用方式如下所示
*{margin:0px padding:0px}
这个是在我们清除浏览器默认样式的时候进行使用的,一般情况下,使用通配符选择器的场景并不是很多
元素选择器
元素选择器是指用标签名字来进行选择:如下使用方法
div{width:200px;height:200px,background:red;}
span{color:red;font-size:10}
p{height:100px;width:100px;}等
ID选择器
id选择器主要指的是通过标签的id来进行标签的选择,首先要给标签赋予一个id
<div id="main_div"></div>
然后在css样式中,通过#ID的形式,来进行选择,如:
<style text="css/html">
#main_div{width:100px;height:100px}
</style>
提示:ID选择器在与js相结合的时候,会使用的比较多
类选择器
类选择器的使用方式类似ID选择器,首先要给标签一个指定的类,然后通过.(点操作符)来进行类名的选取如:
<div class="main"></div>
然后在style样式中去进行类的选择
<style text="css/html">
.main{
width:100px;
height:100px;
}
</style>
提示:类选择器一般情况下在样式实现的时候会比较的多,主要是因为html标准支持一个标签可以拥有多个类,但是不支持多个ID
类选择器与ID选择器之间的区别
区别:
- ID选择器中同名ID在文档中必须是唯一的,只能够使用一次(相当于大名),同名的class类选择器可以多次使用,也就是可以定义一个类来实现一个样式复用,但是ID选择器则不行
- 关于权重(优先级),ID选择器的优先级会大于class类选择器,如果一个标签既有ID选择器,又有类选择器,那么这个时候就会优先ID选择器选择
后代选择器
后代选择器,顾名思义,也就是一个父级标签下面的所有后代,既可以包括这个标签的子集后代,也可包含这个子集后代的后代,即选择这个标签下所有指定元素
如:
<div>
<ul>
<li>
第一个li
</li>
<li>
第二个li
</li>
</ul>
</div>
选择,先去选择div,然后选择div下面的ul然后再次选择到ul下面的li:
<style text="text/css">
div ul li{width:100px;height:100px;background:blue;}
</style>
以上的选择器的使用都是最简单的使用方式,在使用的过程中往往会相互结合使用,即可能会出现
.类名 #id名 标签元素类型{}
当然这个只是一个例子,因为这样在浏览器在效率上面会高一点,它会从父级元素一直往下去寻找
简单的实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ul, ol {
margin: 0;
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
.main{
width: 1200px;
background-color: rgba(44,44,44,0.5);
margin: 10px auto;
}
#id_selector{
width: 100px;
height:100px;
background-color: green;
}
.class_selector{
width: 200px;
height: 200px;
background-color: red;
}
ul li{
width: 200px;
height: 30px;
background-color: #84a3e3;
margin-top:5px;
}
</style>
</head>
<body>
<div class="main">
<div id="id_selector">
id选择器使用
</div>
<div class="class_selector">
类选择器
</div>
<ul>
<li>后代选择器1</li>
<li>后代选择器2</li>
<li>后代选择器3</li>
</ul>
</div>
</body>
</html>
显示效果如下:
以上部分只是一些最简单的选择器的使用,在后面可能会相互结合着使用,或者更复杂的选择器等。