你的位置:首页 > 网页设计

[网页设计]CSS高级选择符


2016-11-07

《css入门经典》第八章

1.属性选择器

 

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

注意:IE(一直到5.5版)不支持属性选择器。

 

2.近亲选择器

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>笔记</title> 6   <style> 7     li+li{ 8       color: red; 9    }10   </style>11 </head>12 <body>13   <ul>14      <li id="html">HTML</li>15     <li id="java">JAVA</li>16     <li id="css">CSS</li>17   </ul>18 </body>19 </html>

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

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

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

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

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

 

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

<dl> 标签定义了定义列表(definition list)。

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

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>笔记</title> 6   <style> 7   body{color:#969;} 8   h1{font-size: 15px;} 9   dd+dt{10     margin-top: 10px;11   }12   dd+dd{13     font-style: italic;14     font-size: 10px;15   }16   </style>17 </head>18 <body>19 <h1>前端开发</h1>20 <dl>21   <dt>HTML</dt>22   <dd>hypertext markup language</dd>23   <dd>see also:XHTML</dd>24 25   <dt>CSS</dt>26   <dd>cascading style sheets</dd>27   <dd>css</dd>28 29   <dt>WWW</dt>30   <dd>world wide web</dd>31 </dl>32 </body>33 </html>