Selector of CSS3
Relationship Selectors(关系型选择器)
E+F(css2中的) 下一个满足条件的兄弟元素节点
div
1
2
3
div + p{
background-color: red;
}/* div 下一个兄弟元素节点 满足条件是p */
E~F(所有满足条件的兄弟元素节点)
div ~ p{
background-color: red;
}
E>F(直接子元素选择器)
1
2
3
div > p{
background-color: red;
}
Attribute Selectors(属性选择器)
E[attr~=“val”] E[attr|=“val”] (CSS2中的)
1.E[attr~=“val”]
attr中有单独的val或者val的左右由空格隔开的
//变红的是第一、三个div
1
3
2
4
div[data~="a"]{
background-color:red;
}
- E[attr|=“val”]
attr中以val开头的
变红的是第一、二个
1
2
3
div[class|="a"]{
background-color:red;
}
E[attr^=“val”] E[attr$=“val”] E[attr*=“val”] (源于正则表达式)
1.E[attr^=“val”]
attr中以val开头的
2.E[attr$=“val”]
attr中以val结尾的
3.E[attr*=“val”]
attr中只要存在val就可以(即使空格)
Pseudo-Element Selectors(伪元素选择器)
E::placeholder E::selection(在工作中一般不让用)
1.E::placeholder(只能修改字体颜色)
h5中存在placeholder
input{
border:1px solid black;
}
input::placeholder{
color:green;
}
兼容性详见CSS参考手册placeholder
2.E::selection(设置选中的字体) 注意:有两个:
只能设置三种属性：color / text-shadow / background-color
我很帅
你也很帅
div:nth-of-type(1)::selection{
/*color:;*/
/*background-color: ;*/
/*text-shadow:;*/
color:#fff;
background-color: #fcc;
//text-shadow:3px 5px black;//有个阴影
}
div:nth-of-type(2)::selection{
color:yellow;
background-color:green;
}
//小例子:密室逃脱
建立一个线性表，对表中数据元素存放的先后次序没有任何要求。输入待查数据元素的关键字进行查找。（为了简化算法，数据元素只含一个整型量关键字字段，数据元素的其余数据部分忽略不考虑。）
老要实现哈夫曼编码，只要在所建立的哈夫曼树上进行二进制编码:往左走，编码为0,往右走，编码为1，然后将从根结点到树叶中所有0、1排列起来，则得到该树叶的哈夫曼编码。哈夫曼编码可以用一一个结构型的一-维数组保存，每个元素包含:编码、编码的开始位置、编码所对应的字符等3项。 哈夫曼译码，就是将输入的编码还原成对应的字符。
哥将建立哈夫曼树、实现哈夫曼编码、哈夫曼译码都定义成子函数的形式，然后在主函数调用它们。
建立哈夫曼树时，将哈夫曼树的结构定义为一一个结构型的一维数组,每个元素含有四项:双亲、左孩子、右孩子、给定的权值可以从键盘输入，要输出所建立的哈夫曼树，只要输出哈夫曼树的一维数组中全部元素即可
你2)查找表的存储结构为有序表进行二分检索，即表中记录按关键字大小排序存放。输入待查数据元素的关键字进行查找。（为了简化算法，记录只含一个整型量关键字字段，记录的其余数据部分略不考虑。程序要求对整型量关键字数据的输入按从小到大排序输入。）
很将建立哈夫曼树、实现哈夫曼编码、哈夫曼译码都定义成子函数的形式，然后在主函数调用它们。
建立哈夫曼树时，将哈夫曼树的结构定义为一一个结构型的一维数组,每个元素含有四项:双亲、左孩子、右孩子、给定的权值可以从键盘输入，要输出所建立的哈夫曼树，只要输出哈夫曼树的一维数组中全部元素即可
帅4)设哈希表长为20，用除留余数法构造一个哈希函数，以开放定址法中的线性探测再散列法作为解决冲突的方法，编程实现哈希表查找、插入和建立算法。
span::selection{
background-color: green;
color:yellow;
}
Pseudo-Classes Selectors(伪类选择器)
E:not(s) 加不加s都一样 (not/nots),和jQuery中的not如出一辙
1
2
3
4
/*除去带属性的div
div:not([class]){
background-color:red;
}*/
/*带有class的div
div[class]{
background-color:red;
}
*/
div:not(.test){
background-color:green;
}
/*与上面形式等同
div:not[class="test"]{
background-color:green;
}*/
not用于移动端列表页
小练习如下：
- content
- content
- content
- content
- content
- content
*{
margin:0px;
padding:0px;
}
ul{
width: 300px;
border: 1px solid #999;
}
li{
height: 50px;
margin:0 5px;
}
li:not(:last-of-type){
border-bottom: 1px solid black;
}
not实例 见移动端列表页 百度 NBA
E:root
:root(根标签选择器）与html一样，但是如果在XML中就跟xml一样，未来某某ml可能会出现也不一定.
一般情况下，就用:root 不需要html:root。当然我们可能觉得E:root可以是div:root，其实呢，是没有用滴。
E:target(被锚点所标记) 在BOM中通过js中location.hash搜东设置锚点的值
//当点击box1时id为box1的加一个红色边框
//当点击box2时id为box2的加一个红色边框
box1
box2
1
2
div:target{
border: 1px solid red;
}
小练习
//通过点击red green gray 改变背景颜色
:root,
body{
margin:0;
height:100%;
}
#red,
#green,
#gray{
height: 100%;
width: 100%;
}
#red{
background-color:red;
}
#green{
background-color:green;
}
#gray{
background-color:gray;
}
div[id]:not(:target){ //通过id选择器选出未被点击的标签
display: none;
}
div.button-wrapper{
position: absolute;
width: 600px;
top: 400px;
}
div.button-wrapper a{
text-decoration:none;
color:#fff;
background-color:#fcc;
font-size: 30px;
border-radius: 3px;
margin: 0 10px;
}
E:first-child ： E作为某某的第一个孩子（不要理解成E的第一个孩子）
4
1
2
3
p:first-child{
background-color:red;
}
E:last-child E作为某某的最后一个孩子（不要理解成E的最后一个孩子）
1
2
3
4
//div中最后一个孩子p和html最后一个孩子p
p:last-child{
background-color:red;
}
E:only-child E作为某某的唯一孩子（不要理解成E的唯一孩子）且没有唯二
1
2
3
p:only-child{
background-color:red;
}
E:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
4
1
2
3
p:nth-child(1){
background-color:red;
}
/*第奇数个孩子
p:nth-child(2*n+1){
background-color:red;
}*/
/*第奇数个孩子
p:nth-child(odd){
background-color:red;
}*/
/*第偶数个孩子
p:nth-child(2*n){
background-color:red;
}*/
/*第偶数个孩子
p:nth-child(even){
background-color:red;
}*/
如果是0是div的第一个孩子，压根没什么效果滴
0
1
2
3
4
p:nth-child(1){
background-color:red;
}
E:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。
4
1
2
3
//CSS3代码
p:nth-last-child(1){
background-color:red;
}
//如果代码是这样的()
p:nth-last-child(1){
background-color:red;
}
开发常用的五种写法：
E:first-of-type 选择器匹配属于其父元素里的特定标签E的首个子元素。
0
1
2
3
4
//p是其父元素里匹配到的所有p的第一个p元素
p:first-of-type{
background-color:red;
}
E:last-of-type 选择器匹配属于其父元素里的特定标签E的最后一个子元素。
//p是其父元素里匹配到的所有p的最后一个p元素
p:last-of-type{
background-color:red;
}
E:only-of-type
0
1
//p是其父元素里匹配到的唯一p元素
p:only-of-type{
background-color:red;
}
E:nth-of-type(n) E是其父元素里匹配到的所有E元素中的第n个元素，n 可以是数字、关键词或公式。
0
1
2
3
4
//p是其父元素里匹配到的所有p元素中的第一个元素
p:nth-of-type(1){
background-color:red;
}
E:nth-of-last-type(n) E是其父元素里匹配到的所有E元素中的第n个元素，从最后一个开始计数
n 可以是数字、关键词或公式。
0
1
2
3
4
//p是其父元素里匹配到的所有p元素中的第n个元素,从最后一个开始计数
p:nth-last-of-type(1){
background-color:red;
}
E:empty 选择器匹配没有子元素（包括文本节点）的每个元素。
123
234
//不包括注释
div:empty{
border:1px solid black;
height:100px;
}
E:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）
input:checked + span{
background-color:green;
}
input:checked + span::after{
content:"隔壁老王 电话：xx，请务必行事";
color:#fff;
}
E:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。
E:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。
input{
border:1px solid #999;
}
input:enabled{
background:green;
}
input:disabled{
border:1px solid #f20;
background-color:#fcc;
box-shadow: 1px 2px 3px #f20;
}
E:read-only 选择器用于选取设置了 “readonly” 属性的元素。
E: read-write 选择器用于选取设置了 “readwrite” 属性的元素，readwrite可不加。
input{
border:1px solid #999;
}
input:read-write{
color:green;
}
input:read-only{
color:red;
}
选自https://www.jianshu.com/p/acf41770c0d3