【CSS】选择器汇总

文章目录

    • 一、选择器权重
    • 二、基础选择器
      • 2.1、通配符(*)
      • 2.2、标签选择器(h1)
      • 2.3、 id选择器(#)
      • 2.4、class选择器(.)
    • 三、层级选择器
      • 3.1、群组选择器(E,F)
      • 3.1、包含选择器(E F)
      • 3.1、子元素选择器(E>F)
      • 3.1、相邻兄弟选择器(E+F)
      • 3.1、 通用选择器(E~F)
    • 三、 属性选择器
      • 3.1、 [attribute]选择器
      • 3.2、 [attribute=value]选择器
      • 3.3、 [attribute~=value]选择器
      • 3.4、 [attribute|=value]选择器
      • 3.5、 [attribute^=value]选择器
      • 3.6、 [attribute$=value]选择器
      • 3.7、 [attribute*=value]选择器
    • 四、伪类选择器(:)
      • 4.1、动态伪类选择器
      • 4.2、结构伪类选择器
      • 4.3、其他伪类选择器
    • 五、伪元素选择器(::)

一、选择器权重

选择器的定义:选择器表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素。

  • css中用四位数字表示样式权重,权重的表达方式如:0,0,0,0元素
  • 注意:如果权重相同,则执行后写的样式
选择器 权重
内联样式 1000
id选择器 0100
class选择器 0010
属性选择器 0010
伪类选择器 0010
标签选择器 0001
伪元素选择器 0001
子选择器 0000
通配符 0000
相邻选择器 0000
包含选择器 所包含选择符的权重之和
继承样式 没有权重
  • 当不同选择器的样式设置有冲突的时候,高权重选择器会覆盖低权重选择器的样式
b .demo的权重是1+10=11
.demo的权重为10
/* 所以经常会发生.demo的权重的样式失效 */
  • !important 代表着最高权重(最终样式),慎用
background-color: red !important;

相同权重的选择器,样式遵循就近原则:那个选择符最后定义,就采用哪个选择符的样式。
注意:是css样式中定义该选择符的先后,而不是html中使用先后

二、基础选择器

2.1、通配符(*)

语法:* {属性:属性值;}

说明
代表了所有元素,常用来重置样式
实例

*{margin:0; padding:0;}

2.2、标签选择器(h1)

语法:元素名称{属性:属性值;}

说明

  1. 元素选择器就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。
  2. 所有的页面元素都可以作为选择符
  3. 类型选择器是直接根据html语言中的标记来直接定义的

实例

p{ color:red; }

2.3、 id选择器(#)

语法:#id名{属性:属性值;}

说明

  1. 当我们使用id选择器时,应该为每个元素定义一个id属性;
<div id="top">div>
  1. id选择器的语法格式是“#”加上自定义的id名:
#box{width:100px; height:100px;}
  1. 起名时要取英文名,不能用关键字(所有标签和属性都是关键字)
  2. 一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素对象。
  3. 最大的用途:创建网页的外围结构

2.4、class选择器(.)

语法:.class名{属性:属性值;}

说明
当我们使用类选择器时,应该为每个元素定义一个类名称。class选择器更适合定义一类样式。
实例

<div class="top">div>

三、层级选择器

3.1、群组选择器(E,F)

语法:选择符1,选择符2,…{属性:属性值;}

说明
当有多个选择符应用相同的样式时,可以用“,”分割的方式,合并为一组。
实例

p,.top,#nav{width:100px;}

3.1、包含选择器(E F)

语法:选择符1(父) 选择符2(子){属性:属性值;}

说明
选择符1和选择符2用空格隔开,表示选择选择符1中所包含的所有2选择符
实例 :使div1下的所以子元素p标签的字体颜色变红

<style type="text/css">
	.div1 p{color: red;}
	.div1{border: 6px solid green;}
	.div2{border: 6px solid yellow;}
style>
<div class="div1">
	<h2>我是标题1h2>
	<p>我是段落1p>
	<p>我是段落2p>
	<div class="div2">
		<h2>我是标题2h2>
		<p>我是段落3p>
		<p>我是段落4p>
	div>
div>

运行结果

【CSS】选择器汇总_第1张图片

3.1、子元素选择器(E>F)

语法:选择符1(父)>选择符2(子){属性:属性值;}

说明:选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素。用于选择特定父元素。

实例 :使div1下的子元素p标签的字体颜色变红

<style type="text/css">
	.div1>p{color: red;}
	.div1{border: 6px solid green;}
	.div2{border: 6px solid yellow;}
style>
<div class="div1">
	<h2>我是标题1h2>
	<p>我是段落1p>
	<p>我是段落2p>
	<div class="div2">
		<h2>我是标题2h2>
		<p>我是段落3p>
		<p>我是段落4p>
	div>
div>

运行结果
【CSS】选择器汇总_第2张图片

3.1、相邻兄弟选择器(E+F)

语法:选择符1+选择符2{属性:属性值;}

说明:选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面。用于选择(不是内部)指定的第一个元素之后紧跟的元素。
*
实例 :使紧挨着h2标签的p标签的字体颜色变红

<style type="text/css">
	h2+p{color: red;}
	.div1{border: 6px solid green;}
	.div2{border: 6px solid yellow;}
style>
<div class="div1">
	<h2>我是标题1h2>
	<p>我是段落1p>
	<p>我是段落2p>
	<div class="div2">
		<h2>我是标题2h2>
		<p>我是段落3p>
		<p>我是段落4p>
	div>
div>

运行结果
【CSS】选择器汇总_第3张图片

3.1、 通用选择器(E~F)

语法:选择符1~ 选择符2{属性:属性值;}

说明:选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素。这两种元素必须具有相同的父元素,但 element2 不必紧跟在 element1 的后面。
*
实例 :使div1下h2标签后的所有p标签的字体颜色变红

<style type="text/css">
	.div1 h2~p{color: red;}
	.div1{border: 6px solid green;}
	.div2{border: 6px solid yellow;}
style>
<div class="div1">
	<h2>我是标题1h2>
	<p>我是段落1p>
	<p>我是段落2p>
	<div class="div2">
		<h2>我是标题2h2>
		<p>我是段落3p>
		<p>我是段落4p>
	div>
div>

运行结果
【CSS】选择器汇总_第4张图片

三、 属性选择器

3.1、 [attribute]选择器

语法:选择符 [ 属性名 ]

描述: 用于选取带有指定属性的元素。
实例

<style type="text/css">
	[id]{color: red;}
	/* 选择所有拥有该属性的标签 */
	p[class]{color: green;}
	/* 选择p标签内拥有该属性的p标签 */
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>

运行结果
【CSS】选择器汇总_第5张图片

3.2、 [attribute=value]选择器

语法:选择符 [ 属性名=属性值 ]

描述: 用于选取带有指定属性和值的元素。
实例

<style type="text/css">
	[id=abc]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>

运行结果
【CSS】选择器汇总_第6张图片

3.3、 [attribute~=value]选择器

语法:选择符 [ 属性名~=属性值 ]

描述:用于选取属性值中包含指定词汇的元素。该值必须是整个单词,必须以空格隔开。
实例

<style type="text/css">
	p[class~=abc]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb abc">444p>
<p class="bdc">555p>

运行结果
【CSS】选择器汇总_第7张图片

3.4、 [attribute|=value]选择器

语法:选择符 [ 属性名|=属性值 ]

描述:用于选取带有以指定值开头的属性值的元素,该值必须是整个单词,必须以“-”隔开。
实例

<style type="text/css">
	p[class|=adb]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc adb">333p>
<p class="adb-abc">444p>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201231150202682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Njc3Njcx,size_16,color_FFFFFF,t_70)
<p class="bdc">555p>

运行结果

【CSS】选择器汇总_第8张图片

3.5、 [attribute^=value]选择器

语法:选择符 [ 属性名^=属性值 ]

描述:匹配属性值以指定值开头的每个元素。
实例

<style type="text/css">
	p[class^=a]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>

运行结果
【CSS】选择器汇总_第9张图片

3.6、 [attribute$=value]选择器

语法:选择符 [ 属性名$=属性值 ]

描述:匹配属性值以指定值结尾的每个元素。
实例

<style type="text/css">
	p[class$=c]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>

运行结果
【CSS】选择器汇总_第10张图片

3.7、 [attribute*=value]选择器

语法:选择符 [ 属性名*=属性值 ]

描述:匹配属性值中包含指定值的每个元素。
实例

<style type="text/css">
	p[class*=d]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>

运行结果
【CSS】选择器汇总_第11张图片

四、伪类选择器(:)

简介:CSS 伪类用于向某些选择器添加特殊的效果。
伪类选择器不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

4.1、动态伪类选择器

  • E:link(链接伪类选择器): 定义E元素,未访问的链接状态。
  • E:visited(链接伪类选择器 ):定义E元素,已访问的链接状态。
  • E:active(用户行为选择器): 定义E元素,鼠标点击未抬起时的状态。
  • E:hover (用户行为选择器): 定义E元素,鼠标悬停在上面时的状态。
  • E:focus (用户行为选择器): 定义E元素,鼠标点击了抬起后的状态。

说明:
1)当前4个超链接伪类选择器联合使用时,应注意他们的顺序,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的。。错误的顺序有时会使超链接的样式失效

a:link{color:red;}		/* 未访问的链接状态 */
a:visited{color:green;}	/* 以访问的链接状态 */
a:hover{color:blue;}	/*鼠标滑过链接状态*/
a:active{color:yellow;}	/*鼠标按下去时状态*/

2)为了简化代码,可以把伪类选择器中相同的声明提出来放在a选择符中;使用hover属性来设置样式。

a:hover{color:green;}
/*表示超链接的三种状态都相同,只有鼠标滑过变换颜色*/

4.2、结构伪类选择器

语法 选择 描述
E:first-child 作为父元素的第一个子元素的元素E 与E:nth-child(1)等同
E:last-child 作为父元素的最后一个子元素的元素E 与E:nth-last-child(1)等同
E:root 选择匹配元素E所在文档的根元素。 在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n) 选择父元素E的第n个子元素F。 其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0.
E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F。 此选择器与E:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配最后一个元素,与last-child等同
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素 p:nth-of-type(2) 选择所有p元素第二个为p的子元素
E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素 p:nth-of-type(2) 选择所有p元素倒数的第二个为p的子元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素 与E:nth-of-type(1)等同
E:last-of-tye 选择父元素内具有指定类型的最后一个E元素 与E:nth-last-of-type(1)等同
E:only-child 选择父元素只包含一个子元素,且该子元素匹配E元素 选择仅有一个子元素的E元素
E:only-of-type 选择父元素只包含一个同类型子元素,且该子元素匹配E元素 选择仅有一个子元素为E的元素
E:empty 选择没有子元素的元素 而且该元素也不包含任何文本节点

注意:
结构伪类选择器中,子元素的序号是从 1 开始的,也就是说,第一个子元素的序号是 1,而不是 0。换句话说,当参数 n 的计算结果为 0 时,将不选择任何元素。

4.3、其他伪类选择器

语法 类型 描述
E: target 目标伪类选择器 选择匹配E的所有元素,且匹配元素被相关URL指向。
E: lang(language) 语言伪类选择器 用来匹配使用指定语言的元素
E: not(F) 否定伪类选择器 匹配所有除F外的E元素
E: checked 元素状态伪类选择器 匹配所有用户界面(form表单)中处于选中状态的元素
E: enabled 元素状态伪类选择器 匹配所有用户界面(form表单)中处于可用状态的元素
E: disabled 元素状态伪类选择器 匹配所有用户界面(form表单)中处于不可用状态的元素

五、伪元素选择器(::)

简介:CSS 伪元素用于将特殊的效果添加到某些选择器。
伪元素的效果是需要通过添加一个实际的元素才能达到的。可能会改变dom结构,创建虚拟dom。

语法 描述
E::after 在E元素之后添加内容,常用"content"配合使用
E::before 在E元素之前添加内容,常用"content"配合使用
E::first-letter 向文本的第一个字母添加特殊样式。
E::first-line 向文本的首行添加特殊样式。
E::selection 给被用户选中或处于高亮状态的部分的E元素添加特殊样式。

你可能感兴趣的:(CSS,笔记,css,选择器,选择器权重,选择器大全)