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高级选择符

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

  2. Javascript高级编程学习笔记（46）—— 选择符API

    选择符API 在DOM1中DOM只提供了 getElementById.getElementsByTagName 两种获取文档元素的方法 很多时候这两种方法往往不能较为方便地获取我们所需要的元素 所以 ...

  3. CSS_选择符

    2016-10-28 <CSS入门经典>第五章 以下提示注意事项: 1.如何选择使用id选择符还是class选择符:当确信id选择符在页面的唯一性时,就可以使用id选择符. 2.通用选择符 ...

  4. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  5. [css选择器]总结：IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  6. CSS基础篇之选择符2

    属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...

  7. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

  8. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  9. html基本选择符的使用

    一.选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用! 二.研究 普通选择符: 1.类型选择符:它可以选择同一个类型的元素! 例如:h1,h2 {              color: ...

随机推荐

  1. springboot1.5.4 集成cxf完整实例

    WebService 服务端 添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project xml ...

  2. update + join 多表操作

    UPDATE vtiger_notificationcf as a INNER JOIN vtiger_crmentity as b ON a.notificationid = b.crmid SET ...

  3. ynoi2018

    题解: 全分块是啥操作啊.. 而且都好难.. 1.未来日记 这个比较简单 对每个块开个线段树维护权值 $n\sqrt{n}logn$ 这个会炸空间 并不能做... 但还是说一下做法 首先考虑分块 然后 ...

  4. hdu2036

    题解: 求多边形面积 分成很多块三角形求就可以了 凹的也是支持的 代码: #include <bits/stdc++.h> using namespace std; #define rin ...

  5. vee-validate校验demo

    //太长了,把异步校验放到前面吧: VeeValidate.Validator.extend('checkLoginName',{ getMessage:function () { return &q ...

  6. mybatis sql注入

    这是${}与#{}的区别,#{}采用了预编译,在SQL执行前,会先将上面的SQL发送给数据库进行编译:执行时,直接使用编译好的SQL,替换占位符“?”就可以了.因为SQL注入只能对编译过程起作用,所以 ...

  7. ClassLoader家族

    DexClassLoader可以加载外部的dex,而PathClassLoader只能加载内部的dex 双亲委托 ClassLoader(ClassLoader parentLoader,boolea ...

  8. 在Visual Sutdio 2017中使用boost库

    在Visual Sutdio 2017中使用boost库     转载 https://blog.csdn.net/u011054333/article/details/78648294 对C++有一 ...

  9. CodeForces 371C Hamburgers（经典）【二分答案】

    <题目链接> 题目大意: 给以一段字符串,其中只包含"BSC"这三个字符,现在有一定量免费的'B','S','C‘,然后如果想再买这三个字符,就要付出相应的价格.现在总 ...

  10. linux(manjaro)磁盘迁移/opt /home

    目录 1. 创建临时挂载点/opt, 并将分区挂载到临时挂载点上: 2. 切换单用户,将除了root用户之外的用户踢出 3.  将/opt目录下的所有内容拷贝到临时挂载点中,等待结束 4. 进入/et ...