css奇数偶数选择器_css高级选择器和基本选择器
黑马程序员成都java基础班 32期 2019.10.15开班
黑马程序员成都python基础班 3期 2019.10.24开班
黑马程序员成都前端基础班 4期 2019.8.23开班
黑马程序员成都java基础班 31期 2019.8.28开班
黑马程序员成都UI基础班 2期 2019.10.15开班
![](/assets/blank.gif)
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://开头
1.层次选择器
![](/assets/blank.gif)
*相邻兄弟选择器,只对后面的兄弟有作用,对前面的兄弟没效果。
*相邻兄弟选择器,E+F E不会产生效果效果
2.结构伪类选择器
![](/assets/blank.gif)
使用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)来控制
设置前三个:
p:nth-child(-n+3){
background-color: #b3d4fc;
}
3.属性选择器
![](/assets/blank.gif)
举例:
a[href=^http]{backgroud-color:red}
![](/assets/blank.gif)
此文章来源于黑马论坛:http://bbs.itheima.com/forum.php?mod=viewthread&tid=466990
![](/assets/blank.gif)
css奇数偶数选择器_css高级选择器和基本选择器相关推荐
- css奇数偶数选择器
前端项目开发中,需要根据行数的奇数和偶数的不同,设置不同的颜色显示,以在视觉上给用户以良好的浏览体验,这里就需要使用css奇数偶数选择器. 主要用的::nth-of-type或者:nth-child. ...
- html选择器_css的9个常用选择器
1.类选择器(通过类名进行选择) <!DOCTYPE html> <html> <head><title></title> </hea ...
- css 取偶数节点_css——奇数、偶数、指定数样式
语法 :nth-child(an+b) 第一种:简单数字序号写法 :nth-child(number) 直接匹配第number个元素.参数number必须为大于0的整数. 例子: li:nth- ...
- html css 奇数偶数,网页设计中为啥少用奇数字体?_html/css_WEB-ITnose
一.UI设计师的原因 多数设计师用的设计软件(如:ps)大多数都是偶数,所以前端工程师一般都是用偶数字体 二.浏览器的原因 其一是为了迁就ie6,万恶的ie6会把定义为13px的字渲染成14px,你可 ...
- 运用CSS选择器、CSS文本相关样式及高级特性实现如图所示的宣传页面
运用CSS选择器.CSS文本相关样式及高级特性实现如图所示的宣传页面 首先新建文件夹,给它命名为宣传页面 提前下载好图片,并放至文件夹内 然后开始建立网页结构 使用<div>盒子模型,&l ...
- css的基本选择器和高级选择器
css选择器:指定css要作用的标签,即选择哪个容器,更改它的样式 css选择器主要分为两大类:基本选择器和高级选择器 基本选择器: 元素选择器(标签选择器) id选择器 类选择器(class选择器) ...
- CSS之选择器(三)伪类选择器
上文介绍了一些常用的复合选择器,现在再补充一些不常用但有必要了解的一些复合选择器和属性选择器. 2.复合选择器 复合选择器补充 选择器 示例 示例说明 兄弟选择器(一) #l1+li 选择和id值为l ...
- css知识笔记(一)——基础知识、选择器、元素分类
CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{f ...
- [css] 为什么说css中能用子代选择器的时候不要用后代选择器?
[css] 为什么说css中能用子代选择器的时候不要用后代选择器? 选择从右到左依次解析匹配,所以后代选择器会去找它的所有父级, 而子代选择器只会选择直接的父级:减少匹配次数,提高效率 个人简介 我是 ...
最新文章
- 学习和在生产环节使用d语言的三个条件
- Visual Stdio VS 错误 error : 0xC00000FD: Stack overflow. 更改堆栈空间解决栈溢出问题
- Android动画 详解(一 补间动画)
- CMake3:添加一个库
- 洛谷 4115 Qtree4——链分治
- 前端学习(2529):搭建中央管理
- Horizo​​ntal Pod Autoscaler (HPA) 根据资源横向扩展
- [转载] Java7中增加的新特性
- MySQL_DBA整理
- mysql分组函数_mysql分组函数
- SpringNet整合NHibernate相关配置
- JAVA基础——接口(全网最详细教程)
- ubuntu服务器系统安装教程,Ubuntu--服务器版本系统安装图解教程
- 5款最佳Linux服务器系统推荐
- Win10修改用户名及用户文件夹名
- android 蓝牙串口自动断开,uni-app 蓝牙连接被自动断开问题
- Word在目录里插入引导符(页码前的小点点)的方法
- 智课雅思短语---五、 in contrast / on the contrary
- js两个二维数组合并并去除相同项(整理)
- roc图 r语言_R语言pROC包绘制ROC曲线
热门文章
- cmake -- No rule to make target xxx.so
- 苹果手机运行服务器无响应是怎么回事,苹果手机显示无服务状态是什么原因?怎么解决?...
- gitk安装(linux,window)
- python简单例题_python课堂例题,简单,在线等
- ThinkPHP 整合微信支付 扫码支付 模式二 图文教程
- python如何画出多个独立的图片_如何使用python语言中的可视化工具绘制多个图
- Linux运维面试-04
- 用DIV+CSS技术设计的个人电影网站(web前端网页制作课作业)电影网页介绍8页 带报告3900字
- VB合并excel表格(工作表和工作簿)
- 多行文字cad提取数据_CAD中使用多行文字标尺的技巧