css3复杂选择器+内容生成+Css Hack

1、复杂选择器
2、内容生成
3、多列
4、CSS Hack(浏览器兼容性)
=======================================
1、复杂选择器
1、兄弟选择器
1、特点：
1、通过位置关系来匹配元素(平级)
2、只能向后找，不能向前找
2、兄弟选择器-相邻兄弟选择器
1、什么是相邻兄弟
紧紧挨在一起的元素，称之为相邻兄弟
<div id="d1"></div>
<p id="p1"></p>
<span id="span"></span>
2、语法
选择器1+选择器2
ex:
#d1+p{color:red;}
3、兄弟选择器-通用兄弟选择器
1、什么是通用兄弟
后面所有
2、语法
选择器1~选择器2
ex:
#d1~p{color:green;}
#d1~.blueColor{color:blue;}
2、属性选择器
1、属性选择器
允许使用元素所附带的属性及其值来匹配页面的元素
ex:匹配页面中所有的文本框(匹配页面中所有 type=text 的 input 元素)
2、语法
[attr=值]
3、详解
1、[attr]
attr:表示某一具体属性名称
作用：匹配 附带 attr 属性的元素
ex:
[id] : 匹配页面中所有 附带 id 属性的元素
2、elem[attr]
elem:表示页面中某一具体元素
ex:
div[id]:匹配页面中所有附带id属性的div元素
3、[attr1][attr2]... ...
作用：匹配 即具备attr1属性同时也具备attr2属性的元素
ex:
p[id][class]:匹配页面中即有id属性又有class属性的p元素
4、[attr=value]
value:表示某一具体数值
作用：匹配 attr属性值为value的所有元素
ex:
input[type=text]
5、[class~=value]
作用：
1、用在多类选择器中
2、匹配 class 属性值 是以 空格 隔开的值列表，并且 value 是该值列表中的一个独立的值 的元素
6、[attr^=value]
^= : 以 ... 作为开始
作用：匹配 attr 属性值 以 value 作为开始的元素
7、[attr*=value]
*= : 包含 ... 字符
作用：匹配 attr 属性值中 包含 value字符的元素
8、[attr$=value]
$= : 以 ... 作为结束
作用：匹配 attr 属性值 以 value 作为结束的元素

属性选择器中，所有的值，都可以使用 "" 或 '' 引起来
[class="c1"]
[class='c1']
[class=c1]
3、伪类选择器
1、目标伪类
1、作用
突出显示活动的HTML锚元素
2、语法
elem:target
2、元素状态伪类
1、作用
匹配 元素已启用，被禁用，被选中的状态
主要应用在表单控件上
2、语法
1、:enabled
匹配 每个已启用(未被禁用)的元素
2、:disabled
匹配 每个被禁用的元素
3、:checked
匹配 每个被选中的元素(radio,checkbox)
3、结构伪类
1、作用
通过元素间的结构关系，来匹配元素
2、语法
1、:first-child
匹配属于其父元素中的首个子元素
ex:
td:first-child{color:red;}
2、:last-child
匹配属于其父元素中的最后一个子元素
ex:
td:last-child{color:green;}
3、:nth-child(n)
匹配属于其父元素中的第n个子元素
4、:empty
匹配没有子元素的元素
注意：也不能包含文本
5、:only-child
匹配属于其父元素中的唯一子元素
<div id="d1">
<p id="p1"></p>
</div>
4、否定伪类
1、作用
将 满足条件的 选择器匹配的元素 排除出去
2、语法
:not(选择器)
ex:
#tbl td:not(:first-child){
color:red;
}
匹配：除每行第一列以外的剩下所有列
4、伪元素选择器
伪类：匹配元素的不同状态，匹配到的是元素
伪元素：匹配的某个元素中的某部分内容
1、:first-letter 或 ::first-letter
匹配某元素的首字符
2、:first-line 或 ::first-line
匹配某元素的首行字符
3、::selection
匹配被用户选取的部分

: 与 ::的区别
1、:
既能表示 伪类选择器
也能表示 伪元素选择器（CSS2）
2、::
在 CSS3 中 表示伪元素选择器
尽量选择 :来使用，即表示伪类也表示伪元素
2、内容生成
1、伪元素选择器
1 、:before 或 ::before
匹配 某元素的 内容区域之前
<div>(:before)这是一个div</div>
2、:after 或 ::after
匹配 某元素的 内容区域之后
<div>这是一个div(:after)</div>
2、属性
属性：content
取值：
1、字符串 : 纯文本
使用的话，要用""引起来

content:"台词：";
2、图像 : url()
content:url(xxx.jpg);
3、计数器

demo
子曰：学而时习之，不亦乐乎!
-论语

<span>学而时习之</span>
<span>有朋自远方来</span>
3、解决的问题
1、浮动元素的父元素高度
.clear:after{
content:"";
display:block;
clear:both;
}

<div class="clear"></div>
2、外边距溢出
#d2:before{
content:"";
display:table;
}
4、计数器
1、什么是计数器
使用CSS 动态生成一组 有序的数字并且插入到元素中
2、语法
1、属性- counter-reset
1、作用
声明或重置计数器
2、语法
counter-reset:名 初始值;
counter-reset:名1 值1 名2 值2;
注意：
1、初始值可以省略不写，默认为0
2、不能放在使用的元素中声明，大部分情况下，可以将计数器声明在使用元素的父元素上(结合实际情况考虑)
2、属性- counter-increment
1、作用
指定计数器每次出现的增量
即每次出现的计数器值的变化范围
2、语法
counter-increment:名 增量1;
counter-increment:名1 增1 名2 增2;

注意：
1、增量值可以为正，也可以为负，也可以省略
为正：递增
为负：递减
省略：默认增量为1
2、哪个元素使用计数器，在哪个元素中设置计数器增量
3、函数- counter()
1、作用
在指定元素中，使用计数器的值
必须要配合 content 属性一起使用
content要配合着 :before 或 :after 一起使用
2、语法
xx:before{
content:counter(名);
}

demo:
1、Web 基础知识(c1) - 声明c2 计数器
1.1 基础1 (c1.c2)
1.2 基础2 (c1.c2)
1.3 基础3 (c1.c2)
2、html 快速入门(c1) - c2 复位成 0
2.1 入门1 (c1.c2)
2.2 入门2 (c1.c2)
3、网页中的文本(c1) - c2 复位成 0
3.1 文本1 (c1.c2)
3.2 文本2 (c1.c2)
3、多列
1、语法
1、分隔列
属性：column-count
取值：数字
2、列间隔
属性：column-gap
取值：px为单位的数值
3、列规则
作用：定义每两列之间的线条样式
属性：column-rule
取值：width style color
2、兼容性
Chrome & Safari:
-webkit-column-count:
-webkit-column-gap:
-webkit-column-rule:
Firefox:
-moz-column-count:
-moz-column-gap:
-moz-column-rule:
4、CSS Hack
1、原理
使用CSS属性优先级解决兼容性问题
2、CSS Hack 的实现方式
1、CSS类内部Hack
在样式属性名或值的前后增加前后缀以便识别不同的浏览器
2、选择器Hack
在选择器前增加前缀以便识别不同的浏览器
* : IE6 识别
*+: IE7 识别

div{
background-color:red;
}

/*以下浏览器只有在IE6中能识别*/
*div{
background-color:green;
}
/*以下浏览器只有在IE7中能识别*/
*+div{
background-color:blue;
}
3、HTML头部引用Hack
使用HTML条件注释判断浏览器版本

 

转载于:https://www.cnblogs.com/harlem/p/6182137.html