一文学会CSS基本选择器和复合选择器

2023-04-29 03:59:02html-css018

一文学会CSS基本选择器和复合选择器,第1张

要想为指定的HTML元素添加CSS样式，首先需要选中该元素。在CSS中，执行这一选择操作规则部分被称为选择器（选择符）。

CSS基本选择器可以分为五类：标签选择器、id选择器、类选择器、通配符选择器和伪类选择器。

多类名选择器

可以给单个标签添加多个类名，既可以提升类样式的复用性，也可以达到添加多种样式的效果。在后面复杂网页的布局中使用较多。

通配器选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

常用的结构伪类选择器：

:target 选择器

可用于选取当前活动的目标元素，然后给它添加相应的样式。

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded md-focus" lang="css" cid="n2337" mdtype="fences" style="box-sizing: border-boxoverflow: visiblefont-family: var(--monospace)font-size: 0.9emdisplay: blockbreak-inside: avoidtext-align: leftwhite-space: normalbackground-image: inheritbackground-position: inheritbackground-size: inheritbackground-repeat: inheritbackground-attachment: inheritbackground-origin: inheritbackground-clip: inheritbackground-color: rgb(248, 248, 248)position: relative !importantborder: 1px solid rgb(231, 234, 237)border-radius: 3pxpadding: 8px 4px 6pxmargin-bottom: 15pxmargin-top: 15pxwidth: inherit"><h2><a href="#brand">Brand</a></h2>

content for Brand

</div>

background: orange

color: #fff

}</pre>

复合选择器是由两个或多个基本选择器，通过不同的方式组合而成的，目的是为了更准确、更精细的选择目标元素标签。

复合选择器的三种类型：交集选择器、并集选择器、后代选择器、子选择器以及相邻元素选择器。

作用：通过元素选择器可以选择页面中的所有指定元素

语法：标签名{}

作用：通过元素的class属性值选中一组元素

语法：.class属性值{}

id选择器

作用：通过元素的id属性值选中唯一的一个元素

语法：#id属性值{}

复合选择器（交集选择器）

作用：可以选中同时满足多个选择器的元素

语法：选择器1选择器2选择器N{}

选择器分组（并集选择器）

作用：通过选择器分组可以同时选中多个选择器对应的元素

语法：选择器1,选择器2,选择器N{}

通配选择器

作用：可以用来选中页面中的所有的元素

语法：*{}

元素之间的关系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

作用：选中指定元素的指定后代元素

语法：祖先元素后代元素{}

有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。

给链接定义样式：

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。

其他：

否定伪类

否定伪类可以帮助我们选择不是其他东西的某种东西。

语法： :not(选择器){}

比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。

语法：

[属性名]

[属性名 = "属性值"]

[属性名 ~= "属性值"]

[属性名 ^= "属性值"]

[属性名 |= "属性值"]

[属性名 $= "属性值"]

[属性名 *= "属性值"]

作用：选中指定父元素的指定子元素

语法：父元素 >子元素

比如body >h1将选择body字标签中的所有h1标签

IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素。

语法：

兄弟元素 + 兄弟元素：查找后边一个兄弟元素

兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。

比如：

这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。

不同的选择器有不同的权重值：

CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下：

1.子选择器

复制代码

代码如下:

#pic>img{ // 使用 >号，让选择器只选择直接的子类，width:200px

height:200px

}

</style>

</div>

2.相邻选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

3.包含选择器

复制代码

代码如下:

#header p{font-size:14px}

#main p {font-size:12}

定义<div id = "header">包含框里的段落字体大小为14像素

定义<div id = "main">包含框里的段落字体大小为12像素.

4.多层选择器嵌套

复制代码

代码如下:

#wrap #header h2 span {font-size:24px}

#wrap #main h2 span {font-size:14px}

5.属性选择器

（1）匹配属性名选择器

div[class] {font-size:24px}

使该选择器能够匹配div中设置了class属性的对象定义格式

（2)匹配属性值选择器

img[alt="图像"][title="图像"] {border：solid 2px red}：

给<img src="images/pic1.jpg" alt="图像" title=“图像”>定义样式

(3)模糊匹配属性值选择器

6.伪选择器和伪元素选择器

复制代码

代码如下:

a:link{color:#FF0000} /*正常链接状态下样式*/

a:visited{color:#0000FF} /*被访问之后的样式*/

a:hover{color:#00FF00} /*鼠标经过的样式*/

a:active{color:#FF00FF} /*超链接被激活的样式*/

</style>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：怎么修改网站的css让它适应手机端？

# 下一篇：python,怎么输入数据并用空格隔开？

推荐阅读

热门文章

最新发布

标签列表

一文学会CSS基本选择器和复合选择器

给您推荐相同类型的内容：