选择器css
2017-06-26 本文已影响7人
simuty
css
/*通用样式 界面美观需求*/
body{
width:430px;
margin:30px auto;
}
.demoBase {
width: 430px;
border: 1px solid #cccccc;
padding: 10px;
}
ul{
padding-left:0px;
}
.demoBase a {
float: left;
display: block;
height: 30px;
line-height: 30px;
width: 30px;
border-radius: 15px;
text-align: center;
background: #f36;
color: #ffffff;
margin-right: 5px;
text-decoration: none;
}
/*解决子元素浮动父元素高度坍塌的bug。浮动章节细讲*/
.clearfix{
overflow:auto;
height:1%
}
li {
float: left;
height: 30px;
line-height: 30px;
width: 30px;
border-radius: 15px;
list-style: none;
text-align: center;
background: #f36;
color: #ffffff;
margin-right: 5px;
}
.table{
width:450px;
border:1px solid #cccccc;
}
.table td{
border:1px solid #cccccc;
}
/*本节知识点*/
/*新增属性选择器、过滤选择器、伪类选择器*/
/*选择器可结合使用*/
/*通配选择器 所有浏览器支持通配符选择器。*/
/*1.选择页面所有元素*/
/*
*{
margin:0;
padding: 0;
}
*/
/*2.选择某个元素下的所有元素*/
.demo2 *{
border:1px solid #cccccc;
}
/*类选择器*/
/*可以选择html页面上包含选择类的所有元素*/
/*单类选择器*/
.itemSpesial{
background-color: #000000;
}
/*多类选择器。选择同时含有多各类的元素*/
/*!!!!!
如果多类选择器中某个类不存在。则将不能选择合适的元素
.special .item1 类中间有空格。表示选择含.special类下的含.item1类的元素
.special.item1 类中间无空格。表示选择同时含有.special.item1类的元素
*/
.itemSpesial.item1{
font-weight: bold;
color: yellow;
}
/*元素选择器 所有浏览器支持通配符选择器。*/
/* 元素选择器选择文档的元素，如html,body,p,div等等
本例为区分其他选择器案例。和类选择器结合。选择.demo3类下所有的li元素
如直接选择li元素。则将影响 html文档上所有li元素
*/
.demo4 li{
background-color: green;
}
/*id选择器 选择制定id属性值的元素*/
#item1{
background-color: green;
}
/*
将每一个选择器匹配的元素集合合并应用样式
本示例采用的是几个6个类选择的元素集合。也可采用其他选择器选择元素然后集合
*/
.item1,.item2,.item3,.item4,.item5,.item6{
background-color: #0000FF;
}
/*层次选择器。根据html页面结构选择元素*/
/*后代选择器 E F 选择匹配的F元素。其中F元素被包含在匹配的E元素中。就是查找E元素的所有F子元素*/
.demo7 li{
background-color: green;
}
/*
子选择器 E>F 选择匹配的F元素。其中F元素是匹配的E元素的直接子元素
!!!!注意是直接子元素。如果本例中 选择 .demo>li 选择器将不起作用。因为 .demo下无直接li子元素
可 .demo8>ul>li 或者 .demo8 ul>li 实现
注意 .demo>ul>li !== .demo ui>li 只在本例中选择元素是一致
.demo>ul>li 选择的是.demo 下直接ul元素下直接li元素
.demo ul>li 选择的是 .demo 下所有ul元素下的直接li元素
*/
.demo8>ul{
border:1px solid #cccccc;
}
.demo8>ul>li{
background-color: green;
}
/*
相邻兄弟选择器
E+F 选择匹配的F元素。其中F元素紧位于匹配的E元素之后
*/
.demo9 li+li{
background-color: green;
}
/*
通用选择器
E~F 选择匹配的F元素。且包含匹配的E元素后的所有的F元素
*/
.demo10 li~li{
background-color: green;
}
/*
属性选择器 根据元素的属性来选择元素
E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
*/
/*E[attr] 单一属性*/
.demo11 a[id] {
background: green;
color:yellow;
font-weight:bold;
}
/*E[attr] 多属性*/
.demo11 a[lang][title] {
background: yellow;
color:green;
}
.demo11 a[black][title] {
background: blue;
color:green;
}
/*E[attr="value"] 单一属性*/
/*
注意属性的值要完全匹配
如页面上有个元素 class="text1 texe2"
[attr="text1"]无法选择元素
[attr="text1 text2"] 选择元素
*/
.demo12 a[id="last"] {
background: green;
color:yellow;
font-weight:bold;
}
/*E[attr] 多属性*/
.demo12 a[lang="zh"][title="item2"] {
background: yellow;
color:green;
}
/*E[attr~="value"] */
.demo13 a[title~="text"] {
background: green;
color:yellow;
font-weight:bold;
}
/*E[attr^="value"]*/
.demo14 a[title^="item"] {
background: green;
color:yellow;
font-weight:bold;
}
/*E[attr$="value"]*/
.demo15 a[lang$="h"] {
background: green;
color:yellow;
font-weight:bold;
}
/*E[attr|="value"]*/
.demo16 a[lang|="zh"]{
background: green;
color:yellow;
font-weight:bold;}
/*E[attr*="value"]*/
.demo17 a[lang*="zh"]{
background: green;
color:yellow;
font-weight:bold;}
/*
伪类选择器
E:pseudo-class {property:value} 其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值
a:link {color:red;}
E.class:pseudo-class{property:value}
a.selected:hover {color: blue;}
*/
/*
动态伪类
锚点伪类 link、visited、hover active 其中 Link--visited--hover--active
用户行为类
:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
:focus用于元素成为焦点，这个经常用在表单元素上。
元素状态类
:enabled 可写状态
:disabled 不可写状态
:checked
:unchecked
结构类
:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。
*/
.demo18 li:first-child {background: green; border: 1px dotted blue;}
.demo18 li:last-child {background: green; border: 2px dotted blue;}
/*
:nth-child(length); 参数是具体数字 为整数
:nth-child(n);参数是n,n从0开始计算
:nth-child(n*length)n的倍数选择，n从0开始算
:nth-child(n+length);选择大于length后面的元素
:nth-child(-n+length)选择小于length前面的元素
:nth-child(n*length+1);表示隔几选一
:nth-last-child() 和：bth-child() 用法类似。。 计算方向是相反
*/
.demo19 li:nth-child(3) {background: green; border: 1px dotted blue;}
.demo19 li:nth-last-child(3) {background: green; border: 1px dotted blue;}
/*
:nth-of-type
:nth-last-of-type
:first-of-type和:last-of-type
:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。
:only-child和:only-of-type":only-child"表示的是一个元素是它的父元素的唯一一个子元素
:empty是用来选择没有任何内容的元素
*/
/*
伪元素
两个"：："和一个"："css3中主要用来区分伪类和伪元素
::first-letter 选择元素的第一行
p::first-line {font-weight:bold;}
::first-line 文本块的第一个字母
::before 给元素的前面插入内容
::afte 给元素的后面插入内容
::selection用来改变浏览网页选中文的默认效果
*/
更多精彩内容请关注“IT实战联盟”哦~~~
IT实战联盟.jpg
