【夯实基础--CSS】=>复合选择器

687 阅读8分钟

CSS复合选择器

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的

「1. 后代选择器」

又称为包含选择器

  • 用来选择元素或元素组的子孙后代
  • 其写法就是把外层标签写在前面,内层标签写在后面,中间用**「空格」**分隔,先写父亲爷爷,再写儿子孙子。
  • 子孙后代都可以这么选择。或者说,它能选择任何包含在内 的标签。
父级 子级{属性:属性值;属性:属性值;}

.class h3 {color:red;font-size:16px;}
  • 当标签发生嵌套时,内层标签就成为外层标签的后代。
  • 子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。

「2. 子元素选择器」

  • 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
  • 其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接
  • 这里的子,指的是亲儿子。不包含孙子 重孙子之类。
.class>h3 {color:red;font-size:14px;}

「3. 交集选择器」

  • 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。
交集选择器是并且的意思,即...又...的意思
比如:  
p.one   {}
选择的是: 类名为 .one 的段落标签。 
/*用的相对来说比较少,不建议使用。*/

「4. 并集选择器」

如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。并集选择器(CSS选择器分组)是各个选择器通过,连接而成的,通常用于集体声明。

  • 任何形式的选择器(包括标签选择器、class类选择器 id选择器等),都可以作为并集选择器的一部分。
  • 并集选择器通常用于集体声明 ,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为和的意思。
比如  
.one, 
p , 
#test {color: #F00;}  

表示   .onep#test 

这三个选择器都会执行颜色为红色。 通常用于集体声明。  

「5. 链接伪类选择器」

用于向某些选择器添加特殊的效果。写的时候,他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。

链接伪类,是利用交集选择器.

  • a:link 未访问的链接
  • a:visited 已访问的链接
  • a:hover 鼠标移动到链接上
  • a:active 选定的链接

实际工作中,很少写全四个状态,一般写法如下:

a {   /* a是标签选择器  所有的链接 */
   font-weight: 700;
   font-size: 16px;
   color: gray;
      text-decoration: none; /* 清除链接默认的下划线*/
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
   color: red; /*  鼠标经过的时候,由原来的 灰色 变成了红色 */
}

「6. 结构(位置)伪类选择器(CSS3)」

  • :first-child :选取属于其父元素的首个子元素的指定选择器
  • :last-child :选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型
  • :nth-of-type(n): 简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选,也就是选择的参照点并不是DOM数,而是自身。
  • :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。 n 可以是数字、关键词或公式
li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}
nth-child介绍

nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。

使用它的时候需要注意几点:
  • 第n个子元素的计数是从1开始,不是从0开始的
  • 选择表达式中的字母n代表≥0的整数
它有3种常见用法
  • 直接指明n的值:span:nth-child(1)
  • 用even/odd分别代表偶数 / 奇数:span:nth-child(even)
  • 借助n自定义选择范围:
    • nth-child(2n)/nth-child(2n + 1):偶数 / 奇数
    • nth-child(n + 3):第3个开始到最后
进阶用法

上面的用法中的第三部分,一般都是使用n,而有时候也会用到-n,比如选取前2个元素就是:nth-child(-n + 2)。

为什么是这样呢?其实运算:-n + 2 ≥ 0,就可以推出n ≤ 2。 由此,结合两者自动取交集,我们就可以限制选择某一范围。

比如选择第6个到第9个,就是::nth-child(-n+9):nth-child(n+6) 注意:不是nth-child(2 - n),-n要写在一起! 真正理解“子元素”的含义 还是nth-child选择器,那么下面这段代码的样式是什么呢?

<html>
<head>
  <style>
    span:nth-child(2n) {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
  </div>
  <span>3</span>
</body>
</html>

答案是:1是黑色的,2和3都是红色的。

因为<span>2</span>是其父节点的第2个(偶数)子元素,<span>3</span>是其父节点的第2个子元素,第一个是<div></div>

所以辨别是否匹配的关键是:找到父元素,然后再计算在父元素中的位置。

nth-of-type与nth-child的区别

nth-of-child:

​ 它的属性就是按照所有类型标签的所谓整体队列进行排序筛选,也就是说不论你是h1,span还是p标签,使用这个属性你要遵循在DOM树中的顺序来进行操作。

nth-of-type:

​ 简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选,也就是选择的参照点并不是DOM数,而是自身。就是按照类型来计算,碰到一个同类型就加1。

「7. 目标伪类选择器(CSS3)」

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {
		color: red;
		font-size: 30px;
}

「8. 复合选择器总结」

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择元素后代是选择所有的子孙后代较多符号是空格 .nav a
子代选择器选择 最近一级元素只选亲儿子较少符号是> .nav>p
交集选择器选择两个标签交集的部分既是 又是较少没有符号 p.one
并集选择器选择某些相同样式的选择器可以用于集体声明较多符号是逗号 .nav, .header
链接伪类选择器给链接更改状态较多重点记住 a{} 和 a:hover 实际开发的写法

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

选择器含义
E[attr]存在attr属性即可
E[attr|=val]选择attr属性的值是 val 或值以 val- 开头的元素
E[attr=val]属性值完全等于val
E[attr^=val]属性值里面包含val字符并且在“开始”位置
E[attr$=val]属性值里面包含val字符并且在“结束”位置
E[attr*=val]属性值里面包含val字符并且在“任意”位置
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
			color: pink;
		}
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
			color: skyblue;
		}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
		}
	<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>

存在和值(Presence and value)属性选择器节

这些属性选择器尝试匹配精确的属性值:

  • [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
  • [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  • [attr~=val]:该选择器仅选择具有 attr 属性的元素,而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

让我们看一个特别的例子,下面是它的的HTML代码:

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

和一个简单的样式表:

/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
[data-vegetable] {
  color: green
}

/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素,
即使元素的属性中还包含其他属性值,都会被应用红色的文本颜色 */
[data-vegetable~="spicy"] {
  color: red;
}

伪元素选择器(CSS3)

E::first-letter

文本的第一个单词或字(如中文、日文、韩文等)

E::first-line

文本第一行;

E::selection

可改变选中文本的样式;

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

E::before和E::after

在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素

神图💯

image.png