基本的选择器

<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. 2019/11/12 CSP模拟赛&&考前小总结

    写在前面的总结 离联赛只有几天了,也马上就要回归文化课了. 有点舍不得,感觉自己的水平刚刚有点起色,却又要被抓回文化课教室了,真想在机房再赖几天啊. 像19/11/11那场的简单题,自己还是能敲出一些 ...

  2. python从入门到大神---Python的jieba模块简介

    python从入门到大神---Python的jieba模块简介 一.总结 一句话总结: jieba包是分词技术,也就是将一句话分成多个词,有多种分词模型可选 1.分词模块包一般有哪些分词模式(比如py ...

  3. Matlab求三重积分

    Matlab求三重积分 求 \(\int_0^1 \int_0^1 \int_0^1 sin(\pi x_1 x_2 x_3) dx_1 dx_2 dx_3\) 代码是: triplequad(@(x ...

  4. LeetCode 24. Swap Nodes in Pairs (两两交换链表中的节点)

    题目标签:Linked List 题目给了我们一组 linked list,让我们把每对nodes 互换位置. 新键一个dummy node,然后遍历list,每次建立 s1 和 s2 记录两个点,然 ...

  5. jeecg下实现自动默认模糊查询

    也许jeecg的作者深受SAP毒害吧,没考虑到广大使用JEECG的人群为SAP用户,及所开发的项目均为中小项目,无惧大数据模糊查询带来的功能影响. 经网友“&&康&&& ...

  6. python 15 文件操作（一）

    转自 http://www.cnblogs.com/BeginMan/p/3166644.html 一.文件对象 我理解的文件对象就是一个接口,通过这个接口对文件进行相关操作. <Python ...

  7. 初探.Net Core API 网关Ocelot（一）

    一.介绍 Ocelot 是基于.NetCore实现的开源的API网关,支持IdentityServer认证.Ocelot具有路由.请求聚合.服务发现.认证.鉴权.限流熔断等功能,并内置了负载均衡器与S ...

  8. 在线文库解决方案Jacob+SwfTools+FlexPaper

    课程作业,准备做一个类似于豆丁之类的在线文库,解决方案也就是将文档(doc ppt xls)等转换成pdf,然后转成swf展示在页面中,今天下午经过研究,参考其他人的博客,实现了这个主要功能,这里也做 ...

  9. redhat7和redhat6混合搭建文档

    1.下载cm对应redhat7的版本.2.修改/opt/cloudera/cm-5.10.0/etc/cloudera-scm-agent/config.ini成为中心机器hostname/ip(ma ...

  10. Linux 服务器 个人常用操作命令记录

    1.实时查看log:tail -f 日志文件名 2.查看Apache运行的用户组或用户名:ps aux | grep httpd 或者是: ps -ef | grep httpd 3.查看cronta ...