css选择器选择前几个？七种基本的css选择器
各位老铁们好，相信很多人对css选择器选择前几个都不是特别的了解，因此呢，今天就来为大家分享下关于css选择器选择前几个以及七种基本的css选择器的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
怎么提高CSS选择器效率
首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应的样式附于对应的HTML元素，达到美化页面的效果。Chris
Coyier曾在《Efficiently Rendering
CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行”。比如说：
div.nav> ul li a
上面的实例来说，浏览器首先会尝试在你的HTML标签中寻找“a”元素，接着在匹配“li和ul”，最后在去匹配“div.nav”。这就是前成所主的“选择器从右到左的原则”。
选择器的最后一部分，也就是选择器的最右边（在这个例子中就是a[title]部分）部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。
老版本的浏览器可以过滤掉不匹配的选择器，而直接匹配更高效的选择器。记得David Hyatt在《Writing efficient
CSS for use in the Mozilla
UI》说过：“这个关键选择器可以大大提高选择器的性能，少检查一个给定的元素规则，就可以更有效的将样式匹配给对应的HTML元素。”那么如何让关键选
择器更有效，性能化更高呢？其实很简单，主要把握一点“越具体的关键选择器，其性能越高”
那么什么样类型的选择器，其性能高？什么样的类型的选择器性能低呢？下面我们就针对两个问题来展开具体的学习。
CSS选择器的效率
如果你阅读了本站的有关于选择器类型的介绍的话，你对选择器并不会感到陌生。就算你没读过，我想CSS选择器不会让我们觉得是新东西，比如我们
常用的基本选择器“元素标签选择器div”、“id选择器#header”、“类选择器.class”，或者说我们很少见的伪类选择器“:focus”以
及更复杂的css3选择器“:nth-child”等等。
选择器有一个固有的效率，我们来看Steve Souders给排的一个顺序：
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul> li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）
上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最底。详细的介绍大家还可以点击Writing efficient CSS selectors。
综合上面的顺序，我们清楚的知道，id和类名用于关键选择器上效率是最高的，而CSS3的仿伪类和属性选择器，虽然使用方便，但其效率却是最低的。我们下面一起来看几个实例的对比：
div#myid
效率要比下面的高：
#myid div
第一种选择器比第二种选择器效率高，大家或许会问为什么？其实根据前面所介绍的我们就不难理解了，因为第一个选择器的“关键选择器”使用了
“ID选择器”，而第二个选择器的“关键选择器”使用的是“标签选择器”，对比下来，“ID选择器”效率高过“标签选择器”，所以说第一个选择器的效率要
高于第二个选择器。
在类名或ID名前面加上标签也会致使选择器效率变低的，比如说：
div
#myid
上面两个选择的效率要高于下面的选择器：
p#mydiv
p.myclassname
来自Mozilla的几点建议
David在《Use efficient CSS selectors》中介绍了几种书写高效率的CSS选择器的方法，下面我将他们移到这里来让大家参考：
写道
1避免普遍规则
2不要在ID选择器前加标签名或类名
3不要在类名选择器前加标签名
4尽可能使用具体的类别
5避免使用后代选择器
6标签分类规则中不应该包含一个子选择器
7子选择器的问题
8借助相关继承关系
9使用范围内的样式表
如果你不够清楚上面所讲的是什么，你可以点击这里，他会让你更容易了解这些规则。
我们应该怎么做
前面说“ID选择器”的效率是最高的，那么今天我们写样式，为了提高选择器的效率，是不是我们要在每一个文档的HTML元素中都加入ID名呢？
我想这样的做法是没有的。对于一个有语义的代码编写和如何提高性能，以前他们之间如何的平衡？其实这个选择器的效率低一点，对于大多数网站来说并不会有太
大的影响，但对于一个大型的网站，产生大量的流量这就会有差别了，也就很值得我们去对他进行优化。那么我们就很有必要的去了解他们是如何工作，比如说，一
般情况下哪些选择器的使用效率更高。来看两个简单的例子：
#myid
上面的选择器高于下面的：
p#myid
后者的写法我发现还是有很多朋友这样写，但我不知道你为什么需要在ID前面加一个标签？难道你同一个页面会有多个相同的ID不成？
我们接下来在来看一个实例，用于列表上的，比如说我们制作导航菜单的：
#nav a
高效于：
#nav li a
上面只是介绍了两个常碰到的实例，在这里说这两个实例，主要目的是让你在今后的编写样式时，能注意这方面的的细节，从而加快你的代码效率。
css选择器最常用的类型
css常用的四种选择器类型有：
标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
后代选择器：用空格隔开
1、标签选择器：选择器的名字代表html页面上的标签
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
举例：
<style type="text/css">
p{
font-size:14px;
}
</style>
<body>
<p>css</p>
</body>
再比如说，想让“学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>学完了安卓，继续学<span>前端</span>哟</p>
</body>
</html>
【总结】需要注意的是：
（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
2、ID选择器：规定用#来定义（名字自定义）
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。
举例：
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
border:3px dashed green;
}
</style>
</head>
然后在别处使用id来引用它：
<body>
<h2 id="mytitle">你好</h2>
</body>
id选择器的选择符是“#”。
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！
一个标签可以被多个css选择器选择：
比如，可以同时让标签选择器和id选择器作用于同一个标签。（用到了层叠）如下：
请点击输入图片描述
然后通过网页的审查元素看一下效果：
请点击输入图片描述
现在，假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
实际上，css有着非常严格的计算公式，能够处理冲突.
一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义
3、类选择器：规定用圆点.来定义
类选择器.针对想要的所有标签使用。优点：灵活。
css中用.来表示类。举例如下：
<style type="text/css">
.oneclass/*定义类选择器*/{
width:800px;
}
</style>
</head>
然后在别处使用class来引用它：
<body>
<h2 class="oneclass">你好</h2>
</body>
和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次
class属性的特点：
特性1：类选择器可以被多种标签使用。
特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下
<h3 class="classone classtwo">我是一个h3啊</h3>
而不能写成：
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>
类选择器使用的举例：
类选择器的使用，能够决定一个人的css水平。
应该注意：
（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
如：
<style type="text/css">
.lv{
color: green;
}
.da{
font-size: 30px;
}
.underline{
text-decoration: underline;
}
</style>
然后让每个标签去选取自己想要用的类选择器：
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>
问题：到底用id还是用class？
答案：尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，会认为一个有id的元素，有动态效果。
举例如下：
请点击输入图片描述
上图所示，css和js都在用同一个id，会出现不好沟通的情况。
记住这句话：类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用。
上面这三种选择器的区别：
标签选择器针对的是页面上的一类标签。
ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。
类选择器可以被多种标签使用。
4、后代选择器:定义的时候用空格隔开
对于E F这种格式，表示所有属于E元素后代的F元素，有这个样式。空格就表示后代。
后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
后代选择器，描述的是祖先结构。
看定义可能有点难理解，我们来看例子吧。
举例1：
<style type="text/css">
.div1 p{
color:red;
}
</style>
空格就表示后代。.div1 p表示.div1的后代所有的p。
这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。
举例：
<style type="text/css">
h3 b i{
color:red;
}
</style>
上方代码的意思是说：定义了<h3>标签中的<b>标签中的<i>标签的样式。
同理：h3和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。
效果：
请点击输入图片描述
或者还有下面这种写法：
请点击输入图片描述
上面的这种写法，<h3>标签和<i>标签并不是紧挨着的，但他们保持着一种后代关系。
还有下面这种写法：（含类选择器、id选择器都是可以的）
请点击输入图片描述
在开头说了：后代选择器，描述的是一种祖先结构。举个例子来说明这句话：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div div p{
color: red;
}
.div2{...}
.div3{...}
.div4{...}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<p>我是什么颜色？</p>
</div>
</div>
</div>
</div>
</body>
</html>
上面css中的div div p，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p元素的祖先列表：
请点击输入图片描述
CSS的几种选择器麻烦告诉我
：
标记选择器：定义html或者xhtml标签的通用CSS样式，定义语句前无前缀。例如：<style>h1{ color:red}</style><h1>This is test.</h1>
类别选择器：通过定义单独的class来定义对应样式，定义语句前缀为'.'。例如：<style>
.red{ color:red}</style><p class="red">xxxxxx</p>
ID选择器：通过对应html元素的标签ID来定义对应样式，定义语句前缀为'#'。例如：<style>#firstPar{ color:red}</style><p id="firstPar">xxxxxx</p>复合选择器:另外，可以通过这几种选择器组合定义复合选择器，例如：<style>p{ color:red
} p.firstPar{ color:blue
}.firstPar{ color:green}</style><p>普通段落</p>
<p class="firstPar">第一段</p>
<h1 class="firstPar">第一段标题</h1>全局选择器：如果想要一个页面中所有html标记使用同一种样式，可以定义一种全局选择器：'*'。例如：<style>*{ color:red; font-size:10px}</style><p>普通段落</p>
<p>第一段</p>
<h1>第一段标题</h1>后代选择器：可以通过嵌套的方式，对特殊位置的html标记进行声明。后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。
OK，关于css选择器选择前几个和七种基本的css选择器的内容到此结束了，希望对大家有所帮助。