CSS高级选择符

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为默认颜色。

CSS高级选择符

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

CSS高级选择符的更多相关文章

CSS 组合选择符
CSS 组合选择符组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...
css关系选择符
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
CSS：CSS 组合选择符
ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...
CSS属性选择符
属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...
CSS 的选择符
CSS是什么? 如果说元素是标记代码的构建块料,那么CSS就是约束这些构建块料样式的规则. CSS规则的组成 CSS的规则由选择符和属性,值组成. Css选择符:选择符是规则中用于确定样式所涵盖的 ...
CSS&lowbar;高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器选择器描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
CSS之选择符、链接、盒子模型、显示隐藏元素
<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...
1+x证书学习日志——css 基本选择符
##css选择符 1:类型选择符直接用标签名称当作选择符特点:选中所有同类元素 2:id名称 ...
CSS组合选择符
组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器后代选取器匹配所有值得 ...

随机推荐

【BZOJ3943】[Usaco2015 Feb]SuperBull 最小生成树
[BZOJ3943][Usaco2015 Feb]SuperBull Description Bessie and her friends are playing hoofball in the an ...
学习WebSocket(二)&colon;使用Spring WebSocket做一个简单聊天室
聊天室高频率.低延时完全符合websocket的特点,所以聊天室使用websocket再适合不过了. 聊天室的功能并没有比上一节代码多多少,主要在握手阶段对用户的session做处理,对用户的消息进行 ...
access 2007 vba 开发中学到的知识（三）
打开文件或程序 'API函数声明Public Declare Function ShellExecute Lib "shell32.dll" Alias "ShellEx ...
Ali也开始玩了阿
http://blog.alipay.com/ 查看源代码
attr设置checked，disabled等属性失效的问题，jquery的attr和prop的区别
最近做项目遇到一个问题,radio设置了默认checked值,attr("checked",true)切换checked值失效最后发现是jquery1.6版本之后,attr和pr ...
Noip模拟题 Matrix [递推，组合数]
Matrix 时间限制: 1 Sec 内存限制: 512 MB 题目描述小 z 的女朋友送给小 z 一个 n × n 的矩阵.但是矩阵实在太大了,小 z 的女朋友拿不动,只能带给他两个长度为 n ...
终于搞定在VS2010中将CString转换为const char&ast;
最近碰到了CString 转 const char *的问题. 以前只要简单的一个强制转换就OK了,可现在是不行了,搜索了很多资料,终于搞定,主要是Unicode和ANSI的问题,只要做一个转换就可以 ...
Oracle处理Clob类型数据入库(String入库)
从网上查找一堆参考,要么语焉不详,要么不可行.自己鼓捣了一堆可以正常入库了.请看最后: insert into CP_V_INFO" + "(ID, "+ "P ...
关于C++ 中的this 的理解
关键字this 通常被用在一个class内部,指正在被执行的该class的对象(object)在内存中的地址.它是一个指针,其值永远是自身object的地址.
GridView中的日期处理
数字 {0:N2} 12.36 数字 {0:N0} 13 货币 {0:c2} $12.36 货币 {0:c4} $12.3656 货币 "￥{0:N2}" ￥12.36 ...