H5C3--属性选择器、兄弟选择器、伪类选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
.blue{
color: blue;
} /*属性选择器的使用*/
/*需求：获取所有拥有class属性的元素，将字体大小修改*/
/*E[attr]:获取拥有指定attr属性的E元素,当前的属性名称是严格匹配*/
/*li[class]{
font-size: 30px;
}*/
/*查找拥有指定属性和属性值的指定名称的元素*/
/*E[attr=value]:li[class=red]:说明我想查找拥有class属性并且属性值为Red的li元素*/
/*li[class=red]{
font-size: 30px;
}*/
/*查找拥有指定属性，并且属性值以指定字符开头的指定名称的元素*/
/*li[class^=red]:查找拥有class属性，并且属性值以red开头的li元素*/
/*li[class^=red]{
font-size: 30px;
}*/
li[class$=blue]{
font-size: 30px;
}
</style>
</head>
<body>
<ol>
<li class="red">河南再次发生矿难，死伤人数超过100</li>
<li class="redcolor">禽流感次发生蔓延，温家宝指示</li>
<li class="green">南方农作物减产绝收面积上亩</li>
<li class="darkblue">猪流感在广减产绝收发</li>
<li class="blue">全国多作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</body>
</html>
兄弟选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
/*下面这句样式的意思是：查找拥有.red样式的元素的兄弟p元素,只能查找下一个.查找只能往下查找*/
/*.red + p{
color: blue;
}*/
/*下面这句样式的意思是：查找拥有.red样式的元素的兄弟p元素，能查找到所有的兄弟元素.查找只能往下查找*/
.red ~ p{
color: blue;
}
</style>
</head>
<body>
<p>p1p1p1p1pp1</p>
<p class="red">p1p1p1p1pp1</p>
<span>能不能变色</span>
<p>p1p1p1p1pp1</p>
<p>p1p1p1p1pp1</p>
</body>
</html>
伪类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器 - 相对父元素的伪类</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 700px;
height: 500px;
margin:0 auto;
margin-top:100px;
list-style: none;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
}
ul > li{
float: left;
width:100px;
box-sizing: border-box;
height: 100px;
line-height:100px;
text-align: center;
background-color: #fff;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
/*获取第一个li元素，设置背景*/
/*first-child:查找第一个子元素。相对于它的父容器*/
/*li:first-child{
background-color: red;
}*/
/*查找第一个指定类型的子元素，相对于父容器*/
/*li:first-of-type{
background-color: red;
}*/
/*li:last-of-type{
background-color: yellow;
}*/ /*查找第5个Li元素*/
/*li:nth-child(5){
background-color: green;
}*/
/*li:nth-of-type(5){
background-color: green;
}*/ /* li:nth-of-type(odd){
background-color: red;
}
li:nth-of-type(even){
background-color: yellow;
}*/ /*n取值是从0到子元素的长度。如果<=0，则失效*/
/*li:nth-of-type(2n-1){
background-color: red;
}*/ /*获取前5个li元素*/
/*5-0 5-1 5-2 5-3 5-4 5-5
5 4 3 2 1*/
li:nth-of-type(-n + 5){
background-color: red;
}
li:nth-last-of-type(-n + 5){
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</body>
</html>
H5C3--属性选择器、兄弟选择器、伪类选择器的更多相关文章
- js进阶 10-10 可见伪类选择器和内容伪类选择器的作用
js进阶 10-10 可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是 四个 包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- Html学习之十（CSS选择器的使用--伪类选择器）
伪类选择器 一.基于a标签. 1.:hover 选择鼠标滑过的超链接元素 2.:active 选择鼠标单击中的超链接元素 3.:link 选择未被访问的超链接元素 4.:visited 选择已经被访问 ...
- 用HTML写伪类选择器，结构伪类选择器，伪元素选择器样式
html,css lorem乱序铭文 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihil? Lorem ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- H5与CS3权威下.19 选择器（2）结构性伪类选择器
1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...
- CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...
随机推荐
- 阿里云香港ECS搭建Shadowscoks
注(转https://yijingping.github.io/2016/11/29/fanqiang.html) 1 为什么FQ 作为一个技术人员, 最常用的就是Google.StackOverfl ...
- JavaScript特效源码(4、鼠标特效)
1.鼠标感应--渐现特效 鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...
- dataset datatable 转json
class ToJosn { #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summar ...
- Imageview 图片按比例缩放
只需要在 布局文件中 加入 android:adjustViewBounds="true"这行代码即可 它会让图片进行等比例的拉伸展示
- 解决Mybatis的invalid bound statement (not found)异常
使用Maven构建SSM时, 需要在pom.xml中配置一些信息, 否则mapper.xml就无法被扫描到, 程序就会抛invalid bound statement (not found)异常 解决 ...
- Spring Cache 简介
org.springframework.cache; org.springframework.cache.Cache org.springframework.cache.CacheManager 依赖 ...
- Codeforces Round #258 (Div. 2)E - Devu and Flowers
题意:n<20个箱子,每个里面有fi朵颜色相同的花,不同箱子里的花颜色不同,要求取出s朵花,问方案数 题解:假设不考虑箱子的数量限制,隔板法可得方案数是c(s+n-1,n-1),当某个箱子里的数 ...
- kafka数据分区的四种策略
kafka的数据的分区 探究的是kafka的数据生产出来之后究竟落到了哪一个分区里面去了 第一种分区策略:给定了分区号,直接将数据发送到指定的分区里面去 第二种分区策略:没有给定分区号,给定数据的ke ...
- Spring MVC(八)--控制器接受简单列表参数
有些场景下需要向后台传递一个数组,比如批量删除传多个ID的情况,可以使用数组传递,数组中的ID元素为简单类型,即基本类型. 现在我的测试场景是:要从数据库中查询minId<id<maxId ...
- Netty设置高低水位
Configure high and low write watermarks Server ServerBootstrap bootstrap = new ServerBootstrap(); ...