CSS选择器详解
css的基本语法形式如下所示：
选择器{属性名：属性值；属性名：属性值；……}- 注意: 属性和值中间使用冒号分开,属性之间用分号(都是英文)
- 选择器语法符号的含义
E： 代表“Element”，即元素；
S： 代表“Seletor”，即选择器；
attr： 代表“attribute”，即属性；
下面直接用这些符号代替中文
css就是对html标签的一些外观上的修改,那选择器就是要选择哪个标签
选择器分类
1 通配符选择器
2 标签选择器
3 类选择器
4 id选择器
5 属性选择器
6 伪类选择器
7 伪元素选择器
8 关系选择器
9 选择器组合
选择器只是选择要修改的标签, 只是工具, 没有好坏之分,也没有顺序之分,只有常用的和不常用
1 通配符选择器
- 通配符 : * (星号)
- 会匹配页面所有的元素,设定一些网页的基本通用属性
- 语法格式:
*{ margin:0 padding:0 }
2 标签选择器
-
按HTML的标签名分类,为某一类指定一种样式
-
可以把某一类标签全部选择出来,不能设计差异化样式 (不常用)
-
语法格式:
div{ background: yello; }
3 类选择器
-
用英文的点"."标识,后面紧跟类名
-
只要类名一样,那就都选中(常用但不单独出现)
-
语法格式:
.类名{ 属性1:属性值1; 属性2:属性值2; }
4 id选择器
-
用# 号进行标识,后面紧跟id名
-
元素的id是唯一的,只能对对应文档的某一个具体元素
-
语法格式:
#id名{ 属性1:属性值1; 属性2:属性值2; }
5 属性选择器
-
[attr] --attr表示:属性名 不常用 ,都用css修改html样式了,那html自带的属性根本就不写了,怎么选中,很少用
匹配具有所给定属性名称的标签。[color] { background: yellow; } //能选中具有color属性的所有标签。 -
[attr=“val”]
匹配具有某个属性且属性值为给定值的标签。[color=”red”] { background: yellow; } //能选中具有color属性且值为”red”的所有标签。 -
[attr~=“val”]
匹配具有某个属性且属性值包含所给定单词的标签。<p title=”a dog”>...</p> [title~=”dog”]{ .... } //可以选中上面那个p标签 [title~=”do”]{ ..... } //选不上。。。 -
[attr*=“val”]
匹配具有某个属性且属性值包含给定的字符的标签。<p title=”a dog”>...</p> [title*=”dog”]{ .... } //可以选中上面那个p标签 [title*=”do”]{ ..... } //也可以选上 -
[attr^=“val”]
匹配具有某个属性且属性值以给定的字符开头的标签<p title=”a dog”>...</p> [title^=”dog”]{ .... } //选不上 [title^=”a”]{ .... } //能选上 [title^=”a d”]{ ..... } //也可以选上 -
[attr$=“val”]
匹配具有某个属性且属性值以给定的字符结尾的标签。
6 伪类选择器
-
概念 :
伪类选择器是通过单冒号（：）和特定的具有某种含义的单词来确定所选元素。
伪类的名称是css标准中所预先设定的，我们不能自己设定。可用的伪类名不多。 -
:link, :visited, :hover, :active 这四个伪类主要用于表示一个链接（也就是a标签）的4种不同状态。
它们可以设定一个链接在不同状态下的外观表现（样式表现）。- :link ——表示一个链接初始时候的状态。
- :visited ——表示一个链接在访问（点击）过之后的状态。
- :hover ——表示一个链接在“鼠标移上去”（鼠标悬停）的时候的状态。
- :active ——表示一个链接在“活动状态”的时候的状态，通常就是点击的瞬间（按住不放能看到）。
注意 :
:hover可以用于其它标签，并且经常用！
对于a链接的这4个状态，他们有顺序问题，必须按上述顺序才有合理效果 -
E:focus 表示一个元素在成为可输入状态（获得焦点）的时候，主要用于表单元素。
-
E:first-child, E:last-child, E:only-child, E:nth-child(n)
-
E:first-child ——匹配作为父元素的第一个子元素E。
li:first-child{ ... } //表示作为第一个子元素的li标签 -
E:last-child ——匹配作为父元素的最后一个子元素E。
td:last-child{ ... } //表示作为最后一个子元素的td标签 -
E:only-child ——匹配作为父元素的唯一一个子元素E。
p:only-child{ ... } //表示作为父元素中只有这一个子元素的p标签 -
E:nth-child(n) ——匹配作为父元素的第n个子元素E。括号中的n是一个具体数字
还可以这样用：nth-child(2n+1）表示奇数项， nth-child(2n+2)表示偶数项li:nth-child(2){ ... } //表示作为第2个子元素的li标签
-
-
E:empty，E:checked，E:enabled，E:disabled
- E:empty
——匹配元素内部为空（没有内容）的元素。
“内容”指的是一个标签内是否有其他html代码或文字。显然，单标签内是不可能有内容的。 - E:checked
——匹配被选中的元素（用于input且type为radio或checkbox的时候） - E:enabled
——匹配“可用的/有效的元素”（用于表单元素）。 - E:disabled
——匹配“不可用的/有效的元素”（用于表单元素）。
- E:empty
7 伪元素选择器
伪元素选择器是通过双冒号（：：）和特定的具有某种含义的单词来确定所选元素。
伪元素选择器通常是“本没有这个元素（标签）”，但会创建出一个隐性元素并对其进行样式设定。
伪元素选择器又称为“伪对象选择器”。
-
E::before
- 表示在元素E的内部的最前面创建一个元素（伪元素）
- 其中必须写上一个属性：content:”内容”; //当然，内容可以为空。
-
E::after
- 表示在元素E的内部的最后面创建一个元素（伪元素）。
- 其中必须写上一个属性：content:”内容”; //当然，内容可以为空。
-
E::first-letter
- 表示元素E中的“第一个字符”可以单独作为一个元素（伪元素）。
-
E::first-line
- 表示元素E中的“第一行”可以单独作为一个元素（伪元素）。
-
E::selection
- 表示将元素E中“选中的文字”单独作为一个元素（伪元素）。
- 比如我在浏览器选中一些文字,那这些被选中的文字就会改变
简单的选择器说完了,但是网页里面的盒子(div)都是一个套一个,而且正常网页元素都很多 , 所以光上面的这几种选择器是不够的,无法精准的选择要修改的某个标签 , 所有选择器都是搭配着使用的
8 关系选择器
- 概念 : 关系选择器是通过元素之间的“位置关系的特征”来确定所选元素
- 子代选择器：S1>S2
匹配S1中的下一级S2。下一级就是“子级”，或子代。 - 后代选择器：S1 S2
匹配S1内部的所有后代S2。 - 相邻选择器：S1+S2
匹配S1后面紧挨着的同级（兄弟）元素S2。 - 兄弟选择器：S1~S2
匹配S1后面的所有同级（兄弟）元素S2。
8 选择器组合
选择器的组合是将多个不同形式的选择器组合起来以确定所选元素。
-
E.className
举例： div.c1{ .... } p.cc2{ .... } -
E#id
div#id1{ ... } p#id2{ ... } -
E[属性选择器]
- [src] //找所有有src属性的标签
- img[src] //找img标签并且有src属性
- img[src*=”dog”] 找img标签并且有src属性并且属性中包含“dog”这个字符！
-
并集选择器：S1, S2
两个选择器，可以使用一个英文逗号（,）连接起来。
表示这两个选择器，都使用同样一个样式设定（属性设定）。p, div{ ... } #price, .addr{ ... } p.cc, .cc, div .cc2{ ... }
来源：CSDN
作者：ch_zs
链接：https://blog.csdn.net/qq_43665891/article/details/104572419