2016-11-07

《css入门经典》第八章

1.属性选择器

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

注意：IE（一直到5.5版）不支持属性选择器。

2.近亲选择器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>笔记</title>

     <style>

        li+li{

            color: red;

        }

     </style>

 </head>

 <body>

     <ul>

14         <li id="html">HTML</li>

         <li id="java">JAVA</li>

         <li id="css">CSS</li>

     </ul>

 </body>

 </html>

同胞元素：具有相同的父代。

近亲元素：如果源代码中第二个直接出现在第一个之后，那么它们就是近亲。

如上，具有id  html和java的<li>是近亲元素，java和css的<li>是近亲元素，但是html和css的<li>不是近亲元素。

注意：近亲选择符对基于两个近亲的情况做出选择，但是它将声明的样式只应用于两个中的第二个。

因此，以上程序只有JAVA和CSS的字体变为红色，而HTML为默认颜色。

3.关于<dl>标签，近亲选择符用于添加或者删除边框，填充和边框。

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>笔记</title>

     <style>

     body{color:#969;}

     h1{font-size: 15px;}

     dd+dt{

         margin-top: 10px;

     }

     dd+dd{

         font-style: italic;

         font-size: 10px;

     }

     </style>

 </head>

 <body>

 <h1>前端开发</h1>

 <dl>

     <dt>HTML</dt>

     <dd>hypertext markup language</dd>

     <dd>see also:XHTML</dd>

     <dt>CSS</dt>

     <dd>cascading style sheets</dd>

     <dd>css</dd>

     <dt>WWW</dt>

     <dd>world wide web</dd>

 </dl>

 </body>

 </html>

CSS高级选择符的更多相关文章

  1. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  2. css关系选择符

    <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. CSS：CSS 组合选择符

    ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...

  4. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

  5. CSS 的选择符

    CSS是什么? 如果说元素是标记代码的构建块料,那么CSS就是约束这些构建块料样式的规则. CSS规则的组成 CSS的规则由 选择符 和属性,值组成. Css选择符:选择符是规则中用于确定样式所涵盖的 ...

  6. CSS_高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  7. CSS之选择符、链接、盒子模型、显示隐藏元素

    <html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...

  8. 1+x证书学习日志——css 基本选择符

    ##css选择符                 1:类型选择符 直接用标签名称当作选择符                     特点:选中所有同类元素                 2:id名称 ...

  9. CSS组合选择符

    组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...

随机推荐

  1. 深入理解PHP内核(五)函数的内部结构

    php的函数包括用户定义的函数.内部函数(print_r count...).匿名函数.变量函数($func = 'print_r'; $func(array('a','b'));) PHP内核源码中 ...

  2. WCF传输1-你是否使用过压缩或Json序列化？

    1.当遇到需要传输大量数据时,怎么样传输数据? 2.压缩数据有哪几种常见的方式? 问题1解答:通过压缩来传输数据 问题2解答: (1)WCF自带的压缩方式 (2)自定义WCF binding进行压缩 ...

  3. Docker之Linux Namespace

    Linux Namespace 介绍 我们经常听到说Docker 是一个使用了Linux Namespace 和 Cgroups 的虚拟化工具,但是什么是Linux Namespace 它在Docke ...

  4. java向mysql数据库插入数据显示乱码的问题

    在做一个java web工程时,有时会碰到在向数据库添加数据库时,结果出现乱码”???“的问题.针对该问题的主要解决办法就是: 一.确保是否添加了字符集过滤器: 在java web工程中的web.xm ...

  5. nodejs图片转换字节保存

    fs.readFile('上传图片路径', function(err, data) { if (err) { // 错误处理 return; } var base64str = new Buffer( ...

  6. Quartz应用实践入门案例一（基于Web环境）

    Quartz是一个完全由java编写的开源作业调度框架,正是因为这个框架整合了许多额外的功能,所以在使用上就显得相当容易.只是需要简单的配置一下就能轻松的使用任务调度了.在Quartz中,真正执行的j ...

  7. .net using使用小结

    在.net中using使用方法有3种,分别是using指令.using定义使用范围.using别名. using指令,即引用命名空间. using System; using System.Colle ...

  8. RabbitMQ框架学写笔记-20161130

  9. 半连通分量--Tarjan/Kosaraju算法

    一个有向图称为半连通(Semi-Connected),满足:对于图中任两点u,v,存在一条u到v的有向路径或者从v到u的有向路径. 若满足,则称G’是G的一个导出子图. 若G’是G的导出子图,且G’半 ...

  10. 自己动手，让Entity Framework Power Tools在VS2015重放光彩

    Entity Framework Power Tools是一个由EntityFramework开发小组提供的工具,它可以从现有数据库生成Fluent款式的Code First代码. VS Galler ...