基本的选择器

<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. 活动：月末送Java技术书福利｜抽奖

    本公众号运营了快一年了 原创干货超过200+ 收获了也快1W粉丝 这么多粉丝-- 送书活动怎能少? 虽然这次我们是有备而来 但是-- 所有书籍为作者自掏腰包 所以本次送书数量有限 不能满足到所有人 重 ...

  2. Hadoop安装成功之后，访问不了web界面的50070端口怎么解决？

    Hadoop安装成功之后,访问不了web界面的50070端口 先查看端口是否启用 [hadoop@s128 sbin]$ netstat -ano |grep 50070 然后查看防火墙的状态,是否关 ...

  3. java-day17

    软件结构:C/S客户端和服务器结构,B/S浏览器和服务器结构 网络通信协议 TCP:传输控制协议,面向连接的通信协议,即传输数据之前,发送端和接收端建立逻辑连接,然后再传输数据. 三次握手 UDP:用 ...

  4. 大道浮屠诀---cwRsync同步工具的使用

    目的: 在日常生活中,我们有时候会遇到这样类似的问题 ---需要把一台服务器上的某个重要的文件进行备份(拷贝另外的服务器上) ---需要同步系统上的配置文件到其他系统 利用此cwRsync软件可以解决 ...

  5. springcloud（十六）：服务网关 zuul 快速入门

    服务网关是微服务架构中一个不可或缺的部分.通过服务网关统一向外系统提供REST API的过程中,除了具备服务路由.均衡负载功能之外,它还具备了权限控制等功能.Spring Cloud Netflix中 ...

  6. 21-4indexOf

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Activiti学习笔记目录

    1.Activiti学习笔记1 — 下载与开发环境的配置: 2.Activiti学习笔记2 — HelloWorld: 3.Activiti学习笔记3 — 流程定义: 4.Activiti学习笔记4 ...

  8. matlab 求已知概率密度函数的随机数生成

    N=10000; %需要随机数的个数 a=zeros(N,1); %存放随机数的数列 n=0; f1=@(t) 1./(1.2*pi*(1+5*(t-7.3).^2)); f2=@(t) 1./(1. ...

  9. 8-5接口测试用例设计与编写2 rest-assured

    rest-assured 简约的接口测试DSL 支持xml json的结构化解析 支持xpath jsonpath gpath等多种解析方式 对Spring的支持比较前面 底层是httpclient ...

  10. Windows where

    WHERE [/R dir] [/Q] [/F] [/T] pattern... 描述:    显示符合搜索模式的文件位置.在默认情况下,搜索是在当前目录和 PATH    环境变量指定的路径中执行的 ...