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. heroku部署java web项目

    一.开发 在本地eclipse创建maven web项目(此时可以当成正常的javaweb项目开发即可.注意添加servlet依赖,此时不用添加jetty依赖) 二.部署前准备 1.首先在pom.xm ...

  2. 转载--How to Install VMware Tools on CentOS 6.3

    源地址:http://www.ehowstuff.com/how-to-install-vmware-tools-on-centos-6-3/ VMware Tools is a group of u ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. 在Mysql中Using filesort代表什么意思？

    在Mysql中使用explain来查看sql执行信息时,经常会看到Using filesort.那么Using filesort在MySQL中代表什么意思呢? 有人会说是外部排序,其实是不对或者不准确 ...

  5. .NET Core爬坑记 1.0 项目文件

    前言: 之所以要写这个系列是因为在移植项目到ASP.NET Core平台的过程中,遇到了一些“新变化”,这些变化有编译方面的.有API方面的,今天要讲的是编译方面的一些问题.我把它们整理后分享出来,以 ...

  6. OpenJudge 2990:符号三角形 解析报告

    2990:符号三角形 总时间限制:  1000ms       内存限制:  65536kB 描述 符号三角形的第1行有n个由“+”和”-“组成的符号 ,以后每行符号比上行少1个,2个同号下面是”+“ ...

  7. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  8. JavaScript基础—闭包，事件

    Js基础-闭包,事件 1:js中的闭包 概念:在一个函数内部又定义了一个函数,内部函数能访问到外部函数作用域范围内的变量,这时这个内部函数就叫做闭包,无论这个内部函数在哪里被调用都能访问到外部函数作用 ...

  9. MEF入门之不求甚解，但力求简单能讲明白(五)

    我们已经成功的达到了目标,大量减少了if else. 不过在园子里面的文章大多,用的是Import.ImportMany.So,修改主函数. using IPart; using System; us ...

  10. C#操作XML文件

    1.创建.读取XML文件 using System; using System.Collections.Generic; using System.Linq; using System.Text; u ...