css学习

郦昆

2023-12-01

**一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
**

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。

CSS构建块

级联和继承

鼠标悬停时链接边框样式

/* specificity: 0033 */ 
div div .nav:nth-child(2) a:hover {
border: 10px double black;
}

CSS选择器

在CSS中，选择器用于定位我们要设置样式的网页上的HTML元素。

它告诉浏览器应选择哪些HTML元素以将规则内的CSS属性值应用于它们。选择器选择的一个或多个元素称为选择器的主题。

大多数选择器都是在Level 3 Selectors规范（这是一个成熟的规范）中定义的，因此您会发现这些选择器具有出色的浏览器支持。

选择器列表

选择器类型

1.类型，类别和ID选择器

该组包括针对HTML元素（例如）的选择器<h1>

它还包括针对一个类的选择器：.box { }

或者，ID：#unique { }

2.属性选择器

这组选择器为您提供了基于元素上某个属性的存在来选择元素的不同方法：

a. 存在和值选择器

css

li[class] {
font-size: 200%;
}

li[class="a"] {
background-color: yellow;
}

li[class~="a"] {
color: red;
}

html

<h1>Attribute presence and value selectors</h1>
<ul>
<li>Item 1</li>
<li class="a">Item 2</li>
<li class="a b">Item 3</li>
<li class="ab">Item 4</li>
</ul>

b. 子串匹配选择器

选择器			例					描述<br/>

[attr^=value] li[class^="box-"]匹配属性名称为attr的元素，其值的开头为子字符串值。

[attr$=value] li[class$="-box"] 匹配属性名称为attr的元素，该元素的值在其末尾具有子字符串值。

[attr*= ] li[class*="box"] 匹配属性名称为attr的元素，该元素的值在字符串中的任何位置至少包含一次出现的子字符串值。

li[class="a" i] {  #i:不区分大小写
color: red;
}

甚至根据具有特定值的属性的存在进行选择：

a[href="https://example.com"] { }

试试看：

a {
border: 5px solid grey;

}
a[title] {
  border-color: red;
}
a[href*="contact"]{
border-color: orange

}
a[href^="https"]{
border-color: green
}

<ul>
<li><a href="https://example.com">Link 1</a></li>
<li><a href="http://example.com" title="Visit example.com">Link 2</a></li>
<li><a href="/contact">Link 3</a></li>
<li><a href="../contact/index.html">Link 4</a></li>
</ul>

3. 伪类和伪元素

这组选择器包括伪类，它们为元素的某些状态设置样式。:hover例如，伪类仅在将鼠标指针悬停在元素上时才选择它：

a:hover { }

它还包括伪元素，这些伪元素选择元素的某个部分而不是元素本身。例如，::first-line始终选择元素内的文本的第一行（<p>以下情况为a），就像将a <span>环绕在第一格式化行上然后选择一样。

p::first-line { }

a. 什么是伪类？

article p:first-child {
font-size: 120%;
font-weight: bold;
}

看一下有关MDN的其他一些示例：

:last-child
:only-child
:invalid

b.用户操作伪类

某些伪类仅在用户以某种方式与文档交互时适用。这些用户操作伪类（有时称为动态伪类）的行为就像在用户与元素进行交互时已将其添加到元素中一样。示例包括：

:hover上文提到的; 仅当用户将指针移动到元素（通常是链接）上时才适用。
:focus —仅在用户使用键盘控件聚焦元素时适用。

css

a:link,
a:visited {
color: rebeccapurple;
font-weight: bold;
}

a:hover {
color:hotpink;
}  
#html
<p><a href="">Hover over me</a></p>

c. 什么是伪元素？

伪元素的行为类似，但是它们的行为就像您在标记中添加了一个全新的HTML元素一样，而不是将类应用于现有元素。伪元素以双冒号开头::。

article p::first-line {
font-size: 120%;
font-weight: bold;
}

使用:: before和:: after生成内容

.box::before {
content: "This should show before the other content."
}   
<p class="box">Content in the box in my HTML page.</p>
#输出：伪元素与content属性一起使用以使用CSS将内容插入文档中

这些伪元素的一种更有效的用法是插入一个图标，例如在下面的示例中添加的小箭头，它是一种可视指示符，我们不希望屏幕阅读器将其读出：

.box::after {
content: " ➥"
}

这些伪元素还经常用于插入空字符串，然后可以像在页面上的任何元素一样设置其样式。

.box::before {
content: "";
display: block;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}  
#html
<p class="box">Content in the box in my HTML page.</p>

一个很好的例子是网站CSS Arrow Please，它可以帮助您使用CSS生成箭头。在创建箭头时查看CSS，您将看到::before和使用的::after伪元素。每当您看到这些选择器时，请查看content属性以查看要添加到文档中的内容。
####d. 结合伪类和伪元素 ####

article p:first-child::first-line { 
  font-size: 120%; 
  font-weight: bold; 
}

e. 参考部分

伪类和伪元素

4.组合器

最后一组选择器将其他选择器组合在一起，以定位文档中的元素。以下示例<article>使用子组合器（>）选择是元素的直接子项的段落：

article > p { }

a. 如果元素应用了多个类，则将其定位

html

`<div class="notebox">`

This is an informational note.

`</div>`

`<div class="notebox warning">`

This note shows a warning.

`</div>`

`<div class="notebox danger">`

This note shows danger!

`</div>`

css

.notebox {
border: 4px solid #666;
padding: .5em;
}

.notebox.warning {
border: 4px solid orange;
font-weight: bold;
}

.notebox.danger {
border: 4px solid red;
font-weight: bold;
}

b.ID选择器

c.后代选择器

body article p

.box p {
color: red;
}

d.儿童组合器

仅当选择器选择直接子元素时才匹配。

article > p

e.相邻兄弟姐妹

p + img

h1 + p { #对p进行设置
font-weight: bold;
background-color: #333;
color: #000;
padding: .5em;
}

f.一般同级

h1 ~ p {  #h1之后的p
font-weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}

####g. 使用组合器 ####

选择器与组合器结合使用，以挑选出文档的一部分

ul > li[class="a"]  {  }