2024年10月css样式有哪四种选择器（css样式有哪几种选择器）

　　⑴css样式有哪四种选择器（css样式有哪几种选择器

　　⑵css样式有哪几种选择器

　　⑶CSS选择器、优先级与匹配原理xdxa.id选择器（#myid.类选择器（.myclassname.标签选择器（div,h,p.相邻选择器（h+p.子选择器（ul《li.后代选择器（lia.通配符选择器（*.属性选择器（a.伪类选择器（a:hover,li:nth-childxdxa其中ID选择器的效率是最高，而伪类选择器的效率则是最低xdxaxdxaCSS的权重xdxaxdxa.通配选择符的权值,,,xdxa.标签的权值为,,,xdxa.类的权值为,,,xdxa.属性选择的权值为,,,xdxa.伪类选择的权值为,,,xdxa.伪对象选择的权值为,,,xdxa.ID的权值为,,,xdxa.important的权值为最高,,,xdxa使用规则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。xdxa从上面我们可以得出两个关键的因素：xdxa.权值的大小跟选择器的类型和数量有关xdxa.样式的优先级跟样式的定义顺序有关

　　⑷css的选择器有哪些

　　⑸通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。

　　⑹元素选择器，是css选择器中最常见而且最基本的选择器。

　　⑺类选择器（.className

　　⑻类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名

　　⑼id选择器（#ID

　　⑽ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className而id选择器是在名称前使用＂#＂如（#id,

　　⑾后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E?F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。

　　⑿子元素选择器（E》F

　　⒀子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E》F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E?F不一样，在后代选择器中F是E的后代元素，而子元素选择器E》F，其中F仅仅是E的子元素而以。

　　⒁相邻兄弟元素选择器（E+F

　　⒂相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。

　　⒃类别选择器类选择器根据类名来选择，前面以“.”来标志。示例：.demoDiv{color:#FF;}、标签选择器一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。在style.css文件中对p标签样式的声明如下：p{font-size:px;background:#;color:;}、ID选择器ID选择器可以为标有特定ID的HTML元素指定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。前面以”#”号来标志，在样式里面可以这样定义：#demoDiv{color:#FF;}、后代选择器后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。《style》.father.child{color:#;}《/style》《pclass=“father“》黑色《labelclass=“child“》蓝色《b》也是蓝色《/b》《/label》《/p》、子选择器请注意这个选择器与后代选择器的区别，子选择器（childselector仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“》”进行选择。我们看下面的代码：ExampleSourceCodeCSS：#linksa{color:red;}#links》a{color:blue;}HTML：《pid=“links“》《ahref=中文网《/a》》《span》《ahref=布局实例《/a》《/span》《span》《ahref=教程《/a》《/span》《/p》、伪类选择器有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。a:link{color:#;}a:visited{color:#FFFF;}a:hover{color:#;}/*IE不支持，用Firefox浏览可以看到效果*/input:focus{background:#EFF;}、通用选择器通用选择器用*来表示。例如：*{font-size:px;}表示所有的元素的字体大小都是px；同时通用选择器还可以和后代选择器组合。、群组选择器当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：p,td,li{line-height:px;color:#c;}#mainp,#siderspan{color:#;line-height:px;}.#mainpspan{color:#f;}.texth,#siderh,.art_titleh{font-weight:;}使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。、相邻同胞选择器我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。、属性选择器您可以用判断html标签的某个属性是否存在的方法来定义css。属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性、伪元素选择器所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器。

　　⒄css有哪些种类的选择器

　　⒅主要的css选择器如下：

　　⒆层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用或XML（标准通用标记语言的一个子集等文件样式的计算机语言。

　　⒇CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

　　⒈CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式的能力。

　　⒉css选择器最常用的类型

　　⒊标签选择器：选择器的名字代表html页面上的标签

　　⒋标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

　　⒌《styletype=“text/css“》p{font-size:px;}

　　⒍《/style》《body》《p》css《/p》《/body》

　　⒎再比如说，想让“学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么可以用《span》标签把“前端”这两个字围起来，然后给《span》标签加一个标签选择器。

　　⒏《!DOCTYPEhtml》《html》《head》《metacharset=“UTF-“》《title》Document《/title》《styletype=“text/css“》span{color:red;}《/style》《/head》《body》《p》学完了安卓，继续学《span》前端《/span》哟《/p》《/body》《/html》

　　⒐【总结】需要注意的是：

　　⒑所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

　　⒒无论这个标签藏的多深，一定能够被选择上。

　　⒓选择的所有，而不是一个。

　　⒔ID选择器：规定用#来定义（名字自定义

　　⒕针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

　　⒖《head》《title》Document《/title》《styletype=“text/css“》#mytitle{border:pxdashedgreen;}《/style》《/head》

　　⒗然后在别处使用id来引用它：

　　⒘《body》《hid=“mytitle“》你好《/h》《/body》

　　⒙id选择器的选择符是“#”。

　　⒚任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

　　⒛只能有字母、数字、下划线。

　　不能和标签同名。比如id不能叫做body、img、a。

　　大小写严格区分，也就是说aa,和AA是两个不同的ID

　　另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

　　一个标签可以被多个css选择器选择：

　　比如，可以同时让标签选择器和id选择器作用于同一个标签。（用到了层叠如下：

　　然后通过网页的审查元素看一下效果：

　　现在，假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？

　　实际上，css有着非常严格的计算公式，能够处理冲突.

　　一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义

　　类选择器：规定用圆点.来定义

　　类选择器.?针对想要的所有标签使用。优点：灵活。

　　css中用.来表示类。举例如下：

　　《styletype=“text/css“》.oneclass/*定义类选择器*/{width:px;}《/style》《/head》

　　然后在别处使用class来引用它：

　　《body》《hclass=“oneclass“》你好《/h》《/body》

　　和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

　　class属性的特点：

　　《hclass=“classone?classtwo“》我是一个h啊《/h》

　　《hclass=“teshu“class=“zhongyao“》我是一个h啊《/h》

　　类选择器使用的举例：

　　类选择器的使用，能够决定一个人的css水平。

　　不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

　　每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

　　《styletype=“text/css“》.lv{color:green;}.da{font-size:px;}.underline{text-decoration:underline;}《/style》

　　然后让每个标签去选取自己想要用的类选择器：

　　《pclass=“lvda“》段落《/p》《pclass=“lvxian“》段落《/p》《pclass=“daxian“》段落《/p》

　　问题：到底用id还是用class？

　　答案：尽可能的用class，除非极特殊的情况可以用id。

　　原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，会认为一个有id的元素，有动态效果。

　　上图所示，css和js都在用同一个id，会出现不好沟通的情况。

　　记住这句话：类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用。

　　上面这三种选择器的区别：

　　后代选择器:定义的时候用空格隔开

　　对于EF这种格式，表示所有属于E元素后代的F元素，有这个样式。空格就表示后代。

　　后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

　　后代选择器，描述的是祖先结构。

　　看定义可能有点难理解，我们来看例子吧。

　　《styletype=“text/css“》.divp{color:red;}《/style》

　　空格就表示后代。.divp表示.div的后代所有的p。

　　这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。

　　《styletype=“text/css“》hbi{color:red;}《/style》

　　上方代码的意思是说：定义了《h》标签中的《b》标签中的《i》标签的样式。

　　同理：h和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。

　　或者还有下面这种写法：

　　上面的这种写法，《h》标签和《i》标签并不是紧挨着的，但他们保持着一种后代关系。

　　还有下面这种写法：（含类选择器、id选择器都是可以的

　　在开头说了：后代选择器，描述的是一种祖先结构。举个例子来说明这句话：

　　上面css中的divdivp，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到p元素的祖先列表：

　　css样式有哪几种选择器

　　CSS的选择器其实大类的话可以分为三类，即id选择器、class选择器、标签选择器。

　　其中，他们之间又可以以不同的方式进行组合，如下：

　　纯手打，望采纳。我的百度个人简介里面还有博客网址，想看一些我资料欢迎进入我的博客。

　　详解CSS样式选择器有哪些

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

　　标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器

　　html标签选择器：

　　定义：以html标签作为选择器

　　class类选择器：

　　定义：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置css样式。

　　类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则：

　　同一个元素可以设置多个类，之间用空格隔开：

　　定义：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则

　　定义：集体统一设置样式

　　定义：所有标签设置样式

　　定义：使用后代选择器设置，之间用空格隔开，后代选择器可以多层。

　　链接的四种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态。

　　伪类说明:link未访问的链接:visited已访问的链接:hover鼠标悬停状态:active激活的链接

　　:hover用于访问的鼠标经过某个元素时；

　　:active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态

　　伪类选择器的属性：link》visited》hover》active

　　?a:hover必须置于?a:link和a:visited之后，才有效

　　a:active必须置于a:hover之后才有效

　　伪类名称对大小写不敏感

　　css继承特性，从父元素那继承部分css属性

　　ID选择优先级最高（id选择器定义具有唯一性

　　class选择器次之（class选择器可以多个

　　其它选择器优先级主要根据定义的先后顺序，最后定义的优先级高

　　!important加重选择器的优先级，添加在样式规则之后，中间用空格隔开。

　　CSS选择器命名规则

　　：采用英文字母，数字以及“-“和“_“命名

　　：以小写字母开头，不能以数字和“-“?和“_“开头

　　：使用有意义的命名规范

　　header页头main主体footer页尾nav导航sidebar侧栏container容器column栏目title标签menu菜单submenu子菜单

　　*列举常用命名，大家根据自身项目及团队的规则命名

　　耐心学习基础知识，基础是盖房的根基，必须打结实。

　　如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。

　　每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！

　　标签选择器（如：body,div,p,ul,li。

　　类选择器（如：class=“head“,class=“head_logo“。

　　ID选择器（如：id=“name“,id=“name_txt“。

　　全局选择器（如：*号。

　　组合选择器（如：.head.head_logo,注意两选择器用空格键分开。

　　继承选择器（如：divp,注意两选择器用空格键分开。

　　伪类选择器（如：就是链接样式,a元素的伪类，种不同的状态：link、visited、active、hover。。

　　字符串匹配的属性选择符(^$*三种，分别对应开始、结尾、包含)。

　　css选择器的基本定义是：每一条css样式定义由两部分组成，形式如下：在{}之前的部分就是“选择器”。

　　说了这么一大段话，其实简而言之，就是要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，html页面中的元素就是通过CSS选择器进行控制的。

　　参考资料来源：百度百科—css选择器

　　在“新建css样式”对话框中可用的选择器有哪四种

　　最常用的四种选择器是：元素选择器、类选择器、ID选择器、派生选择器

　　最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h,span,a,div乃至html。

　　html{background-color:black;}

　　p{font-size:px;backgroud-color:gray;}

　　h{background-color:red;}

　　以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为像素同时添加灰色背景；对文档中所有h元素添加红色背景。

　　通过上面的例子也可以看出css的基本规则结构：由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为：属性名：属性值。如下图所示：

　　每条声明以分号”;”结尾。如果在一个声明中使用了不正确的属性值，或者不正确的属性，则该条声明会被忽略掉。另外请注意不要忘记每条声明后面的分号。

　　我们也可以同时对多个html元素进行声明：

　　h,h,h,h,h,h,p{font-family:黑体;}

　　这样会将文档中所有的h~h以及p元素字体设置为”黑体”。如果我们希望一锅粥地选取所有的元素，可以使用通配符”*”：*{font-size:px;}

　　这样所有的元素都将被选中，虽然font-size属性对于某些元素是无效的，那么它将被忽略。

　　单纯的元素选择器似乎还过于粗糙了，比如我们希望在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中，或者它可能出现在多种不同的元素中。这个时候，我们可以考虑使用类选择器(classselector)。

　　要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:

　　《pclass=“deadline“》...《/p》

　　《hclass=“deadline“》...《/h》

　　这样我们就可以用以下方式使用类选择器了：

　　p.deadline{color:red;}

　　h.deadline{color:red;}

　　点号”.”加上类名就组成了一个类选择器。以上个选择器会选择所有包含”deadline”类的p元素和h元素。而其余包含该属性的元素则不会被选中。

　　如果我们省略.deadline前面的元素名，那么所有包含该类的元素都将被选中：

　　.deadline{color:red;}

　　通常情况下，我们会组合使用以上者得到更加有趣的样式：

　　.deadline{color:red;}

　　span.deadline{font-style:italic;}

　　以上代码首先会对所有的包含deadline的元素字体设置为红色，同时会对span元素中的文本添加额外的斜体效果。这样，如果你希望某处文本拥有额外的斜体效果将它们放在《span》《/span》中就可以了。

　　在实践的做法中，元素的calss属性可能不止包含一个单词，而是一串单词，各个单词之间用空格隔开。

　　比如某些元素包含一个”warning”类，某些元素包含一个”important”类，某些元素同时包含”warningimportant”类。属性名出现的顺序没有关系：

　　class=“warningimportant“

　　class=“importantwarning“

　　以上者是等价的。我们希望包含warning类的元素有一个醒目的红色字体，包含important属性的元素有一个加粗的字体显示，而同时包含以上中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了)，我们可以使用以下的css代码：

　　.warning{color:red;}

　　.important{font-weight:bold;}

　　.warning.important{background:blue;}

　　当然，第三条你也可以写成：.important.warning{background:blue;}和词序没有关系。说明一下，.warning会匹配所有包含warning属性的元素，不管该元素还包含多少其他的属性。.important同理。而.important.warning会匹配所有同时包含以上种属性的元素，不管该元素还包含多少其他的类，也不管他们在类列表中出现的顺序，只要其中含有这个属性，则会被选择进来！

　　同样地，多于多类选择器，在前面加上元素名，则会匹配包含指定类名的指定元素，例如：p.warning.important{}

　　将会匹配同时包含warning和important属性的p元素，其他同样包含以上类的元素则不会被选中。

　　ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：

　　《pid=“top-para“》...《/p》

　　《pid=“foot-para“》...《/p》

　　使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上个p元素如：

　　#top-para{}#foot-para{}；

　　这样我们就可以对以上个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。

　　属性选择器在css中引入，使我们可以根据元素的属性及属性值来选择元素。下面分别来说明：

　　简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为:元素名{...}

　　选择带有title属性的所有元素：*{...}。同类选择器类似，我们也可以根据多个属性信息进行选择，例如同时拥有href和title的a元素：

　　组合使用类选择器使我们的选择更加富于灵活性。

　　如果我们希望更加精确地根据属性值来选择元素，我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为

　　CSS中常用的选择器：（一基本选择器（二层次选择器（三动态伪类选择器（四目标伪类选择器（五ui状态伪类选择器（六结构伪类选择器（七属性选择器（八伪元素(一)基本选择器.标签选择器：通过标签名获取元素权重：（此种选择器影响范围大，建议尽量应用在层级选择器中。.class选择器：通过.类名获取元素权重：（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。.id选择器：通过#id名获取元素权重：（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。.*通配符选择器：获取到页面的所有元素.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到(二)层次/关系选择器（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代例：pa{color:red;}.子代选择器：用》隔开基本选择器，表示后一个选择器是前面的子代例：ul》li{line-style:none;}.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的例：a+a{}.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素例：li~li{}(三动态伪类选择器.a:link锚链接被访问前添加样式.a:visited锚链接被访问后添加样式.e:hover鼠标悬停在元素上添加样式.e:active鼠标点击元素时添加样式.:focus表单元素被聚焦时，添加样式(四)目标伪类选择器语法：目标:target{属性：属性值}被选中的目标添加样式目标:targetE子元素{属性：属性值}被选中的目标里的E子元素添加样式(五)ui状态伪类选择器.:enabled可用的表单元素添加样式.:disabled不可用的表单元素添加样式(disabled).:checked+E被选中的表单元素添加样式(六)结构伪类选择器.E:first-child获取到E元素，且要满足为其父元素的第一个孩子。.E:last-child获取到E元素，且要满足为其父元素的最后一个孩子.E:nth-child(n)获取到E元素，且要满足为其父元素的第n个孩子n的用法：()n倍数()even偶数/nodd奇数/n-（如可用来选中奇偶行来实现“隔行换色”()-n+选中-()p:nth-child(-n+):nth-child(n+)-个.E:nth-last-child(n)获取到E元素，且要满足为其父元素的倒数第n个孩子.E:first-of-type获取到E元素，且要满足为其父元素的第一个该类型的孩子.E:last-of-type获取到E元素，且要满足为其父元素的最后一个该类型的孩子.E:nth-of-type(n)获取到E元素，且要满足为其父元素的第n个该类型的孩子.E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子.E:empty获取到空的E元素（注：连空格都不能有(七)属性选择器.E;.E.Eattr属性值包含val的E元素添加样式如ul指class类名中包含有c字母的E元素.Eattr属性值以val开头的E元素添加样式.Eattr属性值以val结尾的E元素添加样式(八)伪元素.E::before给E元素添加第一个子元素（前面.E::after给E元素添加最后一个子元素（后面.E::first-letter给E元素第一个字添加样式.E::first-line给E元素第一行添加样式.E::selection元素内容被选中时添加样式(火狐需要加前缀-moz-)