《重学前端》学习笔记Day116

CSS 选择器

选择器的基本意义是：根据一些特征，选中元素树上的一批元素。
选择器的结构分一下类：
简单选择器：针对某一特征判断是否选中元素
复合选择器：连续写在一起的简单选择器，针对元素自身特性选择某个元素
复杂选择器：由"空格", ">", "~", "+", "||"等符号连接的复合选择器，根据父元素或者前序元素检查单个元素
选择器列表：由逗号分隔的复杂选择器，表示“或”的关系

简单选择器

类选择器和全体选择器

根据一个元素的标签名选中元素

div {

}

需要注意的，要考虑HTML和XML元素的命名空间问题。
比如svg元素，实际上在： http://www.w3.org/2000/svg 命名空间之下。
svg和HTML中都有a元素，我们若要想区分选择svg中的a和HTML中的a，就必须用带命名空间的类型选择器。

@namespace svg url(http://www.w3.org/2000/svg);
@namespace html url(http://www.w3.org/1999/xhtml);
svg|a {
    stroke:blue;
    stroke-width:1;
}
html|a {
    font-size:40px
}

全体选择器"*"，可以选中任意元素。

id选择器和class选择器

id选择器和class选择器都是针对特定属性的选择器。id选择器是“#”号后面跟随id名，class选择器是“.”后面跟随class名。

#myid {
    stroke:blue;
    stroke-width:1;
}
.mycls {
    font-size:40px
}

属性选择器理论上可以一定程度上替代id选择器和类选择器。需要注意的，class选择器识别的是：用空格分隔的class语法。class属性可以空格分隔多个值，多个class值都能选中元素，也可以使用多个class选择器来要求元素具有多个类。

属性选择器

属性选择器根据HTML元素的属性来选中元素。属性选择器有四种形态。
第一种，[att]
检查元素是否具有这个属性，只要元素有这个属性，不管值什么值，都能选中。
第二种，[att=val]
精确匹配，检查一个元素的值是否为val
第三种，[att~=val]
多种匹配，检查一个元素的属性值是否是若干值之一。这里val不是一个单一的值，可以是一个用空格分隔的一个序列
第四种，[att|=val]
开头匹配，检查一个元素的值是否是以val开头，与精准匹配的区别是属性只要以val开头即可，后面内容不管。

伪类选择器

树结构关系伪类选择器

链接与行为伪类选择器
:any-link 表示任意链接
:link 表示未访问的链接
:hover 表示鼠标悬停上的元素
:active 表示用户正在激活这个元素
:visibled 表示已访问的链接
:focus 表示焦点落在这元素之上
:target 用户选中浏览器URL的hash部分所指示的元素

还有target-within、focus-within等伪类
逻辑伪类选择器
:not 伪类
其他伪类选择器

此文章为7月Day19学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪