css样式表的选择器类型,简述css选择器的类型并举例说明

css选择器类型

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

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

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

3、兄弟选择器 ~ +

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

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

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

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

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

6、.tab p[title ~= 'name flower'] 包含name的属性的标签

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

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

:link  未访问过的链接

:visited 访问过的链接

:active 鼠标点击的一瞬间

:hover  鼠标悬浮在链接上

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

:target 锚点目标选择器

:root  文档的根选择器

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

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

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

:first-of-type div下类型为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元素 div p:first-chid

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

:first-of-type 特定 类型 (p元素)的第一个元素  div p: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选择器 类选择器 标签 、伪类 通配符* 继承 浏览器默认属性

相关问答

Q1: 详细说明css的常用选择器类型有哪些

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

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

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

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

后代选择器：用空格隔开

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

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

举例：

style type="text/css"

p{

font-size:14px;

}

/style

body

pcss/p

/body

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

代码如下：

!DOCTYPE html

html

head

meta charset="UTF-8"

titleDocument/title

style type="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

style type="text/css"

#mytitle

{

border:3px dashed green;

}

/style

/head

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

body

h2 id="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中用.来表示类。举例如下：

style type="text/css"

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

width:800px;

}

/style

/head

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

body

h2 class="oneclass"你好/h2

/body

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

class属性的特点：

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

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

h3 class="classone  classtwo"我是一个h3啊/h3

而不能写成：

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

类选择器使用的举例：

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

应该注意：

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

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

如：

style type="text/css"

.lv{

color: green;

}

.da{

font-size: 30px;

}

.underline{

text-decoration: underline;

}

/style

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

p class="lv da"段落1/p

p class="lv xian"段落2/p

p class="da xian"段落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、后代选择器: 定义的时候用空格隔开

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

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

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

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

举例1：

style type="text/css"

.div1 p{

color:red;

}

/style

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

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

举例：

style type="text/css"

h3 b i{

color:red ;

}

/style

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

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

效果：

请点击输入图片描述

或者还有下面这种写法：

请点击输入图片描述

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

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

请点击输入图片描述

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

!DOCTYPE html

html

head

   meta charset="UTF-8"

   titleDocument/title

   style type="text/css"

       div div p{

           color: red;

       }

       .div2{...}

       .div3{...}

       .div4{...}

   /style

/head

body

   div

       div

           div

               div

                   p我是什么颜色？/p

               /div

           /div

       /div

   /div

/body

/html

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

请点击输入图片描述

Q2: 请简要说明css样式表中三种选择器(三种样式)的特点

CSS选择器的类型分为3类:标记选择器、类别选择器和ID选择器。（可能名称有不同的说法，但意思都是一样的）

标记选择器是利用HTML的标记直接定义标记内容的样式，如：h1{

color:red;

font-size:25pt;}

类别选择器是通常说的class选择器，定义的时候要在名称前加.如：.one{

color:red;

font-size:25pt;}

ID选择器定义的时候要在前面加#，如：#box

{

color:red;

font-size:25pt;}

利用DW写CSS的时候，高级就是上面说的ID选择器，ID选择器的名字可以任意命名，可以自己定义，可是标签就只能是HTML语言里制定的那些标记，不能自己定义。

Q3: css有哪些种类的选择器

css选择器有，标签名选择器，类选择器，ID选择器，后代选择器，群组选择器。

新建文件创建标记选择器。

效果。

创建类别选择器。

创建ID选择器。

效果。

附上源码。