自学——一个月入门前端②

css学习

属性选择器

[attr] 表示a[title] 表示在a中的含有这个属性的标签。
a[href=“https://example.com”] 表示这个值恰好是这个的标签。
p[class~=“special”] 其值有一个或者很多，只要有的就会包含进来

字符串匹配
^ li[class^=“box-”] 以box-为开头的子字符串
$ li[class^=“box-”] 以box-为结尾的子字符串
li[class*=“box”] 在值的任意位置出现过的子字符串。

选择器

.box 表示class选择器，#box表示id选择器。a[title]标签属性选择器，a[href=“xxx”]。
伪类，伪类也是一种选择器，用来格式化一个元素的特定状态。例如:hover伪类会悬浮显示。p::first-line 表示伪元素。选择元素的某个部分而不是元素自己。

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

会让这个p的第一行应用这个修改。
结合起来之后：

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

关系选择器

后代选择器： 使用空格例如：.box p { color: red;} 留下的就是box中的p
子代关系选择器： >表示直接子元素的匹配，直接继承关系上的子后代，关系更远的后代不会进行匹配。
临接兄弟： + 表示这个之后紧接着的有变化。
通用兄弟 ~表示这个之后的所有的下一个标签都变化。

---

测试链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks

第一题：

h1 {
 color: blue;
}
h2 {
 color: white;
 background-color: blue;
}
span {
  font-size: 200%;
}

第二题：

#special {
 background-color: yellow;
}
.alert {
 border: solid grey 1px;
}

.alert.stop {
 background-color: red;
}
.alert.go {
 background-color: green;
} 

第三题：这个题目，条带化还给我搞晕了，可以直接忽略这句话。

/* 链接文本的样式：使链接为橘色，被访问后变为绿色，当被 hover 时，移除链接文本的下划线。
让容器里的第一个元素的字体大小为:150%，并且让这个元素的第一行是红色的。
让表格中每隔一行条带化，分别给它们一个颜色为#333 的背景和一个白色前景。 */
p:first-child {
  color: orange;
}

a:visited {
  color: green;
}
a:hover {
  text-decoration: none;
}

div::first-letter {
  font-size: 150%;
}
div::first-line {
  color: red;
}
tr:nth-child(even) {
  background-color: #333;
  color: white;
}

第四题：

h2 + p {
  color: red;
}
.list > li {
  list-style: none;
  border-bottom: solid 1px grey;
}

第五题：

a[title] {
  border-style: solid;
  border-color: pink;
}
a[href*="contact"] {
  border-style: solid;
  border-color: orange;
color:red;
}
a[href^="https"] {
  border-style: solid;
  border-color: green;
}