详解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

*

*

选择所有元素。

2

element

p

选择所有

p

元素。

1

element,element

div,p

选择所有

div

元素和所有

p

元素。

1

element element

div

p

选择

div

元素内部的所有

p

元素。

1

elementelement

divp

选择父元素为

div

元素的所有

p

元素。

2

element+element

div+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

:link

a:link

选择所有未被访问的链接。

1

:visited

a:visited

选择所有已被访问的链接。

1

:active

a:active

选择活动链接。

1

:hover

a:hover

选择鼠标指针位于其上的链接。

1

:focus

input:focus

选择获得焦点的

input

元素。

2

:first-letter

p:first-letter

选择每个

p

元素的首字母。

1

:first-line

p:first-line

选择每个

p

元素的首行。

1

:first-child

p:first-child

选择属于父元素的第一个子元素的每个

p

元素。

2

:before

p:before

在每个

p

元素的内容之前插入内容。

2

:after

p:after

在每个

p

元素的内容之后插入内容。

2

:lang(language)

p:lang(it)

选择带有以

"it"

开头的

lang

属性值的每个

p

元素。

2

element1~element2

p~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-type

p:first-of-type

选择属于其父元素的首个

p

元素的每个

p

元素。

3

:last-of-type

p:last-of-type

选择属于其父元素的最后

p

元素的每个

p

元素。

3

:only-of-type

p:only-of-type

选择属于其父元素唯一的

p

元素的每个

p

元素。

3

:only-child

p: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-child

p:last-child

选择属于其父元素最后一个子元素每个

p

元素。

3

:root

:root

选择文档的根元素。

3

:empty

p:empty

选择没有子元素的每个

p

元素（包括文本节点）。

3

:target

#news:target

选择当前活动的

#news

元素。

3

:enabled

input:enabled

选择每个启用的

input

元素。

3

:disabled

input:disabled

选择每个禁用的

input

元素

3

:checked

input:checked

选择每个被选中的

input

元素。

3

:not(selector)

:not(p)

选择非

p

元素的每个元素。

3

::selection

::selection

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

什么是css选择器

css选择器是指可以获取元素（标签）对象，可以用来定义样式或设置样式

css的选择器有哪些

CSS选择器如下：

1. 标签名选择器 div { color：Red;} /即页面中的各个标签名的css样式

2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式

3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id

4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签

5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示

选择器的优先级

1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)div style="color:Red;"/div

2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}

3.其次优先级是（类选择器，假设级别为10） .divClass{color:Red;}

4.最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}

5.那么后代选择器的优先级就可以计算了啊

比如 .divClass span { color:Red;} 优先级别就是：10+1=11

想详细的话可以参考W3C文档。

css样式中选择器是什么意思

选择器其实不难理解，就好比人名。打个简单的比方，路人甲的名字叫马花藤，外号小马哥。相对于css，“马花藤”，“路人甲”，“小马哥”

都可以成为这个人的选择器了。所以简单来看，选择器就是

html

标签的某个特有属性，如

id

class

tagname等，

div

id="id-div"

class="class-div"。。。。。

分别使用

#id-div

\

.class-div

或者

直接

div，然后编辑对应样式，就可以实现对其样式的控制了......

另外给你推荐个工具，

firefox浏览器下使用插件

firebug

学起来会比较快

:-)

当前文章：css样式中的选择器是指,css样式中的选择器是指
转载源于：http://chengdu.cdxwcx.cn/article/phisih.html