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

来源：互联网发布：兴登堡号飞艇数据编辑：程序博客网时间：2024/06/06 05:58

初级选择器的使用

通配符选择器
元素选择器
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>

显示效果如下：

初级选择器的使用

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

欢迎访问博客

阅读全文

1 0