CSs选择器(css选择器有哪些)

上文介绍了如何在网页中使用css及css的常用知识点,今天首先介绍css 的选择器,所谓选择器就是通过一定的规则语法查找html元素节点,只有找到这些元素才能应用样式。

选择器类型

css 选择器从不精确到最精确,可分以下几种:

  • 通用选择器 (*)-—— 选择所有元素
  • 标签选择器(tag)—— 按 HTML 标记名称定位元素(包括伪元素)

tag 是html 标签关键字,一般小写。

  • 类选择器(.class)—— 分别按类定位元素(包括伪类)

在html标签上使用 class="" 属性应用css 样式,可以写多个class,空格隔开,如:<p class="cls1 cls2">。

  • 属性选择器([attr]) —— 分别按标签属性定位元素(包括伪类)

属性值html标签上的各种属性,如 [alt], [type="text"], [lang="en"]。

  • ID 选择器 —— 按 id 定位元素

id 必需是唯一的,不能重复。

语法如下:

* {
  /* 通用选择器*/
}

tag {
  /* 标签选择器 */
}

tag::before {
  /* 标签选择器和伪元素 */
}

.class {
  /* 类选择器 */
}

.class:hover {
  /* 类选择器和伪类 */
}

[attr] {
  /* 属性选择器 */
}

#id {
  /* ID 选择器 */
}

伪元素有两个冒号 ( ::, 比如 ::before),伪类有一个冒号 ( :, 比如 :hover)。

后面学习JavaScript 时,会学习到通过js也可以查找html元素,查找规则就是通过css 选择器查找,如下示例:

此查询用于获取与选择器匹配的所有元素:

document.querySelectorAll('article h2')

如上代码获取到一个html 节点集合,每个html节点都有子节点,孙子节点,依次类推…..

html 节点树

在网页中 html 是一个树状的结构,每个html 元素是一个节点,且每个节点下面又有子节点。

如下图:

CSs选择器(css选择器有哪些)插图

css 选择器就是在这样的一个树结构里面查找html元素节点,找到后浏览器渲染对应的样式。

组合使用选择器

选择器除了可以单个使用,也可以组合使用,比如 #id p, #id >.class,p+h3等,按功能可分以下几种:

  • 包含选择器 —— 通过空格符隔开,比如:p span,指p标签下的所有span 标签,包括子级的子级里面的span。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
	div span{
		color:red;
	}
</style>
</head>
<body>
<div>黑色<span>红色</span></div>
<div>
   <p>黑色<span>红色</span><span>红色</span></p>
</div>
<span>不是红色</span>
<span>不是红色</span>
</body>
</html>

显示效果:

CSs选择器(css选择器有哪些)插图1

  • 子选择器 —— 通过">" 隔开,比如: p>span, 指p元素下子级span,子级的子级下的span 就找不到了。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
	div > span{
		color:red;
	}
</style>
</head>
<body>
<div>黑色<span>红色</span></div>
<div>
    黑色<span>红色</span><span>红色</span>
    <p><span>不是红色</span></p>
</div>
<span>不是红色</span>
<span>不是红色</span>
</body>
</html>

显示效果:

CSs选择器(css选择器有哪些)插图2

  • 相邻选择器 —— 通过“+”隔开,比如: p+span,指和p元素同级且紧跟在p元素节点后面的span节点。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
	p + span{
		color:red;
	}
</style>
</head>
<body>
  <p>黑色</p>
  <span>红色</span>
  <span>不是红色</span>
  <span>不是红色</span>
</body>
</html>

显示效果:

CSs选择器(css选择器有哪些)插图3

这里一定注意span必须紧跟在p标签后面,它们2个之间有任何标签都不会起作用了。

  • 兄弟选择器 —— 通过“~”隔开,比如:p~span,指和p同级且在其后面的所有span节点。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
    p~span{
      color: red;
    }
</style>
</head>
<body>
  <p>黑色</p>
  <span>红色</span><br>
  <span>红色</span><br>
  <h1>标题</h1>
  <span>红色</span>
</body>
</html>

显示效果:

CSs选择器(css选择器有哪些)插图4

  • 分组选择器 —— 通过“,”隔开,比如:h1,h2,h3,指这些元素共用相同的样式。

如下示例:

h1,h2,h3{
	background-color: red;
}

整个页面中的h1、h2、h3的背景色都是红色,无论在哪个层次的节点中都会起作用。

CSs选择器(css选择器有哪些)插图5

选择器优先级

不同的选择器如果作用于同一个html元素,浏览器会根据优先级规则渲染样式。

优先级高的选择器会覆盖优先级低的样式,如下表从上到下优先级依次变高:

选择器

例子

级别

标签选择器

h1

1

类,属性选择器

.class, [type="text"]

2

ID选择器

#contact

3

内联样式

<div style="background: purple">

4

!important关键词

div { color: green !important }

覆盖所有

请谨慎地使用!important,它变得非常难以维护。!important 仅在绝对必要时才应使用,例如为某些您无法控制的第三方设置样式,使用内联样式,以及在少数情况下使用 JavaScript 切换显示。

总结

css 选择器是一种查询html元素节点的语言,当css选择器互相组合时,会变得很复杂,所以平时尽量减少使用组合选择器。

关于优先级,总而言之,从标签选择器到!important的每层级别都比前一个级别强一个数量级。

学习css,切记死记硬背,理解它很重要,结合之前学习的html 知识多练习,感谢关注。

上篇:前端入门——css 样式表简介

**本论坛部分作品是由网友自主投稿和发布、编辑整理上传,对此类作品本论坛仅供提供学习交流和参考,禁止用户用于商业行为,并请于下载后24小时内删除,若喜欢该作品请联系原作者购买正版。如果您发现论坛上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。
158自学网 » CSs选择器(css选择器有哪些)
关于售后:
(1)、因部分资料含有敏感关键词,百度网盘无法分享链接,请联系客服进行发送;
(2)、所有资料在您未收到之前,都可以联系微信/QQ:406499404,无条件退款
(3)仅支持原渠道退回,微信支付,支付宝退回至您当初选择的付款方式
(4)不用担心不给资料,如果没有及时回复也不用担心,看到了都会发给您的,请放心!
(5)因部份资源来源互联网,本站不担保其完整性,请知悉!

提供最优质的资源集合

立即查看 了解详情
赞助VIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡