html最常用的三种选择器七种基本的css选择器

编程之家2026-07-03970次浏览

大家好，关于html最常用的三种选择器很多朋友都还不太明白，今天小编就来为大家分享关于七种基本的css选择器的知识，希望对各位有所帮助！

css选择器最常用的类型

css常用的四种选择器类型有：

标签选择器：针对一类标签

ID选择器：针对某一个特定的标签使用

类选择器：针对你想要的所有标签使用

后代选择器：用空格隔开

1、标签选择器：选择器的名字代表html页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：

font-size:14px;

}

</style>

<body>

</body>

再比如说，想让“学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

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>

#mytitle

{

border:3px dashed green;

}

</style>

</head>

然后在别处使用id来引用它：

<body>

</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中用.来表示类。举例如下：

.oneclass/*定义类选择器*/{

width:800px;

}

</style>

</head>

然后在别处使用class来引用它：

<body>

</body>

和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点：

特性1：类选择器可以被多种标签使用。

特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

<h3 class="classone classtwo">我是一个h3啊</h3>

而不能写成：

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

类选择器使用的举例：

类选择器的使用，能够决定一个人的css水平。

应该注意：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

如：

.lv{

color: green;

}

.da{

font-size: 30px;

}

.underline{

text-decoration: underline;

}

</style>

然后让每个标签去选取自己想要用的类选择器：

问题：到底用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：

.div1 p{

color:red;

}

</style>

空格就表示后代。.div1 p表示.div1的后代所有的p。

这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。

举例：

h3 b i{

color:red;

}

</style>

上方代码的意思是说：定义了<h3>标签中的<b>标签中的<i>标签的样式。

同理：h3和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。

效果：

请点击输入图片描述

或者还有下面这种写法：

请点击输入图片描述

上面的这种写法，<h3>标签和<i>标签并不是紧挨着的，但他们保持着一种后代关系。

还有下面这种写法：（含类选择器、id选择器都是可以的）

请点击输入图片描述

在开头说了：后代选择器，描述的是一种祖先结构。举个例子来说明这句话：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

div div p{

color: red;

}

.div2{...}

.div3{...}

.div4{...}

</style>

</head>

<body>

<div>

<p>我是什么颜色？</p>

</div>

</body>

</html>

上面css中的div div p，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p元素的祖先列表：

请点击输入图片描述

什么是css选择器字符串

css的选择器是还是比较富的，主要的css选择器如下：

标签选择器（如：body,div,p,ul,li）

.类选择器（如：class="head",class="head_logo"）

ID选择器（如：id="name",id="name_txt"）

全局选择器（如：*号）

.组合选择器（如：.head.head_logo,注意两选择器用空格键分开）

.继承选择器（如：div p,注意两选择器用空格键分开）

伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）

字符串匹配的属性选择符(^$*三种，分别对应开始、结尾、包含)

以上选择器在日常开发中最常用的就是标签选择器、类选择器和id选择器，下面是这三种选择器的基本用法1、标签名选择器一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。

div{color:red;border:1px blue solid;}

p{color:#000;}

2、类选择器使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。

.test{color:red;border:1px blue solid;}

3、id选择器，id选择器是唯一的，只可以获取独一无二的一个元素。

#test{color:red;border:1px blue solid;}

如何处理html5新标签的浏览器兼容问题

目前HTML5已向开发人员提供了很多新的标签，如section，nav，article，header和footer等。这些标签语义化程度高，会被经常使用，但在IE6，IE7，IE8和Firefox 2等老式浏览器中却不能识别和正常使用。

一、HTML5标签在浏览器展示存在的问题

对于现阶段来说，使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时，可能会得到三种不同的结果。

结果1：标签被当作错误处理并被忽略。那么DOM构建的时候，就会当作这个标签不存在。

结果2：标签会被当作错误处理，并在DOM构建的时候依然会按照预期的代码进行创建，并且HTML标签会被构造成行内元素（也就是说虽然不能识别，但是代码里section标签依然会在dom中创建一个对应section节点，但是属于行内元素）。

结果3：标签被识别为HTML5标签，然后用DOM节点对其进行替换。DOM在构建的时候和预想的一致，并且合适的样式会应用到标签上（大部分情况下是块级元素）。

有一个具体的例子，大家思考一下下面的代码：

<h1>title</h1>

</section>

</div>

很多浏览器（比如Firefox

3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在，所以也可以修改其样式。这种情况对应结果2。

IE9之前的版本会认为section标签是一个错误，并直接将其忽略，那么h1和p标签会被解析，然后成为div标签的子节点。</section>也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的：

<h1>title</h1>

</div>

那么，旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的。因为section节点没有在DOM树中构建，所以也就不能给其增加样式。这种情况对应结果1。

当然，支持HTML5的浏览器比如IE9，Firefox4+，Safari5+会创建正确的DOM结构，然后这些标签会默认附带HTML5规范中定义的默认样式。

那么，我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构，并且含有不同的样式。

二、如何解决HTML5标签不兼容

或许会有很多人在质疑：为什么老式的浏览器不能识别这些标签？其实错不在浏览器，因为在那个时代根本不存在这种标签，所以不能正确识别出来，而这种不寻常的标签识别令DOM结构变得异常。对此，人们想出了很多在现阶段页面中使用HTML5元素的解决方案。每一个解决方案为了做到兼容都会遇到一些特定的问题。在此也在马海祥博客上跟大家分享一下：

1、实现标签被识别

马海祥曾做个一个测试（以IE8为例），是一个文章标题和蓝色字的文章内容，其中文章内容用了article标签。代码如下：

<!DOCTYPE html>

<head>

<style>

article{color:#06F;}

</style>

</head>

<body>

这是文章内容，应该是一段蓝色的文字。在老式浏览器中，如果不做hack将显示异常。

</article>

</body>

</html>

在IE8浏览器中，显示如下：

IE8不能识别article标签，定义在标签上的CSS样式没有起作用。

在IE8中，<article>被解释成命名为<article/>和</article

/>两个空的标签元素，与文章内容并列为兄弟节点，如下图所示：

既然因为不能识别标签而不能使用，那我们的解决办法就是让标签被识别出来。所幸，简单地通过document.createElement（tagName）即可以让浏览器识别标签和CSS引擎知道该标签的存在。假设我们上面的例子的<head>区域加上如下代码。

document.createElement('article');

</script>

IE8浏览器中的DOM解释就会变成下图所示：

自然，文字也显示成正常的蓝色。如下图所示：

2、JavaScript解决方案

JavaScript解决方案目的是解决在旧版本的IE中样式应用的问题。老版本的IE不会识别不明元素已经是一个耳熟能详的特性，而如果这些元素已经通过document.createElement()创建，那么浏览器就可以识别这些标签，并可以将其在DOM树中构建，然后允许开发者对其应用样式。

这个方法可以确保HTML5标签能在旧版本IE中对应创建DOM节点，然后可以对其应用样式。这个方法将HTML5块级元素设置成display:block，从而可以在各个浏览器中做到兼容。

今天测试以下把马海祥博客的网页改成了HTML5的，调试了一下，在FF和Opera中都显示正常了，到了IE6上却变得面目全非了。对此我还特意去找了一些使用JS代码支持HTML5标签元素的方法，在此也跟大家分享一下：

（1）、使用html5shiv

查看了一下，发现了html5shiv能解决这个问题，可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行：

<!--if lt IE 9]>

<![endif]-->

当然你也可以直接把这个文件下载到自己的网站上。但这个文件必须在head标签中调用，因为IE必须在元素解析这前知道这些元素，才能启作用！但马海祥还要提醒你一下：还要在你的CSS文件中加上以下代码，不然有可能会出现些莫名其妙的问题。

header,nav,article,section,aside,footer{display:block;}

另外excanvas.js是Google为IE6支持canvas元素写的脚本，以后马海祥会跟大家再细说这样的例子，感兴趣的朋友可以去试试。

（2）、使用Kill IE6

除此之外你还可以使用KILL IE6一族，前提是你的浏览器允许执行JS文件。方法很简单，在你的网站的</body>之前加上以下代码就可以了：

<!--if lte IE 6]>

<![endif]-->

上面写的<!--if lte IE 6]>在正常的HTML中属于注释，不会被执行，但在IE中是一个判断语句，所以这些代码只有在IE中才会被识别并加载。

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt：就是Greater than的简写，也就是大于的意思。

!：就是不等于的意思，跟javascript里的不等于判断符相同

说实话，马海祥不喜欢这个利用JavaScript解决的方案，因为它破坏了我最主要的web应用开发原则：我们不应该使用JavaScript来控制布局。不仅仅是因为这个做法给那些禁用脚本的用户带来了糟糕的用户体验，更重要的是，如果我们希望我们的web应用代码是面向未来，并且维护性高的，那么必须将视图相关部分分离出来。这个方案对在跨浏览器中构建相同的DOM结构很有帮助，也可以确保你的JavaScript和CSS在各个地方运行结果相同，但是这个优势并不能改变我对这个方法的不认同。

3、Namespace hack

永远不要缺乏使用hack解决问题的能力，在IE中还有其他技术来让浏览器识别不明的标签。这个来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素。例如：

<body>

<html5:section>

</html5:section>

</body>

</html>

前缀html5是纯粹是用于这个例子而且也不是官方支持的，你甚至可以用"foo"作为前缀，结果还是一样。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。

这个方法的缺陷很明显：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做:

html5\:section{

display: block;

}

马海祥点评：这并不是我期望Web开发者编写代码的方式。虽然这是一个非常杰出的解决方案，但是这让应用变得不自然。我不希望看到文件中充满了带命名空间的元素。

4、Bulletproof技术（防弹衣技术）

说实话，我是第一次接触到这个技术，建议在所有新的HTML5块级元素中增加一个内部的div元素，然后包含一个CSS class，用这个元素来替代HTML元素（类似在里面穿了一件防弹衣），例如：

</div>

</section>

在应用样式的时候，Tantek推荐直接给div增加样式，而不是给新元素增加样式

推荐使用：

.section{

color: blue;

}

而不是：

section{

color: blue;

}

这个方案的原理是用简单的方式将原来的样式应用方式转移到一个代表了HTML5标签的元素上。由于我一般情况下不会将样式通过标签名的方式应用到元素上，所以马海祥也并完全支持这个建议。

马海祥觉得这个方案的缺陷是不同的浏览器构建了不同的DOM结构，那么你必须在编写JavaScript和CSS的时候格外小心。获取子节点或者父节点的时候，不同的浏览器返回的结果可能会不一样。特别是在下面的代码中：

</div></section>

</div>

5、反向的bulletproof技术

还有一些方法，比如尝试使用和Tanteck方案相反的技术，也就是把HTML5元素放在div元素内部，例如：

</section>

<div>

这个方案唯一的不同是HTML5元素的位置，其他都一样。喜欢这个技术的支持者认为他的一致性很好（适用于所有的元素，包括<hgroup>）。但是DOM结构的不同让这个方案意义变得不大。他的主要优势是技术上的一致性。

6、关于X-UA-Compatible的使用

目前绝大多数网站都用以下代码来作为IE8的兼容方法。

虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。

在X-UA-Compatible中可用的方法有：

其中最后一行是永远以最新的IE版本模式来显示网页的。

另外加上

而使用，Emulate模式后则更重视。

所以目前来说还是以使用

为首选。

7、通过修改HTML部分来实现

我的主要目标是确保我只需要修改HTML部分。这就意味着不需要修改CSS和JavaScript。为什么会有这样的需求？需要修改的Web应用视图越多，你越有可能制造bug。将改变限制到一个视图也就限制了bug的出现，即使出现了bug，也可以减少你查找错误的范围。如果一个视图破相了，我可以知道这是因为我增加了一个section元素，而不是考虑是不是CSS文件修改来带的影响。

在研究了所有这些解决方案，并进行一些尝试和设计之后，我回到了Tantek的方案。这是唯一一个只需要修改HTML而不用动CSS和HTML的方案。现在，我在他的方案基础上做了一些改进，来达到我想要的结果。

首先，我不会给那些代表HTML5元素的class增加样式（所以我不会使用.section这样的选择器）。我保留了div元素，然后再增加一个带语义的class来应用样式，并作为进行JavaScript操作的钩子。例如，这样的代码：

</div>

经过改进后：

</div>

</section>

这样的修改完成后，我依然使用.content作为样式和脚本的入口。这也意味着我不需要修改CSS和JavaScript。

然后，为了避免hgroup标签这样的情况，我选择不使用这个标签。我在我已有的所有页面中没有找到任何一个使用了这个标签的。由于hgroup标签只能包含标题元素，如果你确实想要使用这个标签，那么使用hrgoup来包含本身是非常安全的（假设它没有包含其他的块级元素）。

我在马海祥博客上花了很多时间来测试比较bulletproof和反向的bulletproof哪个更好一些。我做选择时最主要的决定因素就是反向的bulletproof需要我去增加CSS代码。在那些为HTML5标签创建了DOM节点但是没有应用默认样式的元素来说，div元素里包含了一个HTML5块级元素在很多情况下都会搅乱我的布局，因为创建的DOM节点是行内元素。我不得不明确增加CSS规则来让这个节点变成块级元素从而可以正常布局，这也就违反了我不修改CSS文件的初衷。

马海祥博客点评：

在我的研究中，我使用了多个页面，然后在这些页面上使用修改过后的bulletproof技术。我分别在简单和复杂的布局中，含有和不含有JavaScript交互进行测试。在每一个例子中，我只需要修改HTML就可以让页面表现正确（不修改JavaScript和CSS）。那么，子节点和父节点的问题怎么办？有趣的事情是我在测试中并没有遇到这样的问题。

理由很简单，因为我对代码苛刻的态度。我认真地做了第二遍检查：

（1）、标签名和ID不会用于应用样式（只是用class）。

（2）、尽量选择常用的CSS选择器并且尽量减少选择器的使用。

（3）、JavaScript代码不依赖于特定的DOM结构。

（4）、标签名不用于操作DOM。

我注意到另一个有趣的事情是我使用了HTML5元素作为容器。而这些新的元素仅仅是作为功能性模块的边界。你应该花费你的大部分时间为内部的元素编写样式和脚本而不是处理各个模块间的样式和脚本。由于马海祥博客的JavaScript和CSS标签都应用在容器的内部，所以一切都显得很顺利。我想这才是一个真正的代码质量高的网站。

好了，文章到此结束，希望可以帮助到大家。

c语言函数声明格式？c语言符号大全表解释liststylenone属性？list-style：none

html最常用的三种选择器 七种基本的css选择器

css选择器最常用的类型

什么是css选择器字符串

如何处理html5新标签的浏览器兼容问题

html最常用的三种选择器七种基本的css选择器