本文目录
CSS的选择器类型有哪些
1、标签选择器：就是HTML标签，如body
table等
2、id选择器：《body
id=“id1“》
对应选择器为#id1
3、类选择器：《body
class=“class1“》
对应选择器为.class1
4、伪类、伪对象：如a:link,a:hover,a:visited等
4、以下为几种选择器的含义，做个参考：
table,ul
同时为table
ul指定样式
table
ul
为table下的ul指定样式
table#id1
为id为id1的table标签指定样式
table.class1
为class属性为class1的table标签指定样式
css规则按选择器类型分为哪四种
1、代表内联样式，如: style=””，权值为1000。
2、代表ID选择器，如：#content，权值为100。
3、代表类，伪类和属性选择器，如.content，权值为10。
4、代表类型(元素)选择器和伪元素选择器，如div p，权值为1。
按照CSS代码的执行先后顺序。如果有重复的规则，按照后执行的定义。最终规则是多个定义规则的综合。重点：高级规则定义对于不同表格的文字样式定义。(不同表格使用不同ID、使用类样式定义)一页中的多种超级链接样式定义。多个相同规则不同对象的CSS共同定义。对于同一对象定义的多种CSS方式考虑哪种更科学。-css的选择器类型四种
CSS中的选择器分几种
1、标签选择器（如：body,div,p,ul,li）
2、.类选择器（如：class=“head“,class=“head_logo“）
3、ID选择器（如：id=“name“,id=“name_txt“）
4、全局选择器（如：*号）
5、.组合选择器（如：.head
.head_logo,注意两选择器用空格键分开）
6.继承选择器（如：div
p,注意两选择器用空格键分开）
7、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
8、字符串匹配的属性选择符(^
$
*三种，分别对应开始、结尾、包含)
以上选择器在日常开发中最常用的就是标签选择器、类选择器和id选择器，下面是这三种选择器的基本用法
-css的选择器类型四种
css规则按选择器类型分为那四种
1、简易属性选择器
只顾其名不顾其值，这是简易属性选择器的特点。
h1[class] {color: silver;}将会作用于任何带class的h1元素，不管class的值是什么。所以《h1 class=“hoopla“》Hello《/h1》、《h1 class=“severe“》Serenity《/h1》、《h1 class=“fancy“》Fooling《/h1》的h1都会受到这条规则的影响。
2、精确属性值选择器
3、部分属性值选择器
如其名，只要属性值部分匹配（这里的部分，实际上要匹配整个单词）就会作用于该元素。让我们来看个例子：
《p class=“urgent warning“》When handling plutonium, care must be taken to avoid the formation of a critical mass.《/p》p[class~=“warning“] {font-weight: bold;}
和
p[class~=“urgent“] {font-weight: bold;}
中任何一条都可以让这个p的字体变粗。
该选择器十分有用，比如你要样式化插图，其title中都含字符串”Figure”，如 title= “Figure 5：xxx说明“，则你可以使用img[title~=“Figure“] 。
需要注重的是，如我第一句就强调的，你需要匹配的是整个单词，img[title~=“Figure“] 不会匹配title= “Figure5：xxx说明“。
另外，我做了个小小的测试，你把例子中的“Figure”改成“插图”，把img[title~=“Figure“] 改成img[title~=“插图“] ，在Firefox中依然可以匹配，不管编码（encoding）是GB2312还是UTF-8。看来CSS对中文的支持还不赖。
4、非凡属性选择器
有点怪，这个选择器。它是这样工作的，嗯，举个例子比描述更轻易。
*[lang|=“en“] {color: white;}，这条规则（rule）将会选择属性lang的值en或者en-打头的元素。就是说，它可以匹配《h1 lang=“en“》Hello!《/h1》、《p lang=“en-us“》Greetings!《/p》和《div lang=“en-au“》G’day!《/div》而不匹配《p lang=“fr“》Bonjour!《/p》和《h3 lang=“cy-en“》Jrooana!《/h3》。
-css的选择器类型四种
什么是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
element》element
div》p
选择父元素为
《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^=“
-css的选择器类型四种
