IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > HTML5/前端互联网工程师 > css3基础入门-复杂选择器,内容生成,多列的介绍八

css3基础入门-复杂选择器,内容生成,多列的介绍八

时间:2017-01-23 09:50来源:原创 作者:恪己 点击:
一、复杂选择器 1、选择器作用 匹配页面上的元素 2、复杂选择器分类 (1)、兄弟选择器 1)、什么是兄弟选择器 通过元素的位置关系来匹配元素的 位置关系:具备相同父元素,同级
一、复杂选择器
1、选择器作用
匹配页面上的元素
2、复杂选择器分类
(1)、兄弟选择器
1)、什么是兄弟选择器
通过元素的位置关系来匹配元素的
位置关系:具备相同父元素,同级关系的元素
特点:只能向后找,不能向前找
2)、
2.1) :相邻兄弟选择器
相邻:后一个
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div> 
语法:选择器1+选择器2
2.2) :通用兄弟选择器
用于匹配 某元素后面的所有兄弟元素
语法:选择器1~选择器2
语义:匹配 选择器1 后面 所有满足选择器2的 兄弟元素
(2)、属性选择器
1)、什么是属性选择器
<div id="d1" class="c1"></div>
允许使用 元素所附带的属性及其值,来匹配页面的元素
ex:
*获取页面上所有 class 为 c1 的元素
*获取页面上所有 附带 id属性的 元素
2)、语法
①、[attribute]
attribute:属性
语义:匹配页面上所有附带 attribute 属性的元素
ex:
*[id]
匹配页面上所有附带 id 属性的元素
*[class]
匹配页面上所有附带 class 属性的元素
②、elem[attribute]
elem:元素
attribute:属性
语义:匹配页面上所有附带 attribute 属性的 elem 元素
ex:
*div[id]
匹配页面上所有附带 id 属性的 div 元素
*div[id][class]
匹配页面上所有 即具备id属性,同时又具备class 属性的 div元素
③、elem[attribute=value]
语义:匹配 页面中 所有 attribute 属性的值为 value 的elem元素
ex
*div[id=d1]
== #d1
*p[class='redBack']
== p.redBack
*input[type="text"]
匹配页面中所有的单行文本框
*匹配页面中所有的禁用元素
[disabled]
*匹配页面中所有的复选框
input[type="checkbox"]

[type="checkbox"]
④、elem[class~=value]
class的多类引用方式
<div class="redBack important weight"></div> 
语义:class 属性值 为值列表,并且value是这个列表中的一个独立单词
ex:
*div[class~=important]
匹配页面上所有的div ,并且class 值列表中 包含 important 这个独立单词的 元素
⑤、elem[attribute^=value]
^= : 以value作为开始
语义:匹配页面中 attribute属性值是以value作为开始的elem元素
1、div[class^=back]
匹配页面中 class属性值是以back作为开始的div元素 
⑥、elem[attribute*=value]
语义:匹配页面中 attribute属性值中包含value字符的elem元素
1、div[class*="or"]
匹配页面中 class舒心值中包含or字符的div元素
<div class="important"></div>
<div class="visitor"></div>
<div class="zero"></div>无法匹配
 2、div[class*="o"]
⑦、elem[attribute$=value]
语义:匹配页面中 attribute属性值中以value字符作为结尾的elem元素 
记住:
^= , *= , $=
(3)、伪类选择器
1)、目标伪类
*what
突出显示活动HTML锚点
*语法
:target
2)、元素状态伪类
元素状态:启用,禁用,被选中的
多数用于 表达元素中,被选中的状态 用户 单选按钮和复选框中
*:enabled
匹配每个已启用元素
*:disabled
匹配每个被禁用元素
*:checked
匹配每个被选中的元素(radio,checkbox)
3)、结构伪类
*:first-child
匹配 属于其父元素中的首个子元素
*:last-child
匹配 属于其父元素中的最后一个子元素
*:nth-child(n)
匹配 属于其父元素中的第n个子元素
:nth-child(5)
*:empty
匹配没有子元素的每个元素
*:only-child
匹配属于其父元素中的唯一子元素
4)、否定伪类
:not(选择器)
将 满足 指定选择器的元素 排除出去
(4)、伪元素选择器
伪类:匹配页面的元素
伪元素:匹配页面元素中的内容
①、:first-letter 或 ::first-letter
匹配 某元素的 首字符
②、:first-line 或 ::first-line
匹配 某元素的 首行
③、::selection
匹配 被用户选取的部分 
: :CSS3之前的版本中使用的
:: :CSS3中,伪元素选择器的表现形式 
推荐使用 :first-letter 替代 ::first-letter

     

------分隔线----------------------------
栏目列表
推荐内容