温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS选择器的类别有哪些

发布时间:2022-03-10 10:30:31 来源:亿速云 阅读:129 作者:小新 栏目:web开发

这篇文章给大家分享的是有关CSS选择器的类别有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

选择器分为两大类:

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标签的样式

h5spani标签不一定是紧挨着的。

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选择器的类别有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI