复合选择器、标签显示模式及css三大特性

tech2025-01-14  5

学习目标:

为什么要学习CSS复合选择器?具体实际应用中怎样使用呢?介绍标签的显示模式,从而从理解中学习怎么使用标签?最后简单介绍CSS的三大特性

从上一节我们简单的认识了CSS,也简单介绍了基本的选择器,我们说CSS分为基础选择器和复合选择器,一般在实际开发工作中基础选择器满足不了我们的实际开发,并不能快速高效的选择标签。

概念:所谓复合选择器,就是由两个或者多个基础选择器,通过不同的方式组合而成的。接下来一一介绍。

后代选择器

概念:后代选择器又称为包含选择器。

作用:用来选择元素或者元素组的子孙后代

其语法:

父级 子级{属性:属性值; 属性:属性值;}

例如:.class h3{color:red; font-size:16px;}

当标签发生嵌套时,内层标签就成为外层标签的后代;

也就是说,父级标签能选择任何包含在内的标签。

子元素选择器

作用:子元素选择器都只能选择作为==子元素(亲儿子)==的元素。

其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 ==>==进行连接。

语法:

引用w3c中的一个例子:

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>

如果你希望选择只作为 h1 元素子元素的 strong 元素:

h1 > strong {color:red;}

这样选择到的就是第一个 h1 下面的两个 strong 元素,都会变为红色,但是第二个 h1 中的 strong 不受影响。

注意:子元素选择器选择的是亲儿子,不是子孙后代

交集选择器

使用条件:交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,又有标签二的特点。

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

格式:

选择器1选择器2{

属性: 值;

}

注意点: 1.选择器和选择器之间没有任何的连接符号

2.选择器可以使用标签名称/id名称/class名称

企业开发中用的并不多,一般不太建议使用

并集选择器

应用:如果某种选择器定义的相同样式,就可以利用并集选择器,可以让代码更加简洁

用法:各个选择器通过==逗号“,”==连接而成,通常用于集体声明,所有的选择器都会执行后面的样式,例如:

比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色 通常用于集体声明

链接伪类选择器(重点)

作用:用于向某些选择器添加特殊的效果,比如给链接添加特殊效果。

a:link /* 未访问的链接 */a:visited /* 已访问的链接 */a:hover /* 鼠标移动到链接上 */a:active /* 选定的链接 */

注意:写的时候,顺序尽量不要颠倒,按照 lvha 的顺序。否则可能会引起错误。

怎么来记呢?

LV包包 ,非常hao

之所以叫链接伪类,所以都是利用交集选择器 a:link a:hover ,因为在a链接具有默认样式,所以

在实际工作中都需要给链接单独给指定样式。例如:

a { /* a是标签选择器 所有的链接 */ font-weight: 700; font-size: 16px; color: gray; } a:hover { /* :hover 是链接伪类选择器 鼠标经过 */ color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */ }

总结

选择器作用特征使用情况隔开符号及用法后代选择器用来选择元素后代是选择所有的子孙后代较多符号空格 .nav a子代选择器选择最近一级元素只选亲儿子较少符号> .nav>p交集选择器选择两个标签交集的部分既是又是较少没有符号 p.one链接伪类选择器给链接更改状态给链接添加特殊效果较多重点记住a:hover{}的样式

好了,选择器简单介绍完了,接下来来讲标签显示模式。重点!重点!重点!

这一节我们将讲到标签的三种显示模式以及他的特点和区别,和运用中对三种显示模式的相互转换。

什么是标签的显示模式?

标签以什么方式进行显示,比如div自己独占一行,span一行可以放很多,这是为什么呢?

一般HTML标签分为块标签和行内标签两种类型,也称块元素和行内元素。块元素很霸道,独自占领一行,再来一个块元素放后面,只能在下一行显示独占一行。类似的,行内元素,可以在一行内显示 多个。

常见的块元素有h1~h6、p、div、ul、ol、li等,其中div是典型的块元素,用的最多。

块级元素的特点:

比较霸道,自己独占一行高度、宽度、外边距以及内边距都可以控制。宽度默认是容器(父级元素的宽度)的100%。是一个容器及盒子,里面可以放行内或者块级元素,是个没有语义的标签。

注意:行内元素不可以放块级元素。

行内元素:常见的行内元素有a、strong、b、em、i、del、s、ins、span,其中span标签用的最多,i和em 标签也有用。

行内元素的特点:

相邻行内元素在一行上,一行可以显示多个。高度和宽度设置是无效的。默认宽度就是他本身内容的宽度。行内元素只能容纳文本或者其他行内元素。

注意:链接里面不能再放链接

特殊情况a里面可以放块元素,但是给a转换一下块级模式最为安全

行内块元素:在行内元素有几个特殊的标签例如img、input、td,可以对他们设置宽高,有的资料会称他们是行内块元素。

行内块元素的特点:

和相邻行内块元素在一行上显示,有空白间隙,一行可以显示多个默认宽度就是它本身内容的宽度。宽高、内外边距都可以控制。

标签显示模式转换

块转行内:display:inline;行内转块:display:block;块、行内元素转行内块:display:inline-block;

css三大特性:

层叠性继承性优先级

层叠性:所谓的层叠性就是多种样式的叠加。

这是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么前一个属性就会被层叠掉。

原则:

样式冲突,遵循的原则是就近原则,哪一个样式离结构近就执行哪个样式样式不冲突,不会层叠

继承性:子标签会继承父标签的某些样式,如果想要设置一个可继承的属性,只需将他应用于父元素即可。

注意:

恰当的使用继承可以简化代码。降低css样式的复杂性。子元素可以继承父元素的样式比如(text-、font-、line-这些元素开头的可以继承,以及color属性)

优先级:定义样式时,出现多个规则应用在同一个元素上,此时:

选择器相同,执行层叠性选择器不同,考虑优先级

权重(优先级)大小排列: !important >行内样式 > id 选择器 >类(伪类)选择器 >标签(元素)选择器 >继承或者通配符(*)

权重就算公式:

标签选择器计算权重公式继承或者*0,0,0,0标签选择器0,0,0,1类,伪类0,0,1,0ID选择器0,1,0,0行内样式1,0,0,0!important无穷大

权重叠加

我们经常使用交集选择器,后代选择器,多个基础选择器进行组合,就会出现圈权重叠加的问题。例如:

div ul li ---->0,0,0,3.nav ul li ---->0,0,1,2a:hover ---->0,0,1,1.nav a ---->0,0,1,1

注意:

数位之间没有进制,比如说0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0,所以不会存在10个div能赶上一个类选择器的情况。继承的权重是0。
最新回复(0)