css有什么基本选择器和高级选择器

发布时间:2021-10-27 17:22:43 作者:小新
来源:亿速云 阅读:128

这篇文章给大家分享的是有关css有什么基本选择器和高级选择器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

ID选择器>类选择器>标签选择器

行内样式>内部样式>外部样式

*结构伪类选择器 一旦设置 不管在行内还是在后面重新设置,都没办法改变

*结构伪类选择器设置奇偶行以及从第三行开始变色如何实现

nth-cild(2N+3)表示从第三行开始的奇数行

同理 nth-child(2N+4)表示从第四行开始的偶数行

nth-cild(2N+5)表示从第五行开始的奇数行

*设置前三个:

p:nth-child(-n+3){

background-color: #b3d4fc;

}

*使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点

E F:nth-child(n)在父级里从一个元素开始查找,不分类型

E F:nth-of-type(n)在父级里先看类型,再看位置

注意

child 跟子选择器没有关系,可以是子选择,也可以是后代选择 由层次选择器 (如table tr)来控制

1.层次选择器

table td 后代选择器 td包含在table里

div>p子选择器 p是div的子元素

p1+p p1后面一个兄弟p变化 是对p进行处理 p1不变 而且只是下面相邻的变化 上面相邻不变化

p1~p p1后面所有兄弟p变化 p1不变

2.结构伪类选择器

P:first-child 作为父元素的第一个子元素得元素 p

P:last-child 作为父元素的最后一个子元素得元素 p

P a :nth-child(n) p中第n个a元素 (even)(odd)

p:first-of-type 必须是p元素 不是子元素也行

p a:nth-of-type(n)

必须是a元素 不是a的子元素也行

3.属性选择器

a[id] a标签中含有id的

a[id=111] a标签中的id=111的

a[href*=http] a标签中包含href属性 且都包含http

a[href&=png] a标签中包含href属性 且最后以png结尾

a[href^=http://] a标签中包含href属性且以http://开头

感谢各位的阅读!关于“css有什么基本选择器和高级选择器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. xpath选择器和css选择器
  2. jQuery高级选择器

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

css

上一篇:HTML5新增标签是哪些

下一篇:Mysql数据分组排名实现的示例分析

相关阅读

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

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