css几种选择器？

如题所述

举报该问题

其他回答

第1个回答 2024-09-04

css规则按选择器类型分为哪四种？

1、代表内联样式，如:style=””，权值为1000。

2、代表ID选择器，如：#content，权值为100。

3、代表类，伪类和属性选择器，如.content，权值为10。

4、代表类型(元素)选择器和伪元素选择器，如divp，权值为1。

按照CSS代码的执行先后顺序。如果有重复的规则，按照后执行的定义。最终规则是多个定义规则的综合。重点：高级规则定义对于不同表格的文字样式定义。(不同表格使用不同ID、使用类样式定义)一页中的多种超级链接样式定义。多个相同规则不同对象的CSS共同定义。对于同一对象定义的多种CSS方式考虑哪种更科学。

css有哪些种类的选择器

主要的css选择器如下：

1、标签选择器

2、类选择器

3、ID选择器

4、全局选择器

5、组合选择器

6、继承选择器

7、伪类选择器

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

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

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

css选择器最常用的类型

css常用的四种选择器类型有：

标签选择器：针对一类标签

ID选择器：针对某一个特定的标签使用

类选择器：针对你想要的所有标签使用

后代选择器：用空格隔开

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

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

举例：

styletype="text/css"

font-size:14px;

}

/style

body

pcss/p

/body

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

代码如下：

!DOCTYPEhtml

html

head

metacharset="UTF-8"

titleDocument/title

styletype="text/css"

span{

color:red;

}

/style

/head

body

p学完了安卓，继续学span前端/span哟/p

/body

/html

【总结】需要注意的是：

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

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

（3）选择的所有，而不是一个。

2、ID选择器：规定用#来定义（名字自定义）

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

举例：

head

titleDocument/title

styletype="text/css"

#mytitle

{

border:3pxdashedgreen;

}

/style

/head

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

body

h2id="mytitle"你好/h2

/body

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

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

（1）只能有字母、数字、下划线。

（2）必须以字母开头。

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

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

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

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

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

请点击输入图片描述

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

请点击输入图片描述

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

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

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

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

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

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

styletype="text/css"

.oneclass/*定义类选择器*/{

width:800px;

}

/style

/head

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

body

h2class="oneclass"你好/h2

/body

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

class属性的特点：

特性1：类选择器可以被多种标签使用。

特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

h3class="classone?classtwo"我是一个h3啊/h3

而不能写成：

h3class="teshu"class="zhongyao"我是一个h3啊/h3

类选择器使用的举例：

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

应该注意：

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

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

如：

styletype="text/css"

.lv{

color:green;

}

.da{

font-size:30px;

}

.underline{

text-decoration:underline;

}

/style

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

pclass="lvda"段落1/p

pclass="lvxian"段落2/p

pclass="daxian"段落3/p

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

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

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

举例如下：

请点击输入图片描述

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

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

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

标签选择器针对的是页面上的一类标签。

ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。

类选择器可以被多种标签使用。

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

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

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

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

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

举例1：

styletype="text/css"

.div1p{

color:red;

}

/style

空格就表示后代。.div1p表示.div1的后代所有的p。

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

举例：

styletype="text/css"

h3bi{

color:red;

}

/style

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

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

效果：

请点击输入图片描述

或者还有下面这种写法：

请点击输入图片描述

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

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

请点击输入图片描述

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

!DOCTYPEhtml

html

head

metacharset="UTF-8"

titleDocument/title

styletype="text/css"

divdivp{

color:red;

}

.div2{...}

.div3{...}

.div4{...}

/style

/head

body

div

p我是什么颜色？/p

/div

/body

/html

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

请点击输入图片描述

css选择器类型

h1,h2,p{}??//?选择所有的h1,h2,p????

1、后代选择器?(包含选择器)：?以空格隔开包含关系的元素

2、子选择器??以隔开父子级元素

3、兄弟选择器~+

1、.tabp[title]:{color:red}选择所有带有title属性的p标签

2、.tabp[title='name']:{color:red}选择所有title=name属性的标签

3、.tabp[title^='na']:{}?选择开头title属性带有na开头的标签

4、.tabp[title$='po']:{}?选择title属性结尾是po的标签

5、.tabp[title*='name']只要含有name值就行的标签

6、.tabp[title~='nameflower']包含name的属性的标签

7、.tabp[title|='name']以name开头的属性的标签

伪类不仅可以作用在a链接上，还可以作用在其他元素上

:link?未访问过的链接

:visited访问过的链接

:active鼠标点击的一瞬间

:hover?鼠标悬浮在链接上

:focus具有焦点的输入元素innput(将输入的外边框去掉:focus{outline:none})

:target锚点目标选择器

:root?文档的根选择器

:empty?空选择器，没有任何子集的元素

:first-child?div下所有孩子中的第一个

:last-childdiv下所有孩子中的最后一个

:first-of-typediv下类型为p的第一个元素

:last-of-type?div下类型为p的最后一个元素

:nth-child(2)??选择每个p元素是其父级的第二个子元素，选择器匹配父元素中的第n个子元素，元素类型没有限制。

:nth-last-child(n)选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。

:after?文本伪类选择器，在每个p元素之后插入内容

:before?文本伪类选择器，在每个p元素之前插入内容

:first-letter?文本伪类选择器，选择每一个p元素的第一个字母

:first-line?文本伪类选择器，选择每一个p元素的第一行

锚点目标的伪类选择器

首尾元素的伪类选择器

:first-child?div下所有的第一个p元素divp:first-chid

:last-child?div下所有的最后一个p元素?div:last-child

:first-of-type特定类型(p元素)的第一个元素?divp:first-of-type

:last-of-type?特定类型(p元素)的第一个元素

唯一选择器

:only-child??只有一个孩子的div

:only-of-type?div下只有一种孩子类型的选择器

表单上的伪类选择器

文本的伪类选择器

文本伪类表单

知识点补充：

!important:强制权重优先级

浏览器默认font-size:14px

可继承元素：color、font-size、font-family

通配符的权重：0

继承的权重：?NULL????0NULL

总结排序：!important行内样式ID选择器类选择器标签、伪类通配符*继承浏览器默认属性

css3的选择器有哪些？

css3选择器如下：

一、通配符选择器（*）

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

二、元素选择器（E）

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

三、类选择器（.className）

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

四、id选择器（#ID）

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

五、后代选择器（EF）

后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E?

F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。

六、子元素选择器（Egt;F）

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中Egt;F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E?

F）不一样，在后代选择器中F是E的后代元素，而子元素选择器Egt;F，其中F仅仅是E的子元素而以。

七、相邻兄弟元素选择器（E+F）

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

css样式有哪几种选择器？

CSS选择器、优先级与匹配原理\x0d\x0a1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul通配选择符的权值0,0,0,0\x0d\x0a2.标签的权值为0,0,0,1\x0d\x0a3.类的权值为0,0,1,0\x0d\x0a4.属性选择的权值为0,0,1,0\x0d\x0a5.伪类选择的权值为0,0,1,0\x0d\x0a6.伪对象选择的权值为0,0,0,1\x0d\x0a7.ID的权值为0,1,0,0\x0d\x0a8.important的权值为最高1,0,0,0\x0d\x0a使用规则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。\x0d\x0a从上面我们可以得出两个关键的因素：\x0d\x0a1.权值的大小跟选择器的类型和数量有关\x0d\x0a2.样式的优先级跟样式的定义顺序有关