基本的选择器

<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. Dll注入技术之ComRes注入

    DLL注入技术之ComRes注入 ComRes注入的原理是利用Windows 系统中C:\WINDOWS\system32目录下的ComRes.dll这个文件,当待注入EXE如果使用CoCreateI ...

  2. Python正则表达式如何进行字符串替换实例

    Python正则表达式如何进行字符串替换实例 Python正则表达式在使用中会经常应用到字符串替换的代码.有很多人都不知道如何解决这个问题,下面的代码就告诉你其实这个问题无比的简单,希望你有所收获. ...

  3. Caused by: java.sql.SQLSyntaxErrorException: ORA-00932: 数据类型不一致: 应为 NUMBER, 但却获得 BINARY

    at org.springframework.aop.framework.ReflectiveMethodInvocation.invokeJoinpoint(ReflectiveMethodInvo ...

  4. 15-Ubuntu-文件和目录命令-查看目录内容-ls-2

    4. ls和通配符的使用 通配符适用的地方:shell命令行或者shell脚本中. 正则表达式适用的地方:字符串处理时,一般有一般正则和Perl正则. 正则表达式与通配符有相同的符号但是意义不同!! ...

  5. flask-Local源码流程解析

    flask中Local源码数据类型首先明确:源码中要构造的数据类型数是这样的: __storage__ = { 用线程或者协程的唯一标识为键: {stack:[ctx(session/request) ...

  6. JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。

    编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...

  7. 随笔记录 MBR扇区故障系统备份与还原 2019.8.7

    系统备份: [root@localhost ~]# mkdir /abc [root@localhost ~]# mount /dev/sdb1 /abc [root@localhost ~]# dd ...

  8. ASP.NET 页面的生命周期

    本文转载自清风飘过的博客,地址:http://www.cnblogs.com/couhujia/archive/2010/04/23/1718405.html 页面生命期分三个阶段:建立阶段,回发阶段 ...

  9. iloc,loc,ix,df[]

    总结一. iloc可以把i当做第几个,所以是按行序号;其他的就清楚了. import pandas df = pandas.DataFrame({'a': [1, 2, 3, 4],'b': [5, ...

  10. react添加多个域名proxy代理，跨域

    在package.json中加入如下: { "name": "demo", "version": "0.1.0", &q ...