<
html-css学习
>
上一篇

Bootstrap
下一篇

NodeJs 扩展功能

第八天学习

  1. CSS伪类
  2. 选择器
  3. 伪元素
  4. CSS概念

CSS伪类

CSS伪类是添加到指定所选元素(多个) 的一个特殊的状态选择其的关键字。例如:hover 当用户的指针悬停在按钮上时,可用于更改按钮的颜色

句法

selector: 伪类 {
	适当的值;
}

:active

常用在

:hover

当用户使用光标(鼠标指针)悬停在元素上时,通常会触发:hover

:visited

表示用户已经访问过的链接。

:focus

表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的”tab”键选择它时会被触发

:focus-within

表示一个元素获得焦点,或该元素的后代元素获得焦点,即元素自身或它的某个后代匹配:focus伪类

它会匹配每一个有href属性的<a> <area><link>元素. 因此它会匹配到所有的:link:visited

用来选中元素中的链接。它将会选中所有尚未访问的链接,包括那些已经给定了其它伪类选择器的链接(:hover, :active, :visited)。为了可以正确地渲染链接元素的样式, :link伪类选择器应当放在其它伪类选择器的前面,并且遵循LVHA的先后循序,即 :link - :visited - :hover - :active:focus 伪类选择器常伴随在 :hover 伪类选择器左右,需要根据你想要实现的效果确定它们的顺序

:checked

表示任何处于选中状态中的radio(<input type="radio">,checkbox(<input type="checkbox">) 或(“select”)元素中option HTML元素(“option”)

:default

表示元素中的默认表单元素。该选择器可以在<button>,<intpu type="checkbox">,<input type="radio">,以及<option>上使用

:defined

表示任何已定义的元素。包括任何浏览器内置的标准元素以及已成功定义的自定义元素

:disabled

表示任何被禁用的元素。如果一个元素不能被激活(选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用的状态。

:enable

表示任何启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入)或获取焦点,则该元素是启动的。

:empty

代表没有子元素的元素。子元素之可以是元素节点或文本(包括空格)

:first-child

表示在一组兄弟元素中的第一个元素 (不匹配标签,面向所有标签群体)

:last-child

代表父元素的最后一个子元素(不匹配标签,面向所有标签群体)

:first-of-type

表示一组兄弟元素中其类型的第一个元素 (匹配标签,面向每种标签)

:last-of-type

表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。(匹配标签,面向每种标签)

:indeterminate

表示状态不确定的表单元素

:in-range

代表一个<intpu>元素,其当前值处于属性min和max限定的范围之内.

但只有在该元素指定了取值范围,并且元素处于指定范围时才有效。

input:in-range {
  background-color:rgba(0,255,0,0.25);
}
<input id="value1" name="value1" type="number" plackholder="1 to 10" min="1" max="10" value="12">

:out-of-range

表示一个<input>元素,其当前值处于属性min和max限定的范围外。

input:out-of-range {
	background-color: rgba(255,0,0,0.25);
}

:invalid

表示任意内容未通过验证的<input> 或其它<form>元素

主要用于突出显示用户的字段错误非常有用

:valid

表示内容严重正确的<input>或其他<form>元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的形式

对于高亮正确字段是很有用的

:lang()

基于元素语言来匹配页面元素

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This English quote has a <q>nested</q> quote inside.</q></div>
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

结果

image-20190727140222699

:not(x)

以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器x描述的元素。X不能包含另外一个否定选择器。

:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类,它不会增加选择器的优先级

:nth-child(an+b)

首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为第(an+b)个元素的集合(n=0,1,2,3,4..)。示例

:nth-last-child(an+b)

从兄弟节点中从后往前匹配处于某些位置的元素

:nth-last-of-type(an+b)

匹配那些在它之后有an+b-1个相同类型兄弟节点的元素,其中n为正值或零值。它基本和:nth-of-type一样,只是它从结尾处反序计数

:nth-of-type(an+b)

匹配其之前具有an+b-1个相同兄弟节点的元素,其中n为正值或零值。就是这个选择器匹配那些在相同兄弟节点中的位置与模式an+b匹配的相同元素

:only-child

代表了属于某个父元素的唯一一个子元素。等效的选择器还可以写成:first-child:last-child或者:nth-child(1):nth-last-child(1),前者的权重会低一点

:only-of-type

代表任意一个元素,这个元素没有其他相同类型的兄弟元素

:optional

表示任意没有required属性的<input>,<select><textarea>元素使用它

:read-only

表示元素不可被用户编辑的状态

:read-only

表示元素不可被用户编辑的状态(如锁定的文本输入框)

:read-write

代表一个元素(例如可输入文本的input元素)可以被用户编辑。

:required

任意<input>元素表示任意拥有required属性的<input><textarea>元素使用它。它表示表单在提交之前容易的展示必填字段并且渲染其外观

:root

匹配文档树的根元素。对于HTML来说,<root>表示<html>元素,除了优先级更高之外,与html选择器相同

选择器

基本选择器

元素选择器

元素 { 样式声明 }

类选择器

.类名 { 样式声明 }

元素[class ~= 类名] { 样式声明 }

id选择器

#id属性 { 样式声明 }

元素[id=id属性] { 样式声明 }

通配选择器

ns|* - 会匹配ns 命名空间下的所有元素

*|* - 会匹配所有命名空间下的所有元素

|* - 会匹配所有没有命名空间的元素

举个🌰

*[lang^=en]{ color:green; }
*.warning { color:red; }
*#maincontent { border: 1px solid blue; }

属性选择器

通过已经存在的属性名或属性值匹配元素

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}
/* 存在href属性并且属性值匹配 "https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color:green;
}
/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}
/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

[attr]

表示带有以attr命名属性的元素

[attr=value]

表示带有以attr命名的属性,且属性值为“value”的元素

[attr~=value]

表示带有以attr命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中[至少]一个值匹配”value”。

[attr|=value]

表示带有以attr命名的属性的元素,属性值为”value”或是以”value-“为前缀开头。

[attr^=value]

表示带有以attr命名的属性的元素,属性值是以”value”开头的元素

[attr$=value]

表示带有以attr命名的属性的元素,属性值是以”value”结尾的元素

[attr*=value]

表示带有以attr命名的属性,属性值包含”value”的元素

[attr operator value i]

表示带有以attr命名的属性,且属性值匹配”value”[忽略属性值大小写]的元素。

组合选择器

相邻兄弟选择器:A + B

介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中

普通兄弟选择器: A ~ B

兄弟选择符,位置无须紧邻,只须同层级,A ~ B选择 A 元素之后所有同层级B元素

子选择器: A > B

只会匹配那些作为第一个元素的直接后代(子元素)的第二元素。

当两个元素由后代选择器相连时,它表示匹配存在的所有由A元素作为祖先元素(但不一定是父元素)的B元素,无论它(B)在DOM中跳跃多少次

后代选择器: A B

只匹配那些由A作为祖先元素的所有B元素(后代元素) 后代选择器与子选择器很相似,但是后代选择器不需要匹配元素之间要有严格的父子关系

伪元素

::after

用来创建一个伪元素,作为已选中的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。

a::after {
  content: "⬅️";
}

::befor

创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素

a::before {
	content: "💗";
}

::cue

匹配所选元素中的WebVTT提示。这可以用于VTT轨道的媒体中使用字幕和其他线索

只有CSS一小部分属性可以与::cue伪元素一起使用

::first-letter

会选中某 block-leve element (块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容

::first-line

在某block-level element (块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小

和其他所有的伪元素一样,::first-line 不能匹配任何真实存在的html元素

::selection

应用于文档中用户高亮的部分(不如使用鼠标或其他选择设备选中的部分)

::slotted()

用于选定那些被放在HTML模版中的元素

CSS概念

语法和语义

CSS语法

层叠样式表 (Cascading Stylesheet 简称CSS), 其基本目标是让浏览器以指定的特性去绘制页面元素,比如颜色,定位,装饰。CSS的语法反映了这个目标,由下面两个部分构件:

image-20190727162155045

@规则

一个at-rule 是一个CSS语句,以at符号开头,’@’,后跟一个标识符,并包括直到下一个分号的所有内容, ‘;’, 或下一个CSS块,以先到者为准

下面是一些@规则,由它们的标识符指定,每种规则都有不同的语法:

条件规则组

一些@规则可以归为一类: 条件规则组. 这些语句使用相同的语法。它们都嵌套语句或者是规则或者是@规则。

条件规则组

CSS层叠

层叠顺序

层叠是按 升序排列 的,这意味着来着用户自定义样式表的!important值比用户代理样式表的普通值优先级高:

  来源 重要程度
1 用户代理 普通
2 用户代理 !important
3 用户 普通
4 页面作者 普通
5 CSS动画  
6 页面作者 !important
7 用户 !important

继承

继承属性

当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值

举个🌰

css

p { color: green; }

html:

<p>This paragraph has <em>emphasized text</em> in it.</p>

文本“emphasized text” 就会呈现为绿色,因为em 元素继承 了p元素color 属性的值,而没有获取color属性的初始值

非继承属性

当元素的一个非继承属性没有指定时,则取属性的初始值

非继承属性的一个典型例子就是border属性。

又举个🌰

css

p { border: medium solid; }

html

<p>This paragraph has <em>emphasized text</em> in it.</p>

文本”emphasized text” 就没有边框,因为 border-style 属性的初始值为 none

inherit关键字允许显式的声明继承性,它对继承和非继承属性都生效。

可以使用all简写属性一次控制所有属性的继承,该属性将其值应用于所有属性

CSS 的简写属性

定义

简写属性是可以让你同时设置其他几个CSS属性值的CSS属性。使用简写属性,Web开发人员可以编写更简洁、更具可读性的样式表,节省时间和精力

CSS的规范定义间歇属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS的background 属性就是一个简写属性,它可以定义 background-color、background-image、backgrounders-repeat和 background-position 的值。类似地,最常见的字体相关的属性可以使用font的简写,盒子(box)各方向的外边距可以使用margin 这个简写。

棘手的边界情况
  1. 没有 指定的值会被设置为它的初始值。
  2. 关键词inherit只可以应用于单独属性,如果应用于一个简写属性,则必须整体应用,而能对简写属性值的每一个部分单独应用。
  3. 简写属性不试图强制它们替代属性的值的特定顺序。但当几个属性可以设置相同值的时候,就没有那么简单了

优先级

  1. 类型选择器和伪元素
  2. 类选择器,属性选择器,伪类
  3. ID选择器
!important 规则
Top
Foot