基本的选择器

<style type="text/css">

/*通配符选择器*/

* { margin: ; padding: ; border: none; }

/*元素选择器*/

body { background: #eee; }

/*类选择器*/

.list { list-style: square; }

/*ID选择器*/

#list { width: 500px; margin:  auto; }

/*后代选择器*/

.list li { margin-top: 10px; background: #abcdef; }

/*选择器分组*/

#list,.second{background: pink;}

</style>

子元素选择器

#wrap > .inner

　　

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>子元素选择器</title>

<!--我们也可以称它为直接后代选择器-->

<style type="text/css">

#wrap > .inner {

    /*color: pink;*/

    border: 1px solid;

}

</style>

</head>

<body>

<div id="wrap">

    <div class="inner">

        wrap下一层

        <div class="inner">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最里层</div>

    </div>

    <div class="inner">wrap下一层</div>

    <div class="inner">wrap下一层</div>

    <div class="inner">wrap下一层</div>

</div>

</body>

相邻兄弟选择器 ：

这被称为一个相邻兄弟选择器. 它只会匹配紧跟着的兄弟元素

紧跟！！！！

#wrap > #first + .inner
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>相邻兄弟选择器</title>

<!--

    这被称为一个相邻兄弟选择器. 它只会匹配紧跟着的兄弟元素

    紧跟！！！！

-->

<style type="text/css">

#wrap > #first + .inner {

    color: #f00;

}

</style>

</head>

<body>

<div id="wrap">

    <div class="inner">inner</div>

    <div id="first">first</div>

    <div></div>

    <div class="inner">inner</div>

    <div class="inner">inner</div>

    <div class="inner">inner</div>

    <div class="inner">inner</div>

</div>

</body>

</html>

通用兄弟选择器：

在使用 ~ 连接两个元素时,它会匹配第二个元素,
条件是
它必须跟(不一定是紧跟)在第一个元素之后,
且他们都有一个共同的父元素

#wrap #first ~ div
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>通用兄弟选择器</title>

<!--

    在使用 ~ 连接两个元素时,它会匹配第二个元素,

        条件是

            它必须跟(不一定是紧跟)在第一个元素之后,

            且他们都有一个共同的父元素

-->

<style type="text/css">

#wrap #first ~ div {

    border: 1px solid;

    /*color: pink;*/

}

</style>

</head>

<body>

<div id="wrap">

    <div id="first">first</div>

    <p></p>

    <div class="inner">inner <div>inner2</div></div>

    <div class="inner">inner</div>

    <div class="inner">inner</div>

    <div class="inner">inner</div>

</div>

</body>

</html>

选择器分组：以，隔开

h1,h2,h3
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>选择器分组</title>

<style type="text/css">

h1,h2,h3{

    color: pink;

}

</style>

</head>

<body>

<div>

    <h1>我是h1</h1>

    <h2>我是h2</h2>

    <h3>我是h3</h3>

</div>

</body>

</html>

css3 ---1 基本的选择器的更多相关文章

  1. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  2. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  3. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  4. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  5. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  6. CSS3的[att$=val]选择器

    1.实例源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  8. CSS3 :nth-child()伪类选择器

    CSS3 :nth-child()伪类选择器 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好 的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年 ...

  9. css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...

  10. CSS3 结构性伪类选择器（2）

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

随机推荐

  1. Mybatis笔记 - Mapper动态代理

    使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法. Mapper接口开发方式是基于入门程序的基础上,对 控制程序 进行分层开发,程序员只需要 编写mappe ...

  2. Python 数据结构_堆栈

    目录 目录 堆栈 堆栈 堆栈是一个后进先出(LIFO)的数据结构. 堆栈这个数据结构可以用于处理大部分具有后进先出的特性的程序流 . 在堆栈中, push 和 pop 是常用术语: push: 意思是 ...

  3. Redis学习之缓存数据类型

    Redis缓存数据类型有5种,分别是String(字符串).List(列表).Hash(哈希).Set(无序,不重复集合).ZSet(sorted set:有序,不重复集合). String(字符串) ...

  4. sklearn中回归器性能评估方法

    explained_variance_score() mean_absolute_error() mean_squared_error() r2_score() 以上四个函数的相同点: 这些函数都有一 ...

  5. python+tushare获取A股所有股票代码和名称列表

    接口:stock_basic 描述:获取基础信息数据,包括股票代码.名称.上市日期.退市日期等 注:tushare模块下载和安装教程,请查阅我之前的文章 输入参数 名称      |      类型  ...

  6. scrapy的使用--Rcrapy-Redis

    Scrapy-Redis分布式爬虫组件 Scrapy是一个框架,他本身是不支持分布式的.如果我们想要做分布式的爬虫.就需要借助一个组件叫做Scrapy-Redis.这个组件正式利用了Redis可以分布 ...

  7. Spring-Boot中如何使用多线程处理任务

    看到这个标题,相信不少人会感到疑惑,回忆你们自己的场景会发现,在Spring的项目中很少有使用多线程处理任务的,没错,大多数时候我们都是使用Spring MVC开发的web项目,默认的Controll ...

  8. spring在普通类中获取session和request

    在使用spring时,经常需要在普通类中获取session,request等对像.比如一些AOP拦截器类,在有使用struts2时,因为struts2有一个接口使用org.apache.struts2 ...

  9. canvas填充规则，非零环绕

    1.看一块区域是否填充 2.从这个区域拉一条直线 3,看和这条直线相交的轨迹 4.如果顺时针轨迹+1 5.如果逆时针轨迹-1 6.所有轨迹的值计算出来 7.如果是非0,那么填充 8.如果是0那么不填充

  10. 十二. for of 示例 (可以解决大多数应用场景)

    for of entries() 可以同时拿到数组的索引跟值 因此可以使用解构的语法: for of 示例 1. 求和 2.字符串