189 8069 5689
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
版本中定义的。（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选择器如下：
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，“马花藤”，“路人甲”，“小马哥”
都可以成为这个人的选择器了。所以简单来看，选择器就是
html
标签的某个特有属性，如
id
class
tagname等，
div
id="id-div"
class="class-div"。。。。。
分别使用
#id-div
\
.class-div
或者
直接
div，然后编辑对应样式，就可以实现对其样式的控制了......
另外给你推荐个工具，
firefox浏览器下使用插件
firebug
学起来会比较快
:-)