css选择器的定义方法，css选择器类型有哪些,并说明其用法
大家好，感谢邀请，今天来为大家分享一下css选择器的定义方法的问题，以及和css选择器类型有哪些,并说明其用法的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
CSS选择器的优先级
通常我们可以将CSS的优先级由高到低分为六组：
1、无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如#id{margin:0;}会覆盖.classname{margin:3px;}。
4、第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px;}会覆盖 div{margin:6px;}
5、第五级由一个或多个类型选择器定义。如 div{margin:6px;}覆盖*{margin:10px;}。
最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。
另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如#i100
*.c20*.c10{}的优先级就会高于#i100*.c10 div p span em{}
，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。
如果想学习和交流更多html前端开发的技术你可以来我们这个群：先写下这三个数字：432，然后在写下中间这三个数字：664，最后写下的三个数字是：883，按照这个顺序连起来，群就会出现。还有更多的技术资料，学习课程。
CSS选择器是一个非常灵活的CSS属性，优雅的使用它会使你的页面代码不再臃肿，而且还可以作为hack的妙用方法之一。
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于<style/>标签中的@import引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的@import导入样式表定义。
5、第五级优先的样式有用户设定。
最低级的优先权由浏览器默认。
理解了这些CSS优先级问题后，也就不必苦恼于样式定于中的此类问题了。
css选择器
CSS（Cascading Style Sheet），中文译为层叠样式表，可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入，就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册，或登录W3C官网（ ）。
使用CSS，要了解常用的各种选择器。
1.标记选择器：
一个HTML页面由很多不同的标记组成，而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例：
每一个选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一标记名称声明多种样式。CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。还有一种通配选择器“*”，表示其中设置的样式会应用于所有的网页元素。示例：
<html><head><title>class选择器</title>
<style type="text/css">
.red{ color: red; font-size:18px;}
.green{ color: green; font-size:20px;}
</style></head>
<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3使用class</h3>
</body>
</html>
<html><head><title>ID选择器</title>
<style type="text/css">
#bold{ font-weight: bold;}
#green{ font-size:30px; color:#009900;}
</style></head>
<body>
<p id="bold">ID选择器1</p>
<p id="green">ID选择器2</p>
</body></html>
<html><head><title>交集选择器</title>
<style type="text/css">
p{/标记选择器/ color: blue;}
p.special{/标记.类别选择器/ color: red;}
.special{/类别选择器/ color: green;}
</style></head>
<body>
<p>普通段落文本（蓝色）……</p>
<h3>普通标题文本（黑色）……</h3>
<p class="special">指定了.special类别的段落文本（红色）……</p>
<h3 class="special">指定了.special类别的标题文本（绿色）……</h3>
</body>
</html>
<html><head><title>并集选择器</title>
<style type="text/css">
h1,h2,h3.h4.h5.p{/并集选择器/ color: purple; font-size:15px;}
h2.special,.special,#one{/集体声明/ text-decoration:underline;}
</style></head>
<body>
<h1>示例文字h1……</h1>
<h2 class=”special”>示例文字h2……</h2>
<h3>示例文字h3……</h3>
<p>示例文字p1……</p>
<p class="special">示例文字p2……</p>
<p id="one">示例文字p3……</p>
</body></html>
<html><head><title>后代选择器</title>
<style type=”text/css”>
p span{/嵌套声明/ color: red;}
span{ color:blue;}
</style></head>
<body>
<p>嵌套使<span>用CSS（红色）</span>标记的方法</p>
嵌套之外的<span>标记（黑色）</span>不生效
</body></html>
:hover:visited:active:first-line:first-letter:first-child:nth-child:nth-of-type:nth-last-child
:nth-last-of-type
定义css样式的语法结构
什么是CSS?
中文翻译为样式表!它的作用简单的说：就是可以使你在同一页面里使用不同的超链接样式。
更神奇的是，用CSS，仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为网页样式表的强大和灵活特性。
让我们开始吧！
CSS速成
层叠样式表的基础入门。
CSS结构和规则
各种选择符、伪类、伪元素和层叠顺序的入门。
CSS属性
各种层叠样式表级别一有效的属性的描述。
将样式表加入到HTML中
各种将样式表加入到HTML文本中的方法。
依赖样式表
怎样会是滥用样式表和使你的网页难以处理。
CSS参考
连接到介绍CSS的规范和其它方面的文章。
CSS速成
------------------------------------------------------------------------------
一个样式表由样式规则组成,以告诉浏览器怎样去呈现一个文档.有很多将样式规则加入到你的HTML文档中的方法,但最简单的启动方法是使用HTML的STYLE组件.这个元素放置于文档的HEAD部分,包含网页的样式规则.
要注意到尽管STYLE元素是试验样式表的好方法,它具有某些在用户使用这种方法之前应该考虑的缺点.不同方法的优点和缺点在将样式表加入到HTML中部分中有讨论。
每个规则的组成包括一个选择符--通常是一个HTML的元素,例如BODY, P,或EM--和该选择符所接受的样式.
有很多的属性可以用于定义一个元素.每个属性带一个值,共同地描述选择符应该如何呈现.
样式规则组成如下:
选择符{属性:值}
单一选择符的复合样式声明应该用分号隔开:
选择符{属性1:值1;属性2:值2}
以下是一段定义了H1和H2元素的颜色和字体大小属性:
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
H1{ font-size: x-large; color: red}
H2{ font-size: large; color: blue}
</STYLE>
</HEAD>
上述的样式表告诉浏览器用加大、红色字体去显示一级标题,用大、蓝色字体去显示二级标题. CSS1规格正式地定义了所有的有效属性和值.属性和值在本网站的CSS属性部分也给出了.
本教程专门介绍了CSS非常基础的知识,以提供足够的信息去让你试验自己的样式.要获得CSS更深入的知识,阅读继续阅读以下部分:
CSS结构和规则
CSS属性
将样式表加入到HTML中
CSS结构和规则
基本语法
规则
选择符
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如，
P{ text-indent: 3em}
当中的选择符是P。
类选择符
单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码:
code.html{ color:#191970}
code.css{ color:#4b0082}
以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如，
<P CLASS=warning>每个选择符只允许有一个类。
例如，code.html.proprietary是无效的。</p>
类的声明也可以无须相关的元素:
.note{ font-size: small}
在这个例子，名为note的类可以被用于任何元素。
一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。
ID选择符
ID选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:
#svp94O{ text-indent: 3em}
这点可以参考HTML中的ID属性:
<P ID=svp94O>文本缩进3em</P>
关联选择符
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符
P EM{ background: yellow}
是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。
声明
属性
一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。
值
声明的值是一个属性接受的指定。例如，属性颜色能接受值red。
组合
为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明:
H1, H2, H3, H4, H5, H6{
color: red;
font-family: sans-serif}
继承
实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。
有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。
注解
样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED*/
伪类和伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。
伪类或伪元素规则的形式如
选择符:伪类{属性:值}
或
选择符:伪元素{属性:值}
伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:
选择符.类:伪类{属性:值}
或
选择符.类:伪元素{属性:值}
定位锚伪类
伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。
一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下:
A:link{ color: red}
A:active{ color: blue; font-size: 125%}
A:visited{ color: green; font-size: 85%}
首行伪元素
通常在报纸上的文章，例如Wall Street Journal中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:
P:first-line{
font-variant: small-caps;
font-weight: bold}
首个字母伪元素
首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:
P:first-letter{ font-size: 300%; float: left}
会比普通字体加大三倍。
层叠顺序
当使用了多个样式表，样式表需要争夺特定选择符的控制权。在这些情况下，总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。
! important
规则可以用指定的! important特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地，当网页制作者和读者都指定了重要规则时，网页制作者的规则会超越读者的。以下是! important声明的例子:
BODY{ background: url(bar.gif) white;
background-repeat: repeat-x! important}
Origin of Rules(Author's vs. Reader's)
正如以前所提及的，网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。
网页制作者应该小心地使用! important规则，因为它们会超越用户任何的! important规则。例如，一个用户由于视觉关系，会要求大字体或指定的颜色，而且这样的用户会有可能声明确定的样式规则为! important，因为这些样式对于用户阅读网页是极为重要的。任何的! important规则会超越一般的规则，所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。
选择符规则:计算特性
基于它们的特性级别，样式表也可以超越与之冲突的样式表，一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。
统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。(注意，你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:
#id1{xxx}/* a=1 b=0 c=0-->特性= 100*/
UL UL LI.red{xxx}/* a=0 b=1 c=3-->特性= 013*/
LI.red{xxx}/* a=0 b=1 c=1-->特性= 011*/
LI{xxx}/* a=0 b=0 c=1-->特性= 001*/
特性的顺序
为了方便使用，当两个规则具同样权重时，取后面的那个。
OK，本文到此结束，希望对大家有所帮助。