美文网首页
H5:CSS一瞥

H5:CSS一瞥

作者: 春暖花已开 | 来源:发表于2021-06-17 10:04 被阅读0次

设置元素的 display 属性仅会更改元素的显示方式,而不会更改元素的种类。因此,带有 display: block; 的行内元素不允许在其中包含其他块元素。


positon

  1. position: relative; 的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

  2. position: absolute; 的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。

    注意:“被定位的”元素是其位置除 static 以外的任何元素。

  3. position: sticky; 的元素根据用户的滚动位置进行定位。

    粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置(比如 position:fixed)。


z-index

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。如果两个定位的元素重叠而未指定 z-index,则位于 HTML 代码中最后的元素将显示在顶部。

使用
  • 必须在定位元素(position:relative/absolute/fixed/sticky)上才有效;
  • 可以有负值;
  • 不同父元素的子元素之间进行显示时,会根据父级元素的z-index进行渲染。

CSS属性选择器

1. CSS [attribute]

[attribute] 选择器用于选取带有指定属性的元素。

a[target] {
  background-color: yellow;
}

上面的例子会选择所有带有 target 属性的 a 元素。

2. CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

a[target="_blank"] { 
  background-color: yellow;
}

上面的例子会选取所有带有 target="_blank" 属性的 a 元素。

3. CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器选取属性值包含指定词的元素。

[title~="flower"] {
  border: 5px solid yellow;
}

上面的例子会匹配以下属性的元素:title="flower"、title="summer flower" 以及 title="flower new",但不匹配:title="my-flower" 或 title="flowers"。

4. CSS [attribute|="value"] 选择器

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

[class|="top"] {
  background: yellow;
}

上面的例子会选取 class 属性以 "top" 开头的所有元素;但值必须是完整或单独的单词,比如 class="top" 或者后跟连字符的,比如 class="top-text"。

5. CSS [attribute^="value"] 选择器

[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

[class^="top"] {
  background: yellow;
}

上面的例子会选取 class 属性以 "top" 开头的所有元素,值不必是完整单词。比如:class="top-header"、class="top-header"、class="topcontent"都会被匹配。

6. CSS [attribute$="value"] 选择器

[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。

[class$="test"] {
  background: yellow;
}

上面的例子会选取 class 属性以 "test" 结尾的所有元素;值不必是完整单词

7. CSS [attribute*="value"] 选择器

[attribute*="value"] 选择器选取属性值包含指定词的元素。

[class*="te"] {
  background: yellow;
}

上面的例子会选取 class 属性包含 "te" 的所有元素;值不必是完整单词。比如,class="my-test",class="mytest"。


CSS 组合器

组合器是解释选择器之间关系的某种机制。

CSS 中有四种不同的组合器:

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)
1. 后代选择器

后代选择器匹配属于指定元素后代的所有元素。

div p {
  background-color: yellow;
}

上面的例子会选择 <div> 元素内的所有 p 元素。

2. 子选择器

子选择器匹配属于指定元素子元素的所有元素。

div > p {
  background-color: yellow;
}

上面的例子会选择属于 <div> 元素子元素的所有 p 元素。

3. 相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”

div + p {
  background-color: yellow;
}

上面的例子会例子选择紧随 <div> 元素之后的所有 p 元素。

4. 通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

div ~ p {
  background-color: yellow;
}

上面的例子会选择属于 <div> 元素的同级元素的所有 p 元素。


伪元素

CSS 伪元素用于设置元素指定部分的样式。

选择器 例子 例子描述
::after p::after 在每个 p 元素之后插入内容。
::before p::before 在每个 p 元素之前插入内容。
::first-letter p::first-letter 选择每个 p 元素的首字母。
::first-line p::first-line 选择每个 p 元素的首行。
::selection p::selection 选择用户选择的元素部分。

CSS伪类

选择器 例子 例子描述
:active a:active 选择活动的链接。
:checked input:checked 选择每个被选中的 input 元素。
:disabled input:disabled 选择每个被禁用的 input 元素。
:empty p:empty 选择没有子元素的每个 p 元素。
:enabled input:enabled 选择每个已启用的 input 元素。
:first-child p:first-child 选择作为其父的首个子元素的每个 p 元素。
:first-of-type p:first-of-type 选择作为其父的首个 p 元素的每个 p 元素。
:focus input:focus 选择获得焦点的 input 元素。
:hover a:hover 选择鼠标悬停其上的链接。
:in-range input:in-range 选择具有指定范围内的值的 input 元素。
:invalid input:invalid 选择所有具有无效值的 input 元素。
:lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的 p 元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个 p 元素。
:last-of-type p:last-of-type 选择作为其父的最后一个 p 元素的每个 p 元素。
:link a:link 选择所有未被访问的链接。
:not(selector) :not(p) 选择每个非 p 元素的元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 p 元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个p元素,从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个p元素的每个p元素,从最后一个子元素计数
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 p 元素的每个 p 元素。
:only-of-type p:only-of-type 选择作为其父的唯一 p 元素的每个 p 元素。
:only-child p:only-child 选择作为其父的唯一子元素的 p 元素。
:optional input:optional 选择不带 "required" 属性的 input 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 input 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 input 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 input 元素。
:required input:required 选择指定了 "required" 属性的 input 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。
:valid input:valid 选择所有具有有效值的 input 元素。
:visited a:visited 选择所有已访问的链接。

相关文章

网友评论

      本文标题:H5:CSS一瞥

      本文链接:https://www.haomeiwen.com/subject/jopvcltx.html