基本的选择器

<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. 牛客多校第七场 C Governing sand 线段树

    题意: 有一个树林,树林中不同种类的树有不同的数量,高度,砍伐它们的价格.现在要求砍掉一些树,使得高度最高的树占剩下的树的总数的一半以上,求最小花费. 题解: 用线段树维护不同种类树的信息,叶子节点从 ...

  2. hdu多校第五场1002 （hdu6625） three arrays 字典树/dfs

    题意: 给你两个序列a,b,序列c的某位是由序列a,b的此位异或得来,让你重排序列ab,找出字典序最小的序列c. 题解: 如果能找到a,b序列中完全一样的值当然最好,要是找不到,那也尽量让低位不一样. ...

  3. 如何在Spring Boot 中动态设定与执行定时任务

    本篇文章的目的是记录并实现在Spring Boot中,动态设定与执行定时任务. 我的开发项目是 Maven 项目,所以首先需要在 pom.xml 文件中加入相关的依赖.依赖代码如下所示: <de ...

  4. sklearn 调用逻辑回归函数训练数据时出现 “unknown label type：unknown”

    problemsolution:

  5. jquery的attr获取表单checked 布尔值问题

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

  6. 20-Ubuntu-文件和目录命令-查看目录树型结构-tree

    tree 以树状图列出当前目录下的文件目录结构 选项 含义 -d 只显示当前目录的子目录树型结构   显示当前目录的子目录和文件树型结构 例: 1.查看文档目录下的子目录和文件树型结构 2.查看文档目 ...

  7. C# 调用java的Webservice时关于非string类型处理

    比如webservice地址是:http://wdft.com:80/services/getOrderService1.0?wsdl 方法是:getOrder 1.首先添加引用: 2. 3.引用完成 ...

  8. 字典配合split分裂填充

    Sub 配送日报()lastrow = Sheets("运营日报").Range("a1048576").End(xlUp).Rowarr = Sheets(& ...

  9. 家庭-养老院模型理解IOC和DI

    控制反转 IOC 1. 概念 应用内部不负责依赖对象的创建和维护, 由第三方负责, 这样控制权就由应用内部转移到外部容器, 控制权的转移就是所谓的反转. 2. 比喻 有一户家庭(应用)有个老人(依赖对 ...

  10. 如何理解 if __name__ == "__main__"

    小明.py 朋友眼中你是小明(__name__ == '小明'), 你自己眼中你是你自己(__name__ == '__main__'), 你编程很好, 朋友调你去帮他写程序(import 小明, 这 ...