扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关CSS选择器的类别有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为新邱企业提供专业的成都做网站、成都网站设计、成都外贸网站建设,新邱网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
选择器分为两大类:
1.基本选择器
a.标签选择器:指的就是选择器的名字代表html页面上的标签
p{
color:red ;
border:1px dashed green;
}
b.类选择器:规定用圆点.来定义
优点:灵活
eg: .one{background-color:#ff0099; }
c. ID选择器:规定用#来定义
eg: #one{cursor:hand; }
区别:标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。
d:通用选择器: 用*定义,代表页面上的所有标签。
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
2.扩展选择器
a.组合选择器:采用逗号隔开
eg: p,h2,h3,.one,#two{color:red ; }
b.关联选择器(后代选择器):采用空格隔开
eg: h5 span i{color:red ; }
表示h5标签中的span标签中的i标签的样式
h5和span和i标签不一定是紧挨着的。
c.伪类选择器
1) :静态伪类:规定是用:来定义.只有两个.只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色
eg:a:link{color:red ;}
a:visited{color:yellow;}
注意: a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)
2) :动态伪类 :针对所有的标签都适用
:hover :是移动到某个标签上的时候
:focus :是某个标签获得焦点的时候
:active :点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
感谢各位的阅读!关于“CSS选择器的类别有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流