CSS选择器学习小结 (css基本选择器 + 组合选择器 + :nth-child()高级选择器)
目录
css基本选择器:
通用选择器:
格式:
元素选择器:
格式:
样例:
id选择器:
格式:
class类选择器:
格式:
分组选择器:
格式:
基本选择器的权重:
css组合选择器:
后代选择器:
格式:
样例:
子代选择器:
格式:
子代选择器和后代选择器比较:
相邻兄弟选择器:
格式:
普通兄弟选择器:
格式:
nth-child()的浅显使用:
选择列表中下标为偶数的标签:
选取列表中下标为x的标签:
选择列表中下标为奇数的标签:
选取列表中下标为x及x之后的所有的标签:
选取列表中下标为x及x之前的所有的标签:
自定义选取标签.
样例1:
样例二:
css基本选择器:
通用选择器:
格式:
*{
x:y
}
元素选择器:
格式:
指定元素:{
x:y
}
样例:
div{
x:y
}
id选择器:
格式:
#id{
x:y
}
class类选择器:
格式:
.class属性值{
x:y
}
分组选择器:
将选择器1,2,3的内容都选中.
格式:
选择器1,选择器2,选择器3{
x:y
}
基本选择器的权重:
css组合选择器:
后代选择器:
格式:
选择器1 子元素{
x:y
}
注:空格后一定要跟前者的子元素,倘若是平级元素 则该语句无效.
样例:
<body><style>.ul1 .li1{color: red;}</style><ul class="ul1" ><li class="li1">l1</li><li >l2</li><li >l3</li><li >l4</li><p> p1</p></ul><ul class="ul2" ><li >l1</li><li >l2</li><li >l3</li><li >l4</li></ul>
</body>
子代选择器:
格式:
选择器1 > 子元素{
x:y
}
注:和后代选择器不同的是,子代选择器若子二代中也有条件上的子元素则不生效. (p标签包裹不算一层.)
子代选择器和后代选择器比较:
后代选择器:
<body><style>.ul1 li{border: 1px solid ;border-color: aqua; color: red;}</style><ul class="ul1" ><li class="li1">l1</li><div >l2<li>p11</li><li>p11</li></div><li >l3</li><li >l4</li><p> p1</p></ul><ul class="ul2" ><li >l1</li><li >l2</li><li >l3</li><li >l4</li></ul>
</body>
子代选择器:
<body><style>.ul1 > li{border: 1px solid ;border-color: aqua; color: red;}</style><ul class="ul1" ><li class="li1">l1</li><div >l2<li>p11</li><li>p11</li></div><li >l3</li><li >l4</li><p> p1</p></ul><ul class="ul2" ><li >l1</li><li >l2</li><li >l3</li><li >l4</li></ul>
</body>
子代选择器但包裹标签为p标签:
<body><style>.ul1 > li{border: 1px solid ;border-color: aqua; color: red;}</style><ul class="ul1" ><li class="li1">l1</li><p >l2<li>p11</li><li>p11</li></p><li >l3</li><li >l4</li><p> p1</p></ul><ul class="ul2" ><li >l1</li><li >l2</li><li >l3</li><li >l4</li></ul>
</body>
相邻兄弟选择器:
格式:
选择器1 + 选择器2(兄弟元素){
x:y
}
注:选择器1和选择器2必须为相邻兄弟元素.
普通兄弟选择器:
格式:
选择器1 ~ 选择器2(兄弟元素){
x:y
}
注:普通兄弟选择器和相邻兄弟选择器区别在于 一个是必须挨着的兄弟元素,一个是只需是兄弟元素.
nth-child()的浅显使用:
选择列表中下标为偶数的标签:
:nth-child(2n)
选取列表中下标为x的标签:
:nth-child(x)
注:x为正整数.
选择列表中下标为奇数的标签:
:nth-child(2n-1)
选取列表中下标为x及x之后的所有的标签:
:nth-child(n+x)
选取列表中下标为x及x之前的所有的标签:
:nth-child(-n+x)
自定义选取标签.
:nth-child(3n+1) 表示三个数里边取一个,也就是“隔二取一”.
样例1:
<swiper class="swiper-container">
<swiper-item > <view class="item"> case1</view></swiper-item>
<swiper-item > <view class="item"> case2</view></swiper-item>
<swiper-item > <view class="item"> case3</view></swiper-item>
<swiper-item > <view class="item"> case4</view></swiper-item>
</swiper>-------------------------------------------------------------------------------------------
/* pages/list2/list2.wxss */
.swiper-containerr{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
/* background-color: aquamarine; */
}
swiper-item:nth-child(1) .item{background-color:lightblue
}
swiper-item:nth-child(2) .item{background-color:lightpink
}
swiper-item:nth-child(3) .item{background-color:lightskyblue
}
swiper-item:nth-child(4) .item{background-color:lightyellow
}
样例二:
<body><style>.ul1 li:nth-child(1){border: 1px solid ;border-color: aqua; color: red;}.ul1 li:nth-child(2){border: 1px solid ;border-color: blue; color: yellow;}.ul1 li:nth-child(3){border: 1px solid ;border-color: blue; color: yellow;}</style><ul class="ul1" ><li class="li1">l1</li><p >l2<li>p11</li><li>p11</li></p><li >l3</li><li >l4</li><p> p1</p></ul><ul class="ul2" ><li >l1</li><li >l2</li><li >l3</li><li >l4</li></ul>
</body>
CSS选择器学习小结 (css基本选择器 + 组合选择器 + :nth-child()高级选择器)相关推荐
- CSS系统学习之CSS简介
网页的构成 一个网页构成有三要素:结构.样式.行为,而结构用HTML控制,行为用JavaScript控制,样式用CSS控制. CSS简介 CSS,层叠样式表,网页实际上是一个多层结构,通过CSS可以分 ...
- CSS基础学习--6 CSS Text（文本）
一.文本颜色 color:red; 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...
- CSS选择器学习小结
前言: 半途出家做Front End,以前只是大概知道点,现在就必须从头把css好好看看啦,呜呜~~~~~~ 一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签 ...
- CSS 滤镜学习小结
适用浏览器: IE. 不符合CSS 标准 定于语法: filter:filtername{parameters}; 分类: 基本滤镜--可直接作用在对象上,并立即生效,主要有: 1).alpha--通 ...
- CSS基础学习-7.CSS元素分类
转载于:https://www.cnblogs.com/songsongblue/p/11046359.html
- CSS基础学习-5.CSS属性_字体文本文本装饰
转载于:https://www.cnblogs.com/songsongblue/p/11046039.html
- CSS基础学习-8.CSS盒子模型_标准盒子9.CSS怪异盒子
怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...
- CSS基础学习 19.CSS hack
转载于:https://www.cnblogs.com/songsongblue/p/11050351.html
- CSS基础学习-6.CSS属性_列表、表格
转载于:https://www.cnblogs.com/songsongblue/p/11046214.html
最新文章
- ［新手－数据分析师］numpy学习笔记（2nd）
- 微信支付：小微商户申请入驻第二步：图片上传
- oracle数据库enq: TX - allocate ITL entry性能诊断
- maven_使用Maven将文件上传和下载到S3
- batchsize设置为2的n次方_试卷中的页码设置
- 尝试修改源码需要用到git存一下
- 面试官：项目中常用的 .env 文件原理是什么？如何实现？
- module ‘urllib‘ has no attribute ‘unquote‘（url解码）
- 浅谈特征选择的原理和Python实现
- 信安精品课：2020年软考信息安全工程师备考公开课
- 数据库-表记录增删改
- python程序员在公司都是做什么的？
- worker进程和task进程区别_worker进程和task进程区别_Storm概念学习系列之Worker、Task、Executor三者之间的关系......
- 测试sql server服务是否配置正确
- android intent 视频,Android通过发送Intent播放本地视频和网络视频
- redhat7 虚拟机 取消屏幕保护或自动休眠时间
- WAP1.x协议栈浅析-WTP协议
- 网上购物系统问题陈述、词汇表与领域类图
- 是时候选择NewSQL数据库了
- C语言函数指针调用函数