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.结构性 ...
随机推荐
- 简单搭建 @vue-cli3.0 及常用sass使用
1,在安装了Node.js后使用其中自带的包管理工具npm.或者使用淘宝镜像cnpm(这里不做说明) 1-1,下载vue3.0脚手架(如果之前装vue-cli3x之前的版本,先卸载 npm unins ...
- Django之深入了解路由层
目录 ORM表关系建立 一对一 一对多 多对多 Django 请求生命周期 url 路由层 路由匹配 无名分组 有名分组 反向解析 路由匹配条件无分组的情况的反向解析 无名分组情况的反向解析 有名分组 ...
- docker 安装 ElasticSearch
docker pull docker.elastic.co/elasticsearch/elasticsearch:5.6.9 docker images docker run -e ES_JAVA_ ...
- Python学习day06-Python基础（4）流程控制之while和for循环
Python学习day06-流程控制之while和for循环 Python学习day06-流程控制之while和for循环while循环1. 语法2. while+break,while+contin ...
- @Value取值为NULL的解决方案
在spring mvc架构中,如果希望在程序中直接使用properties中定义的配置值,通常使用一下方式来获取: @Value("${tag}") private String ...
- VS2005下安装boost
本文参照http://dxwang.blog.51cto.com/384651/711798 (一)boost的安装和编译 1:下载boost版本,目前最新的版本为1-47-0 下载地址为htt ...
- 2018-11-26-win10-uwp-获取窗口的坐标和宽度高度
title author date CreateTime categories win10 uwp 获取窗口的坐标和宽度高度 lindexi 2018-11-26 15:4:0 +0800 2018- ...
- HBase与传统关系数据库的对比分析
- Mybatis编写配置文件时，需要注意配置节点的顺序
mybatis-config.xml配置文件配置时,要注意节点顺序 <properties>...</properties> <settings>...</s ...
- 跟我一起实战美团网一之[nodemon] app crashed - waiting for file changes before starting...
环境准备 第一步安装 npm install -g npx npx create-nuxt-app at-app 与事件相关的包我们再安装一次 npm install --update-binary ...