CSS学习之二 选择器
建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
1、元素选择器往往是HTML元素，也可能是XML定义的元素，举例
h1 {color:red;}/ 元素选择器 /
h2 {font:normal 12px/16px "Courier New",Arial;}/ css关键字由空格隔开，只有font属性中字体大小和行高可用“/”分割 /
h3,p {background-color:#EEE;}/ 选择器的分组 /
2、通配选择器，它为页面中所有元素添加样式，就像是一个通配符，举例
{color:blue;}/ 通配选择器，等价于列出了文档中所有元素的color属性均为blue，它的优先级很低 /
.p {font-weight:bold;}/ 类选择器，运用到所有类为p的元素上，可以忽略()号，等价于.p /
3、类选择器多的不废话，说一下多类选择器吧，举例
有如下HTML代码
<p class="p">This is a paragraph</p><!-- 类选择符 -->
<div class="p">This is a div element</div><!-- 类选择符 -->
<p class="urgent warning">This is a paragraph</p><!-- 多类选择符，一个class可以包含一个词列表，各个词之间用空格隔开 -->
<p class="urgent warning help">Those words's background-color is red too in all browser!</p><!-- 多类选择符，.waring.urgent选择器将不能匹配这里的p -->
<p class=" help ie6">Those words's background-color is red in browser ie6!</p><!-- 多类选择符，由于help在选择器中出现，所以在IE6中背景为红色的 -->
<p class="help">Those words's background-color is red in browser ie6!</p><!-- 类选择符，由于help在选择器中出现，所以在IE6中背景为红色的 -->
<p>This is a paragraph<span class="warning"> But this is a span element</span></p>
CSS风格如下
p.p {font-style:italic;}/ 类选择器，选择段落且类为p时才显示粗体 /
.waring {font-weight:bold;}
.urgent {font-style:italic;}
.warning.urgent {background-color:silver;}/ 类选择器，选择包含waring和urgent两个类的元素，且出现的顺序可以和定义class时不同 /
p.warning.urgent.help {background-color:red;}/ 类选择器，选择包含waring,urgent和help三个类的p元素，在IE6中此选择符匹配class属性中包含help的所有p元素 /
在非IE6狼蚁网站SEO优化，CSS里如果有.warning.urgent.help这类的选择器，它只匹配包含waring,urgent和help三个类的HTML元素，而HTML中诸如class="urgent warning help"这类的选择器却可以匹配CSS中多种样式；而在IE6下却不同，这一点是很值得注意的。
4、ID选择器比起类选择器来说，ID选择器不会那么复杂，ID属性不允许有以空格分隔的词列表，比如以下的写法是不对的
<div id="div1 div2">...</div><!-- 这种写法是不对的 -->
无论CSS怎么写，样式都会无效。可是，ID选择符与类选择符是可以结合使用的，如下
#div.div {color:red;}/ ID选择器与类选择器的结合，可以这么写的，且先后顺序可以颠倒 /
匹配即声明ID为div又声明属于div这个类的HTML元素。
还有要补充一点，既然使用了ID选择符，那么就只能对一种元素中的一个元素使用ID，比如狼蚁网站SEO优化的写法就不对
<h1 id="important">important</h1>
<em id="important">important</em>
<ul id="important">important</ul>
这三种（个）元素具有相同的ID，在同一个文档中不能够出现，这也体现出ID的唯一性。
5、属性选择符目前遗憾的是属性选择器没有被IE6识别，而IE7及以上IE系列支持大多数CSS2.1属性选择器。
简单的属性选择符实例
a[href] {color:yellow;}/ 简单的属性选择符，匹配所有具有href属性的a元素 /
[title] {font-weight:bold;}/ 简单的属性选择符，匹配所有具有title属性的元素 /
a[href][title] {color:red;}/ 简单的属性选择符，匹配所有有title属性且有href属性的的a元素 /
狼蚁网站SEO优化是根据具体属性值选择
a[href="../chemdemo/"] {color:yellow;}/ 根据具体属性值选择，匹配链接为“../chemdemo/”的a标签 /
p[class="urgent warning"] {font-weight:bold;}/ 根据具体属性值选择，要求属性值必须完全匹配，写成class="urgent"或其他是不对的 /
上例中，p[class="urgent warning"]严格匹配具有 class="urgent warning"类的p元素，urgent与warning的顺序不颠倒。
狼蚁网站SEO优化是根据部分属性值选择对于class="urgent warning"这个类，CSS可以这样写
p[class~="warning"] {color:red;}/ 根据部分属性值选择，“~”表示属性中出现一个空格分隔的词来完成选择相应的p元素 /
[class~="urgent"] {color:grey;}/ 根据部分属性值选择，“~”表示属性中出现一个空格分隔的词来完成选择 /
不仅仅只局限于class属性，任何属性都可以使用属性选择符，比如选择器img[title~="Figure"]会匹配title值为含有“空格和Figure”的图像。
还有以下几种子串匹配属性选择器
[class^="cl"] {}/ 子串匹配属性选择器，“^=”匹配class属性的值以cl开头的元素 /
[class$="dy"] {}/ 子串匹配属性选择器，“$=”匹配class属性的值以dy结尾的元素 /
[class="ou"] {}/ 子串匹配属性选择器，“=”匹配class属性的值还有ou的元素 /
一种属性选择器是特定属性选择类型，例子如下
[lang|="en"] {}/ 选择lang属性为en或以en-开头的所有元素 /
img[src|="figure"] {}/ 可以用来选择图片名为“figure-”的系列图片 /
6、根据HTML标签的嵌套关系选择元素
一种是选择后代元素
h4 em {}/ 为h4元素的后代em元素添加样式 /
ul ol li em {}/ 后代选择器，不局限于两个选择器 /
一种是选择子元素
加入有HTML代码
<h2>This is <strong>very</strong> important.</h2><!-- strong元素是h2的子元素、后代元素 -->
<h2>This is <em>really <strong>very</strong></em> important.</h2><!-- strong元素是h2的后代元素而非子元素 -->
那么狼蚁网站SEO优化的CSS将使前面的“very”以粗体显示
h2 > strong {color:red;}/ 选择作为h2元素的所有子元素中的strong元素 /
还有一种是选择相邻兄弟元素当不想选择所有后代元素时，可用选择相邻兄弟元素的办法缩小选取范围
h2 + p {}/ 选择紧跟在h2后面的p元素（注意是对p添加样式），它们是兄弟元素（必须有相同的父元素）/
html > body tabke + ul {}/ 多种选择符的结合运用 /
注IE6不支持子选择器和相邻选择器。
7、伪类
只运用于链接得伪类有两个“:link”和“:visited”，相信了解CSS的人都不陌生，这里不再举例；
动态伪类在CSS2.1中包括三种“:focus”、“:hover”和“:active”，在Web页面中常用的方式是与静态伪类结合
a:link {}
a:visited {}
a:hover {}
a:active {}
伪类顺序很重要，个人的记忆方法为love-hate（爱与恨）。
动态伪类可以运用到任何元素，比如
input:focus {background:#DDD;}/ 突出显示一个有输入焦点的表单元素 /
:hover {background:gray;}/ 从body元素继承的所有元素在指针停留时会显示灰色背景 /
如果要选择元素的第一个子元素，可以用“:first-child”静态伪类
CSS样式
HTML代码
<div>
<p>p1</p><!-- 背景为灰色 -->
<p>p2</p>
<ul>
<li>1</li><!-- 背景为灰色 -->
<li>2</li>
<li>3</li>
</ul>
</div>
注意IE6不支持“:first-child”静态伪类。
狼蚁网站SEO优化是关于结合伪类的用法
a:link:hover {color:red;}/ 顺序可交换，即可以为a:hover:link，IE6中只会注意:hover而忽略link部分 /
a:visited:hover {color:maroon;}/ 顺序可交换，IE6中只会注意:hover而忽略link部分 /
上面的样式可以实现鼠标指针停留在未访问链接上时，链接为红色，当停留在已访问过的链接上时，颜色为紫红色。
还可以根据语言来选择，即使用:lang为类
:lang(fr) {font-style:italic;}/ 把法语元素变成斜体 /
更多语言代码请查阅CSS手册。
，还有:first、:left:、right三种伪类，它们仅用于@page规则，例如
@page :right { margin: 4cm }/ 设置页面容器位于装订线右边的所有页面使用的样式 /
@page :first {}/ 设置页面容器第一页使用的样式 /
8、伪元素CSS2.1中有:first-letter、:first-line、:before、:after四种伪元素，实例
p {width:500px;}/ 使用:first-line前先设置元素宽度，如果未指定对象的width属性，首行的内容长度随窗口宽度而定 /
p:first-line {color:red;}/ 不管是否设置了p的宽度，p元素内第一段文字总是以红色显示 /
p:first-letter {font-size:2em;}
h2:before {content:"{";color:green;}/ 在h2元素的内容前面添加了一个“{”符号，并且颜色为绿色 /
h2:after {content:"}";color:green;}/ 在h2元素的内容后面添加了一个“}”符号，并且颜色为绿色 /
h3:after {content:"END";color:red;}/ 非IE6浏览器中，h3元素会添加红色的的“END”单词 /
span:before {content:"s";color:red;}/ 非IE6浏览器中，span前面会添加一个红色的“s” /
span:first-letter {color:green;font-size:40px;}/ span元素的第一个单词不会变成绿色，大小为默认值 /
span {position:absolute;}/ 对span使用绝对定位后，第一个字母变为绿色，大小为40px /
得出的结论是
1）IE6支持:first-line和:first-letter伪元素，不支持:after和:before伪元素；
2）:first-line和:first-letter只能用于块级元素，:after和:before适合块级和行内元素；
3）行内元素设置设定position属性为absolute,或者设定display属性为block后，:first-line和:first-letter有效。
复制代码
代码如下:h1 {color:red;}/ 元素选择器 /
h2 {font:normal 12px/16px "Courier New",Arial;}/ css关键字由空格隔开，只有font属性中字体大小和行高可用“/”分割 /
h3,p {background-color:#EEE;}/ 选择器的分组 /
2、通配选择器，它为页面中所有元素添加样式，就像是一个通配符，举例
复制代码
代码如下:{color:blue;}/ 通配选择器，等价于列出了文档中所有元素的color属性均为blue，它的优先级很低 /
.p {font-weight:bold;}/ 类选择器，运用到所有类为p的元素上，可以忽略()号，等价于.p /
3、类选择器多的不废话，说一下多类选择器吧，举例
有如下HTML代码
复制代码
代码如下:<p class="p">This is a paragraph</p><!-- 类选择符 -->
<div class="p">This is a div element</div><!-- 类选择符 -->
<p class="urgent warning">This is a paragraph</p><!-- 多类选择符，一个class可以包含一个词列表，各个词之间用空格隔开 -->
<p class="urgent warning help">Those words's background-color is red too in all browser!</p><!-- 多类选择符，.waring.urgent选择器将不能匹配这里的p -->
<p class=" help ie6">Those words's background-color is red in browser ie6!</p><!-- 多类选择符，由于help在选择器中出现，所以在IE6中背景为红色的 -->
<p class="help">Those words's background-color is red in browser ie6!</p><!-- 类选择符，由于help在选择器中出现，所以在IE6中背景为红色的 -->
<p>This is a paragraph<span class="warning"> But this is a span element</span></p>
CSS风格如下
复制代码
代码如下:p.p {font-style:italic;}/ 类选择器，选择段落且类为p时才显示粗体 /
.waring {font-weight:bold;}
.urgent {font-style:italic;}
.warning.urgent {background-color:silver;}/ 类选择器，选择包含waring和urgent两个类的元素，且出现的顺序可以和定义class时不同 /
p.warning.urgent.help {background-color:red;}/ 类选择器，选择包含waring,urgent和help三个类的p元素，在IE6中此选择符匹配class属性中包含help的所有p元素 /
在非IE6狼蚁网站SEO优化，CSS里如果有.warning.urgent.help这类的选择器，它只匹配包含waring,urgent和help三个类的HTML元素，而HTML中诸如class="urgent warning help"这类的选择器却可以匹配CSS中多种样式；而在IE6下却不同，这一点是很值得注意的。
4、ID选择器比起类选择器来说，ID选择器不会那么复杂，ID属性不允许有以空格分隔的词列表，比如以下的写法是不对的
复制代码
代码如下:<div id="div1 div2">...</div><!-- 这种写法是不对的 -->
无论CSS怎么写，样式都会无效。可是，ID选择符与类选择符是可以结合使用的，如下
复制代码
代码如下:#div.div {color:red;}/ ID选择器与类选择器的结合，可以这么写的，且先后顺序可以颠倒 /
匹配即声明ID为div又声明属于div这个类的HTML元素。
还有要补充一点，既然使用了ID选择符，那么就只能对一种元素中的一个元素使用ID，比如狼蚁网站SEO优化的写法就不对
复制代码
代码如下:<h1 id="important">important</h1>
<em id="important">important</em>
<ul id="important">important</ul>
这三种（个）元素具有相同的ID，在同一个文档中不能够出现，这也体现出ID的唯一性。
5、属性选择符目前遗憾的是属性选择器没有被IE6识别，而IE7及以上IE系列支持大多数CSS2.1属性选择器。
简单的属性选择符实例
复制代码
代码如下:a[href] {color:yellow;}/ 简单的属性选择符，匹配所有具有href属性的a元素 /
[title] {font-weight:bold;}/ 简单的属性选择符，匹配所有具有title属性的元素 /
a[href][title] {color:red;}/ 简单的属性选择符，匹配所有有title属性且有href属性的的a元素 /
狼蚁网站SEO优化是根据具体属性值选择
复制代码
代码如下:a[href="../chemdemo/"] {color:yellow;}/ 根据具体属性值选择，匹配链接为“../chemdemo/”的a标签 /
p[class="urgent warning"] {font-weight:bold;}/ 根据具体属性值选择，要求属性值必须完全匹配，写成class="urgent"或其他是不对的 /
上例中，p[class="urgent warning"]严格匹配具有 class="urgent warning"类的p元素，urgent与warning的顺序不颠倒。
狼蚁网站SEO优化是根据部分属性值选择对于class="urgent warning"这个类，CSS可以这样写
复制代码
代码如下:p[class~="warning"] {color:red;}/ 根据部分属性值选择，“~”表示属性中出现一个空格分隔的词来完成选择相应的p元素 /
[class~="urgent"] {color:grey;}/ 根据部分属性值选择，“~”表示属性中出现一个空格分隔的词来完成选择 /
不仅仅只局限于class属性，任何属性都可以使用属性选择符，比如选择器img[title~="Figure"]会匹配title值为含有“空格和Figure”的图像。
还有以下几种子串匹配属性选择器
复制代码
代码如下:[class^="cl"] {}/ 子串匹配属性选择器，“^=”匹配class属性的值以cl开头的元素 /
[class$="dy"] {}/ 子串匹配属性选择器，“$=”匹配class属性的值以dy结尾的元素 /
[class="ou"] {}/ 子串匹配属性选择器，“=”匹配class属性的值还有ou的元素 /
一种属性选择器是特定属性选择类型，例子如下
复制代码
代码如下:[lang|="en"] {}/ 选择lang属性为en或以en-开头的所有元素 /
img[src|="figure"] {}/ 可以用来选择图片名为“figure-”的系列图片 /
6、根据HTML标签的嵌套关系选择元素
一种是选择后代元素
复制代码
代码如下:h4 em {}/ 为h4元素的后代em元素添加样式 /
ul ol li em {}/ 后代选择器，不局限于两个选择器 /
一种是选择子元素
加入有HTML代码
复制代码
代码如下:<h2>This is <strong>very</strong> important.</h2><!-- strong元素是h2的子元素、后代元素 -->
<h2>This is <em>really <strong>very</strong></em> important.</h2><!-- strong元素是h2的后代元素而非子元素 -->
那么狼蚁网站SEO优化的CSS将使前面的“very”以粗体显示
复制代码
代码如下:h2 > strong {color:red;}/ 选择作为h2元素的所有子元素中的strong元素 /
还有一种是选择相邻兄弟元素当不想选择所有后代元素时，可用选择相邻兄弟元素的办法缩小选取范围
复制代码
代码如下:h2 + p {}/ 选择紧跟在h2后面的p元素（注意是对p添加样式），它们是兄弟元素（必须有相同的父元素）/
html > body tabke + ul {}/ 多种选择符的结合运用 /
注IE6不支持子选择器和相邻选择器。
7、伪类
只运用于链接得伪类有两个“:link”和“:visited”，相信了解CSS的人都不陌生，这里不再举例；
动态伪类在CSS2.1中包括三种“:focus”、“:hover”和“:active”，在Web页面中常用的方式是与静态伪类结合
复制代码
代码如下:a:link {}
a:visited {}
a:hover {}
a:active {}
伪类顺序很重要，个人的记忆方法为love-hate（爱与恨）。
动态伪类可以运用到任何元素，比如
复制代码
代码如下:input:focus {background:#DDD;}/ 突出显示一个有输入焦点的表单元素 /
:hover {background:gray;}/ 从body元素继承的所有元素在指针停留时会显示灰色背景 /
如果要选择元素的第一个子元素，可以用“:first-child”静态伪类
CSS样式
复制代码
代码如下:p:first-child,li:first-child {background:#CCC;}
HTML代码
复制代码
代码如下:<div>
<p>p1</p><!-- 背景为灰色 -->
<p>p2</p>
<ul>
<li>1</li><!-- 背景为灰色 -->
<li>2</li>
<li>3</li>
</ul>
</div>
注意IE6不支持“:first-child”静态伪类。
狼蚁网站SEO优化是关于结合伪类的用法
复制代码
代码如下:a:link:hover {color:red;}/ 顺序可交换，即可以为a:hover:link，IE6中只会注意:hover而忽略link部分 /
a:visited:hover {color:maroon;}/ 顺序可交换，IE6中只会注意:hover而忽略link部分 /
上面的样式可以实现鼠标指针停留在未访问链接上时，链接为红色，当停留在已访问过的链接上时，颜色为紫红色。
还可以根据语言来选择，即使用:lang为类
复制代码
代码如下::lang(fr) {font-style:italic;}/ 把法语元素变成斜体 /
更多语言代码请查阅CSS手册。
，还有:first、:left:、right三种伪类，它们仅用于@page规则，例如
复制代码
代码如下:@page :right { margin: 4cm }/ 设置页面容器位于装订线右边的所有页面使用的样式 /
@page :first {}/ 设置页面容器第一页使用的样式 /
8、伪元素CSS2.1中有:first-letter、:first-line、:before、:after四种伪元素，实例
复制代码
代码如下:p {width:500px;}/ 使用:first-line前先设置元素宽度，如果未指定对象的width属性，首行的内容长度随窗口宽度而定 /
p:first-line {color:red;}/ 不管是否设置了p的宽度，p元素内第一段文字总是以红色显示 /
p:first-letter {font-size:2em;}
h2:before {content:"{";color:green;}/ 在h2元素的内容前面添加了一个“{”符号，并且颜色为绿色 /
h2:after {content:"}";color:green;}/ 在h2元素的内容后面添加了一个“}”符号，并且颜色为绿色 /
h3:after {content:"END";color:red;}/ 非IE6浏览器中，h3元素会添加红色的的“END”单词 /
span:before {content:"s";color:red;}/ 非IE6浏览器中，span前面会添加一个红色的“s” /
span:first-letter {color:green;font-size:40px;}/ span元素的第一个单词不会变成绿色，大小为默认值 /
span {position:absolute;}/ 对span使用绝对定位后，第一个字母变为绿色，大小为40px /
得出的结论是
1）IE6支持:first-line和:first-letter伪元素，不支持:after和:before伪元素；
2）:first-line和:first-letter只能用于块级元素，:after和:before适合块级和行内元素；
3）行内元素设置设定position属性为absolute,或者设定display属性为block后，:first-line和:first-letter有效。
上一篇：CSS学习之三 字体使用说明
下一篇：CSS学习之一 CSS样式引入方法
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML