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.结构性 ...
随机推荐
- 授权指定ip访问mysql 服务器
授权指定ip访问访问 授权ROOT使用密码1234从应用服务器主机连接到mysql服务器 mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'xxx. ...
- RuntimeError: Python is not installed as a framework. The Mac OS X backend will not be able to function correctly if Python is not installed as a framework. See the Python documentation for more infor
在virtualenv环境下使用matplotlib绘图时遇到了这样的问题: >>> import matplotlib.pyplot as pltTraceback (most r ...
- MySQL之从忘记密码到重置密码
在对MySQL的应用中,难免会有忘记登陆密码的情况:接下来,将简单介绍下MySQL忘记密码如何登陆和重置密码的操作过程. 首先来说下新版MySQL(5.7+)的重置密码过程: 由于忘记登陆密码,所以正 ...
- (转载)——Centos下安装Redis（原文地址：http://www.nnzhp.cn/archives/169）
原文地址:http://www.nnzhp.cn/archives/169 今天介绍一下redis,重点介绍一下redis的安装. Redis 是一个基于内存的高性能key-value数据库,数据都保 ...
- 【Uva 12128】Perfect Service
[Link]: [Description] 给你n个机器组成的一棵树,然后,让你在某些机器上安装服务器. 要求,每个机器如果没有安装服务器,都要恰好和一个安装了服务器的机器连接. 问你,最少要安装多少 ...
- 线段树分治初步学习&洛谷P5227[AHOI2013]连通图
线段树分治 其实思想说起来是比较简单的,我们把这个题里的所有操作(比如连边删边查询balabala)全部拍到一棵线段树上,然后对着整棵树dfs一下求解答案,顺便把操作做一下,回溯的时候撤销一下即可.虽 ...
- Chrome浏览器console控制台不打印任何js错误信息
手欠在Chrome控制台在错误信息,右键:Hide messages from vue 看不到 报错信息 这里删除成 默认的Filter 报错就出现了
- day 47 前端基础之BOM和DOM
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些 ...
- php面向对象的初认识
面向对象的基本概念 面向对象的三大特征:继承 封装 多态 类和对象: 类是一个抽象的概念 对象是一个具体的实例 张三是一个对象,李四也是一个对象.王五同样是一个对象..... 他们都隶属于“人”这个“ ...
- 03_Spring Bean的装配模式_基于Annotation配置方式
前言 在Spring中尽管使用XML配置文件可以实现Bean的装配工作,但如果应用中Bean的数量较多,会导致XML配置文件过于臃肿,从而给维护和升级带来一定的困难.从JDK 5开始提供了名为Anno ...