码迷,mamicode.com
首页 > Web开发 > 详细

CSS高级选择符

时间:2016-11-08 01:14:40      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:定义   end   web   sch   技术分享   代码   text   img   begin   

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>

技术分享

 

CSS高级选择符

标签:定义   end   web   sch   技术分享   代码   text   img   begin   

原文地址:http://www.cnblogs.com/LinSL/p/6041140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!