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.结构性 ...
随机推荐
- JAVA数据结构之数组
接下来的几篇博文会在最近仔细研读数据结构与算法的书籍后会摘录一些要点和总结一些自己的心得体会,帮助大家更深入地理解java中的数据结构和一些基本的算法,同时巩固自己数据结构和算法这些最基础的计算机知识 ...
- Django流程
开始具体的代码之旅前,先来宏观地看下Django是如何处理Http Resquest的,如下图: 假设你已经在浏览器输入了 http://127.0.0.1:8000/polls/,接下来浏览器会把请 ...
- 廖雪峰Java13网络编程-2Email编程-2接收Email
1接收Email协议类型 接收Email:收件人通过MUA软件把邮件从MDA抓取到本地计算机的过程. 1.1 POP3 从MUA到MDA使用最广泛的是协议是POP3 Post Office Proto ...
- thinkPHP 字段映射功能
thinkPHP的字段映射功能可以让你在表单中隐藏真正的数据表字段,而不用担心放弃自动创建表单对象的功能,假设我们的User表里面有username和email字段,我们需要映射成另外的字段,定义方式 ...
- 跳表上线性dp——1150D 好题！
题目设计的很好,感觉做了这题对dp的状态有了更深的理解 /* 先预处理序列自动机 dp[i][j][k]表示匹配到i,j,k时的最靠前的位置 那么现在A串加入了一个字母,我们要求的就是dp[i+1][ ...
- Clion IDE的安装
/下载压缩包 wget https://download.jetbrains.8686c.com/cpp/CLion-2016.2.2.tar.gz //解压 tar -zxvf CLion-2016 ...
- LUOGU P3382 【模板】三分法 (三分)
传送门 解题思路 三分,填坑.每次取l与r的中间值mid,然后向左移一点点,向右移一点点进行判断,判断时用秦九韶算法即可. #include<iostream> #include<c ...
- 移动端自定义键盘的vue组件 ----keyboard
<style scoped lang="less"> .keyboard { /* height: 250px; */ width: 100%; position: f ...
- [POI2014]KAR-Cards
题目链接: 传送门 题目分析: 线段树妙题,感觉思路奇奇怪怪的,虽然对我来说不是"线段树菜题"(\(ldx\)神仙\(blog\)原话)\(QAQ\) 考虑怎么样维护可合并的信息解 ...
- jmeter参数化之用户参数
1. 用badboby进行录制,录制完成后保存,用JMeter格式进行保存,如:登陆.jmx 2. 在jmeter中打开保存的文件登陆.jmx. 3.在step1上右击-添加-前置处理 ...