您的位置：首页 > Web前端

从零开始前端学习[8]:初级选择器的使用

2017-09-17 20:47 543 查看

初级选择器的使用

通配符选择器

元素选择器

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>

显示效果如下：

以上部分只是一些最简单的选择器的使用，在后面可能会相互结合着使用，或者更复杂的选择器等。

欢迎访问博客

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： id选择器通配符选择器 class类选择器后代选择器初级选择器

相关文章推荐

新的分享

章节导航