详解CSS样式选择器有哪些?

详解CSS样式选择器有哪些?

CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS选择器分类： 标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器 1、html标签选择器： 定义：以html标签作为选择器 2、class类选择器： 定义：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置css样式。

类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则： 同一个元素可以设置多个类，之间用空格隔开： 3、ID选择器 定义：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则 4、群组选择器 定义：集体统一设置样式 5、全局选择器 定义：所有标签设置样式 HTML文档结构图 6、后代选择器 定义：使用后代选择器设置，之间用空格隔开，后代选择器可以多层。 7、伪类选择器 链接的四种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态。 伪类 说明 :link 未访问的链接 :visited 已访问的链接 :hover 鼠标悬停状态 :active 激活的链接 :hover 用于访问的鼠标经过某个元素时； :active 用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态） 伪类选择器的属性：link > visited > hover > active 说明： 1) a:hover 必须置于 a:link和a:visited之后，才有效 2) a:active 必须置于 a:hover之后才有效 3) 伪类名称对大小写不敏感 8、CSS其它选择器 css继承特性，从父元素那继承部分css属性 选择器的优先级 ID选择优先级最高（id选择器定义具有唯一性） class选择器次之（class选择器可以多个） 元素选择器再次之 其它选择器优先级主要根据定义的先后顺序，最后定义的优先级高 !important 加重选择器的优先级，添加在样式规则之后，中间用空格隔开。 CSS选择器命名规则 1：采用英文字母，数字以及”-” 和 “_” 命名 2：以小写字母开头，不能以数字和”-” 和 “_” 开头 3：使用有意义的命名规范 常用CSS命名 header 页头 main 主体 footer 页尾 nav 导航 sidebar 侧栏 container 容器 column 栏目 title 标签 menu 菜单 submenu 子菜单 *列举常用命名，大家根据自身项目及团队的规则命名 耐心学习基础知识，基础是盖房的根基，必须打结实。

如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。 每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。

什么是CSS的选择器，包括哪几种类型？

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。”CSS”列指示该属性是在哪个CSS版本中定义的。

（CSS1、CSS2还是CSS3。

）选择器例子例子描述CSS.class.intro选择class=”intro”的所有元素。1#id#firstname选择id=”firstname”的所有元素。1**选择所有元素。2elementp选择所有<p>元素。

1element,elementdiv,p选择所有<div>元素和所有<p>元素。1element elementdivp选择<div>元素内部的所有<p>元素。1element>elementdiv>p选择父元素为<div>元素的所有<p>元素。

2element+elementdiv+p选择紧接在<div>元素之后的所有<p>元素。2[attribute][target]选择带有target属性所有元素。2[attribute=value][target=_blank]选择target=”_blank”的所有元素。

2[attribute~=value][title~=flower]选择title属性包含单词”flower”的所有元素。2[attribute|=value][lang|=en]选择lang属性值以”en”开头的所有元素。2:linka:link选择所有未被访问的链接。

1:visiteda:visited选择所有已被访问的链接。1:activea:active选择活动链接。1:hovera:hover选择鼠标指针位于其上的链接。1:focusinput:focus选择获得焦点的input元素。

2:first-letterp:first-letter选择每个<p>元素的首字母。1:first-linep:first-line选择每个<p>元素的首行。1:first-childp:first-child选择属于父元素的第一个子元素的每个<p>元素。2:beforep:before在每个<p>元素的内容之前插入内容。

2:afterp:after在每个<p>元素的内容之后插入内容。2:lang(language)p:lang(it)选择带有以”it”开头的lang属性值的每个<p>元素。2element1~element2p~ul选择前面有<p>元素的每个<ul>元素。3[attribute^=value]a[src^=”https”]选择其src属性值以”https”开头的每个<a>元素。

3[attribute$=value]a[src$=”.pdf”]选择其src属性以”.pdf”结尾的所有<a>元素。3[attribute*=value]a[src*=”abc”]选择其src属性中包含”abc”子串的每个<a>元素。3:first-of-typep:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。

3:last-of-typep:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。3:only-of-typep:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。3:only-childp:only-child选择属于其父元素的唯一子元素的每个<p>元素。

3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个<p>元素的每个<p>元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。

3:last-childp:last-child选择属于其父元素最后一个子元素每个<p>元素。3:root:root选择文档的根元素。3:emptyp:empty选择没有子元素的每个<p>元素（包括文本节点）。

3:target#news:target选择当前活动的#news元素。3:enabledinput:enabled选择每个启用的<input>元素。3:disabledinput:disabled选择每个禁用的<input>元素3:checkedinput:checked选择每个被选中的<input>元素。3:not(selector):not(p)选择非<p>元素的每个元素。

3::selection::selection选择被用户选取的元素部分。

css的选择器是什么东西？？？

CSS主要的作用就是给网页中的dom元素设置样式，选择器则是用来匹配dom元素的。