今天本文主要和大家谈谈CSS中的几种选择器 ,需要的朋友可以参考下,希望能帮助到大家。
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、后代选择器
后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代(后代不仅仅包括儿子,还包括子子孙孙)。
以上就是谈谈CSS中的几种选择器 的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2899459.html