css选择器、伪类、权重性学习文章

子选择器与后代选择器

#nav > li {
	…… 孙集不受影响
}

同辈选择器

h2 + p {
	…… 同辈相邻选择器，位于某个元素后面
}

一般同辈组合子

h2 ~ p {
	…… 选择h2元素后面的所有段落
}

属性选择符

abbr[title] :hover{
	cursor: help;
	…… 鼠标指针悬停时显示问号标识
}
input[type = 'submit'] {
	cursor: pointer;
	…… 当input状态等于提交鼠标指针为手指标识；
}
a[href^="http"] {
	…… 匹配http开头
}
a[href$=".jpg"] {
	…… 匹配.jpg结尾
}
a[href*="/about/"] {
	…… 匹配某些字符属性值
}
a[rel~=next] {
	…… 匹配以空格分隔的字符串中的属性值 如rel属性的值
}
a[lang|en] {
	…… 匹配属性值为en 和en-us
}

伪元素

::first-letter {
	…… 选择一段文本第一个字符
}
::first-line {
	…… 选择一段文本第一行字符
}
// 伪类选择器
a:link {
	color: blue;
	…… 未访问过的链接为蓝色
}
a:visited {
	color: green;
	…… 访问过的链接为绿色
}
a:hover, a:focus {
	color: red；
	…… 悬停或聚焦为红色
}
a:active{
	color: purple;
	…… 点击后状态时为紫色
}
先后次序很重要： link => visited => hover | focus => active
hover 是其他元素后能使用的伪类。

目标和反选

锚链接：定位到页面某个语句的位置
<a href="http://example.com/blog/1/#comment-3"></a>
<article class="comment" id="comment-d">……</article>
.comment:target {
	background-color: #fffec4;
	…… 该语句被锚链接击中会高亮, 此为目标
}
.comment:target:not(.comment-downvoted) {
	background-color: #000;
	…… :not此为反选 (.comment-downvoted) 当前元素的特殊类名
}

结构化

tr:nth-child(odd) {
  background-color: yellow;
  …… 奇数 隔行变色
}
tr:nth-child(even) {
  background-color: red;
  …… 偶数 隔行变色
}
tr:nth-child(3) {
  background-color: purple;
  …… 指定第几位元素
}
tr:nth-child(3n+4) {
  background-color: #ddd;
  …… 4 表示从4开始，3 表示后续元素每一个次序位置 即 4 7 10
  底层逻辑为 n默认为0
  3*n = 0 + 4
  3*1 = 3 + 4
  3*2 = 6 + 4
  3*3 = 9 + 4
  3*4 = 12 + 4
}
tr:nth-child(-n+3) {
  …… 选中前面3个元素
}
tr:nth-last-child(n) {
  …… 倒序第多少开始
}
tr:first-child {
  …… 同：nth-child(1){}
}
tr:last-child {
  …… 同：nth-last-child(1) {}
}
p:only-child{
  background-color: orange;
  …… 只有一个p元素满足条件下
}
tr:nth-of-type {
  background: orange;
  …… 与:only-child 相反，匹配条件下多个元素
}
tr:nth-last-of-type(2){
  background: red;
  …… 倒数第二个
}
tr:not(:nth-child(2)){
  background: red;
  …… 不包含第二个
}

表单伪类

<label for="diele-name">Name：</label>
<input type="text" name="field-name" id="diele-name" required>

input:required {
  output: 2px solid #000;
   …… 表示指向带required属性的元素
}
input:optional {
  output: 2px solid #ddd;
  …… 与:required语义相反，指向不带:required元素
}
// email
<input type="email"/>

input[type="email"]:valid {
  border-color: green;
  …… 包含有效的电子邮件地址
}
input[type="email"]:invalid {
  border-color: red;
  …… 包含不是有效的电子邮件地址
}
input[type="number"]:in-range{}
input[type="number"]:out-of-range{}
input:read-only {}
input:read-write {}

text-decoration: underline wavy; // 给内容加上波浪线

层叠机制

层叠机制的重要性级别从高到低。

标注为!important的用户样式；
标注为!important的作者样式；
作者样式；
用户样式；
浏览器（或用户代理）的默认样式；

在此基础上，规则再按选择符的特殊性排序。特殊性高的选择符会覆盖特殊性低的选择符。如果两条规则的特殊性相等，则后定义的规则优先。

特殊性

为了量化规则的特殊性，每个属性对应一个数值，css捕获有四种。行内、id选择器、类选择器、标签选择器。而这种特殊性则代表了css优先级权限。

      选择符                    特殊性                十进制特殊性
      style=""                 1, 0, 0, 0                1000
      #warp #content           0, 2, 0, 0                200
      #content .data-posted    0, 1, 1, 0                110
      div#content              0, 1, 0, 1                101
      #content                 0, 1, 0, 0                100
      p.comment .data-posted   0, 0, 2, 1                21
      p.comment                0, 0, 1, 1                11
      div p                    0, 0, 0, 2                2
      p                        0 ,0, 0, 1                1
      *                        0 ,0, 0, 0                0
      继承属性值                                         >0

display: grid;

      width: 1000px;
      height: 400px;
      background-color: #ccc;
      display: grid;
      grid-template-rows: 100px 100px auto minmax(4em, 1fr);
      grid-template-columns: 1fr 100px 35% repeat(30px, 3);
      grid-template-areas: 'q w e' 'a s d' 'z x c';
      grid-auto-flow: row dense;
      justify-items: center; place-items: center center;
      justify-content: center;
      align-content: center;
      align-items: center;
      grid-auto-rows: 50px;
      gap: 10px;
      <!-- child -->
      grid-column-start: 1; // grid-column: 1/3;
      grid-column-end: 4;
      grid-column: 1/2;
      grid-column-start: span 2;
      grid-column-end: span 2;
      grid-area: s;