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. BOM之navigator、history、screen对象

    navigator对象 [定义] navigator已经成为识别客户端浏览器的事实标准.下表中列出存在于所有浏览器的属性和方法 [检测插件] 检测浏览器插件是一种最常见的检测例程. [1]对于非IE浏 ...

  2. backbone库学习-View

    Backbone中的视图提供了一组处理DOM事件.和渲染模型(或集合)数据方法(在使用视图之前,你必须先导入jQuery或Zepto) 视图类提供的方法非常简单,我们一般在backbone.View的 ...

  3. MySQL的学习--join和union的用法

    感觉工作之后一直在用框架,数据库的一些基本的东西都忘记了,这次借着这个系列的博客回顾一下旧知识,学一点新知识. 今天就先从join和union开始. join 是两张表做交连后里面条件相同的部分记录产 ...

  4. python一

    一安装工具 pip easy_install import os print (os.getcwd()) 1. 自带package和外部package      1.1 自带package举例: os ...

  5. 第20/24周 死锁（Deadlocking）

    大家好,欢迎回到性能调优培训.今天讨论SQL Server里的死锁(Deadlocking),第5个月的培训就结束了.当2个查询彼此等待,没有查询可以继续它的工作就会发生死锁.第一步我会概括介绍下SQ ...

  6. Shiro —— 从一个简单的例子开始

    一.Shiro是用来做权限的. 二.权限 1.基本概念: (1)安全实体:要保护的数据. (2)权限:是否有能力去操作(查看.修改.删除 )保护的数据. 2.权限的两个特性 (1)权限的继承性:A 包 ...

  7. C#--静态成员的生命周期

  8. ASP.NET MVC PartialView用法

    子页面AreaSelect.cshtml页面的Controller代码: public ActionResult AreaSelect() { return PartialView(); } 父页面前 ...

  9. C#微信公众平台开发—高级群发接口

    涉及access_token的获取请参考<C#微信公众平台开发—access_token的获取存储与更新> 一.为了实现高级群发功能,需要解决的问题 1.通过微信接口上传图文消息素材时,J ...

  10. Web API Filter ActionFilterAttribute 使用

    WebApi 提供两种过滤器的类型: 1.ActionFilterAttribute 2.exceptionFilterAttribute 两个类都是抽象类,ActionFilter 主要实现执行请求 ...