当前位置:  首页  >  前端开发  >  HTML

详解CSS中的选择器-html教程

1、通配符选择器通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素*设置当前页面中所有标签的颜色为红色**{color:red;}2、标签选择器标签选择器就是选择当前页面中相同名字的标签*设置所有p标签的文字颜色为红色*p{color:red;}3、ID选择器id选择器使用"#"进行标识,后

1、通配符选择器

通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素

/*设置当前页面中所有标签的颜色为红色*/* {color: red;
}

2、标签选择器

标签选择器就是选择当前页面中相同名字的标签

/*设置所有p标签的文字颜色为红色*/p {color: red;
}

3、ID选择器

id选择器使用"#"进行标识,后面紧跟id名

{:;
}

这是标题

注意HTML标签中ID的属性值在一个页面中必须是唯一的(是W3C规范而不是硬性规则)。

ID选择器命名规范

  • 只允许出现字母(大小写均可,严格区分) 、下划线、数字,也就是说,id=”Head”和 id=”head”不冲突

  • 只允许以字母开头

  • 命名没有长度限制,可以是1个字母,也可以是很多个,不过不建议太长

  • 不允许出现标签名(不是硬性规定)

4、类选择器

类选择器就是选取页面中所有标签的class属性值相同的一类标签,用.(点)表示

{:;
}

这是标题1

这是标题2

一个标签可以包含多个类选择器,在class标签中用空格隔开。

.head {color: blue;
}.subHead {font-size: 50px;
}

这是标题2

5、复合选择器

5.1、交集选择器

交集选择器又称标签指定式选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如

h3.special  /* 需要满足标签是h3同时拥有special类 */

p#one /* 需要满足标签是p同时id为one */

5.2、并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式

/*同时给标签h3与class为box的元素设置样式*/h3, .box {color: red;font-size: 14px;
}

5.3、后代选择器

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代(后代不仅仅包括儿子,还包括子子孙孙)。

 1  2  3      4          5         Document 6  7         12     13     14         

15

    16
  • 北京
  • 17
  • 河北
  • 18
  • 山西
  • 19
20 21
    22
  • 广东
  • 23
  • 海南
  • 24
  • 福建
  • 25
26

27 28

页面显示效果

:link

应用于未被访问过的链接。IE6不兼容,解决此问题,直接使用a标签。

:visited

应用于已经被访问过的链接

:hover

应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接,IE7+所有元素都兼容。

:active

应用于被激活的元素,如被点击的链接、被按下的按钮等。

:focus

应用于拥有键盘输入焦点的元素。

以a标签为例

 1  2  3  4      5     伪类 6     27 28 29     伪类的应用链接30 31 

Tools Online | 在线开发工具
RankList | 热门文章
扫码关注 PHP1 官方微信号
Recommend | 推荐阅读
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有