css选择器主要类型

  • id选择器(#myid)
  • 类选择器(.myclassname)
  • 标签选择器(div, h1, p)
  • 相邻选择器(h1 + p)
  • 子选择器（ul > li）
  • 后代选择器（li a）
  • 通配符选择器（*）
  • 属性选择器（a[rel=”external”]）
  • 伪类选择器（a:hover, li:nth-child）
  • 条件逻辑选择器 is(a)

并列

“，” 为所有元素设置相同样式
a,b 表示为a和b设置相同样式；

兄弟选择器

同级元素即元素层级相同，有共同的父元素，也可以叫做兄弟元素。所以“兄弟”选择器也就是选择同层级元素。

1.“~” 选择后面的所有同级元素
a~b 表示选择a后面的所有同级b；

2.“+” 相邻兄弟选择器，选择紧随在后面的同级元素
a+b表示选择a后面的同级b。

子元素选择器

E>F 子元素选择器，匹配所有E元素的子元素F

后代选择器

a b 表示选择a中的所有b

属性选择器

通过属性可以更精准的选择元素。

1、简单属性选择

选择含有某个属性的所有元素

例：

  1. *[title] {color:red;}
  2. image[alt] {}
  3. p[class] {}

2、css3新增属性选择器

在CSS3中追加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]

例：
[class*= “col-“] 代表包含 col- 的类名 ，比如说 col-md-4 ,demo-col-2(这个是虚构的)等都可以匹配到。
[class^=”col-“] 代表 以 col- 开头的类名，比如说 col-md-4
[class$=”col-“] 代表以 col- 结尾的类名

这是不是和正则有点像呢？
^[0-9] 代表 匹配以数字开头的
而 [0-9]$ 代表匹配以数字结尾的

:not() 伪类选择器

:not() 伪类选择器来决定表单是否显示边框

/ 添加边框 / .nav li { border-right: 1px solid #666;* }

为最后一个元素去除边框

/ 去掉边框 / .nav li:last-child { border-right:none;* }

不过不要这么做，使用 :not() 伪类来达到同样的效果：

.nav li:not(:last-child) { border-right: 1px solid #666;* }

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素

使用属性选择器选择空链接
显示没有文本值但是 href 属性具有链接的 a 元素的链接：
a[href^=”http”]:empty::before { content: attr(href);}

css属性选择器手册
https://www.w3cschool.cn/css_series/css_series-lfyq24qj.html

条件逻辑选择器

在 CSS 选择器家族中，新增这样一类比较新的选择器 — 逻辑选择器，目前共有 4 名成员：

  • :is
  • :where
  • :not
  • :has

https://mp.weixin.qq.com/s/q7T1yOk2MRLpeFyVCYokOA

现代 CSS 框架运行的一种方式是通过使用条件逻辑选择器。换言之，:is() 和 :where() 属性可以用于同时设置多种设计元素的样式。但是，更重要的是，你可以使用这些属性去查询你需单独处理的元素。

  2. :where(h2,h3,h4) > b {
  3.   color: blue;
  4. }
  6. :is(h2):where(.content-title) {
  7.   text-transform: uppercase;
  8. }