''' 基础选择器 想要选择ol元素的子代li元素，并设置字体和字体颜色样式，请补齐这段代码 ________{ color: #000000;...~，是同级的关系，另外相邻选择器的关键字+，也是同级的关系 伪类选择器 伪类 描述 :hover 用于设置鼠标悬停在元素上方时的样式 :focus 用于设置元素获得焦点时的样式 :active 用于设置元素被激活时...用于选取属于其父元素的最后一个特定类型的子元素 :nth-child(N) 选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd / even）、公式（如：2n+1...important规则时，这个样式将覆盖其他的任何声明 !...z-index值相同时，后面的元素会覆盖前面的 box2的z-index值为9，box1的z-index值设置小于或等于9时，即可实现box2定位在box1上方 ''' 使类名为top的div定位在类名为
简单选择器 1） 类选择器 类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。...第一个元素获得灰色背景色，没有边框，如类所指定。...例如，对 font-family 和 color 进行继承是有意义的，因为这使得您可以很容易地设置一个站点范围的基本字体，方法是应用一个字体到 元素；然后，您可以在需要的地方覆盖单个元素的字体...控制继承 CSS为处理继承提供了四种特殊的通用属性值： inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。...(没有应用任何样式时，先使用自定义属性，否则使用默认样式) inherit 值是最有趣的——它允许我们显式地让一个元素从其父类继承一个属性值。 让我们看一个例子。
然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式： .nav li:not(:last-child) { border-right...实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。...; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone;} 内联块声明允许将颜色、背景、页边距和填充应用于每行文本...，而不是整个元素，克隆声明确保将这些样式均匀地应用于每行。...这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。
:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。...锚点2与之相同对应列表2。...#content1:target ~ .nav li{ // 改变li元素的背景色和字体颜色 &:first-child{ background:#ff7300;...color:#fff; } } #content2:target ~ .nav li{ // 改变li元素的背景色和字体颜色 &:last-child{ background...Demo戳我：纯CSS导航切换(:target伪类实现) 法二： && 上面的方法通过添加 标签添加页面锚点的方式接收点击事件
然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式： .nav li:not(:last-child) { border-right...实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。...7、使用SVG icons SVG使用于所有分辨类，并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG的图标字体。...，而不是整个元素，克隆声明确保将这些样式均匀地应用于每行。...这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。
伪类选择器：以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。...默认取值范围为0~子元素的长度.但是当n时，选取无效 0>>5 1>>4 ... 4>>1 5>>0*/ li:nth-of-type(-n+5){ font-size: 30px; } li...2.2.6、空值：没有任何的内容，连空格都没有 li:empty{ background-color: red; } 2.2.7、锚链接伪类 E:target ：可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时.../*h2为锚点，在被触发时将h2的字体改为红色*/ h2:target{ color: red; } 3、伪元素选择器 伪元素之所以被称为伪元素，是因为它不是真正的DOM，但是却可以当成一个DOM...css有一系列的伪元素，如::before，::after，::first-line，::first-letter等，本文就详述一下:before和:after元素的使用。
元素 如：div[class^=my]: 匹配class属性值以my开始的div元素 3.6、element[attr$=value] 匹配attr属性值，以value作为结束的element元素 如：...div[class*=on] 匹配class属性值中包含on的div元素 4、伪类选择器 4.1、目标伪类：突出显示活动的锚点元素 语法：:target 如： a:target{} div:target...匹配属于父元素中的首个子元素 4.3.2、:last-child 匹配属于其父元素中的最后一个子元素 4.3.3、:empty 匹配没有子元素（包含文本内容）的元素...4.3.4、:only-child 匹配属于其父元素中的唯一子元素 4.3.5、:nth-child(n)匹配属于其父元素中的第n个子元素 4.4、否定伪类：将匹配的元素排除在外 语法：:not(selector...匹配用户选取的部分 注意：W3C规定所有的伪类选择器全部使用一个冒号，在CSS3中，所有的伪元素选择器，全部使用两个冒号。
，如文字大小、颜色、字体加粗等。...选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。...伪类选择符：它允许给html不存在的标签(标签的某种状态)设置样式，比如说我们给html中的一个标签元素的鼠标滑过的状态来设置字体颜色。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。... 最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。 CSS格式化排版 字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。
/16=1.875em / p {font-size:0.875em;} / 14px/16=0.875em */ CSS 链接 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。...效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值 类/元素 选择器 示例 示例说明 :checked input:checked 选择所有选中的表单元素 :disabled input:disabled 选择所有禁用的表单元素 :empty...p:empty 选择所有没有子元素的p元素 :enabled input:enabled 选择所有启用的表单元素 :first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个..."required"属性指定的元素属性 :root root 选择文档的根元素 :target #news:target 选择当前活动#news元素(点击URL包含锚的名字) :valid input
CSS 1.css选择某一个 (CSS :first-child 选择器,CSS选择器——伪类选择器) q:请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255,...不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。...但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。...（没有需要插入的内容时可以将 content 属性的值定义为空""）。...官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。
CSS，即层叠样式表，是一种用于样式和格式化网页的强大语言。当你深入研究CSS时，你可能会遇到在CSS选择器中使用冒号（ : ）和双冒号（ :: ）的情况。...这是一个例子： a:hover { color: red; } 在上面的代码片段中，我们正在针对 a （锚点）元素进行操作，并在用户将鼠标悬停在其上时将其颜色设置为红色。...以下是一个示例： a:visited { color: purple; } 在上面的代码中， a:visited 选择器将已访问链接的颜色设置为紫色。...例如，可以使用伪类来选择其父元素的第一个子元素： :first-child: li:first-child { font-weight: bold; } 在这个例子中， li:first-child...选择器针对其父容器中的第一个 li 元素，并将其应用为粗体字重。
CSS 伪类 CSS 伪类可对 CSS 的选择器添加一些特殊效果 锚伪类： 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态...在CSS中，有两种类型的字体系列名称： 通用字体系列 - 拥有相似外观的字体系统组合，如 Serif 或 Monospace。...特定字体系列 - 一个特定的字体系列，如 Times 或 Courier（ 打字机上的一种字体 ）。 font-family 属性设置文本的字体系列。...如： p.thick {font-weight:bold;} /* bold 关键字可以将文本设置为粗体 */ font-size 属性设置文本的大小。...浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。
1.不要写出不需要的样式定义 例如：编写display：block的时候，很多元素默认都有这种风格。 另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。...所以你试图写一个css类的将链接的颜色变成黑色： 这个.link--black将被CSS的特殊性所覆盖，并且无法覆盖.user-form li风格。...这可能是您的意图，但是现在要确保你的列表元素中的所有锚点标记是红色的，因为你不知道未来可能因设计而改变。 通过上面的例子，你应该明白锚标签的颜色应该是一个远离默认链接颜色的变体。...所以，在这种情况下，我会100％确定需要一个额外的css类来处理红色链接。这是在实践中会出现的例子： 然后将其添加到HTML中的每个li元素。...另外，因为我将自己的hover定义在自己的锚点上，所以红色链接将会变成黑色悬停，而不必定义任何其他样式。
1.jpg 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。...如右侧代码编辑器中的代码： .first span{color:red;} 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。...;} 5-7 伪类选择符 更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色： a:hover...这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
3、css 选择器 1、元素选择器 p{ color: #00CCFF; } 2、id选择器 #red { color:red; } li id="red">香蕉li> 3、类选择器 应用最多的一类选择器..."> 这个字体颜色为红色 5、多个类选择器 .important {font-weight:bold;} .warning {font-style:italic;} .important.warning...紧随的第一个p有样式效果。 10、:last-child 选择器 指定属于其父元素的最后一个子元素的样式。...11、:first-child 选择器 指定属于其父元素的首个子元素的样式。... 元素并设置其样式，其中的 元素是其父元素的第一个子元素。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 引入CSS样式表（书写位置） CSS可以写到那个位置？...为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 链接伪类选择器 :link /* 未访问的链接...即在嵌套结构中，不管父元素样式的权重多大，被子元素继 承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。...，当position属性的取值为static时，可以将元素定位于静态位置。...当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。 注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。...然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。 1 p{color:green} 发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。...div{ border:1px solid #222 } hello yuan 对于a标签，有自己的样式颜色等，当给其父级字体颜色大小等属性时，a标签并不会继承这些属性...颜色是通过CSS最经常的指定： 十六进制值 - 如: ＃FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 1 p { color: rebeccapurple...50%:基于字体大小的百分比 （文本垂直居中可以将行高和块的高度设置为相同值） vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效，不设置时默认以基线
标签中的class属性如果有多个，要用空格分隔 1.4 通用选择器 * { color: white; } 2、组合选择器 2.1 后代选择器 /*li内部的a标签设置字体颜色*/ li a {...通常，我们会分两行来写，更清晰： div, p { color: red; } 4.2 嵌套 多种选择器可以混合起来使用，比如：c1类内部所有p标签设置字体颜色为红色。...7、选择器的优先级 7.1 CSS继承 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。...然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。 我们只要给对应的标签设置字体颜色就可以覆盖掉它继承的样式。...颜色是通过CSS最经常的指定： 十六进制值，如：#FF0000 一个RGB值，如：RGB(255,0,0) 颜色的名称，如：red 还有rgba(255,0,0,0.3)，第四个值为alpha，指定了色彩的透明度
超文本 标记 语言 超文本： (1) 普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能，表达能力优于普通文本如声音、图形等。...html通过标签的形式将信息展示给用户。 HTML文档的后缀名? 答：.html/.htm 以上两种后缀名没有区别。...---- 7、链接标签 属性： href 跳转页面地址 name 名称，锚点...) 页面跳转 注意：要调到外网必须要加协议 http:// (2) 访问锚点 回到锚点（顶部...top、中间bottom、底部middle），在访问锚点时的书写格式：#name的值； (3) 定位到框架的某个位置。
它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。...就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。...选择所有访问过的链接 1 :active a:active 伪类 选择活动链接 1 :hover a:hover 伪类 选择鼠标在链接上面时 1 :focus input:focus 伪类 选择具有焦点的输入元素...p:last-of-type 伪元素 选择每个p元素是其父级的最后一个p元素 3 :only-of-type p:only-of-type 伪元素 选择每个p元素是其父级的唯一p元素 3 :only-child...p元素是其父级的第二个p元素 3 :nth-last-of-type(n) p:nth-last-of-type(2) 伪元素 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3 :last-child
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
