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>

时间: 2024-10-11 05:03:11

CSS高级选择符的相关文章

CSS 组合选择符

CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 div p{background-color:yellow;} 尝试一下 » 子元素选择器 与后代选择器

CSS 组合选择符:后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器

CSS 组合选择符 CSS 组合选择符 在 CSS3 中包含了四种组合方式:CSS组合选择符包括各种简单选择符的组合方式. 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选择器 后代选择器用于选取某元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 divp{background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Child sel

一天一点css 2 选择符语法

css用于控制元素样式,css语法为 选择符{属性:值}方式进行设置 1 类型选择符 就是将标签作为选择符,如body div h1 span等 2 群组选择符 如 h1,h2h3{padding:5px;}中间使用,分隔符,由多个选择符组成,表示这一组选择符均采用一致样式 3 包含选择符 包含主要用于父级内部字集节点的设置,就像xpath路径一样,语法为选择符之间使用 空格作为分隔符 如 h1 span{font-weight:bold} 意思是h1内部所有span节点使用字体加粗样式 4 i

CSS之选择符、链接、盒子模型、显示隐藏元素

<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素</title> <style> a:link{ color:red; } a:visited{ color:black; } a:hover{ color:blue; } a:active{ color:green; } </style> </head> <bo

CSS 的选择符

CSS是什么? 如果说元素是标记代码的构建块料,那么CSS就是约束这些构建块料样式的规则. CSS规则的组成 CSS的规则由 选择符 和属性,值组成. Css选择符:选择符是规则中用于确定样式所涵盖的可应用到的目标元素的部分. 样式声明又包含两个部分:属性和值. 属性是元素中需要被修改的某个属性,如,颜色,宽度等等. 选择符的种类: 1.全体选择符,全体选择符是一个星号(*),意思是选择文档中的每一个元素,例如: * {color: blue;}意思是把所有元素都应用为蓝色. 2.元素选择符:选

CSS属性选择符

属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red;} </style> <body> <a href="" class="a">链接a</a> <a href="" id="b">链接b</a> </

css中选择符

1.通配选择符*{} 2.类选择符.className{} 3.包含选择符 (派生选择符或后代选择器)  p strong{} 4.子选择符    body>strong{}其中strong是body下的子元素   IE7以下不支持 5.相邻选择符   p+strong {}  其主要作用是匹配同一个父级下某个元素之后的元素,选择的是p后面的strong标签.相邻选择符只会是紧紧相邻的两个元素   IE7以下不支持 6.属性选择符   IE7以下不支持 7.id选择符

CSS的选择符

1.通配选择符(Universal Selector) 通配选择符(以*表示)起通配符的作用,意思是将选择其辖域内的所有元素. 改变整个文档的字体大小和颜色: * {font-size:12px;color:blue;} 改变table下所有元素的颜色及对齐方式: table * {color:red;text-align:center} 2.类型选择符(Type Selectors) 以文档语言对象(Element)类型作为选择符. 设置td背景色与字体颜色: td {background:s

关于区分对比CSS 组合选择符

  组合方式 区分 源代码 效果 后代选取器   以空格分隔 后代选取器匹配所有值得元素的后代元素. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后代选取器</title> <style> div p { background-color:yellow; } </style> </head> <bo