CSS3资料之选择器

◆ 属性选择器：

通过标签属性来进行选择

• Element[attr]：表示存在attr属性即可

--div 带有class属性

div[class]

• Element[attr=val]：表示属性值完全等于val

--div 带有class属性 ，并且值为demo

div[class="demo"]

• Element[attr*=val]：表示属性值里包含val字符并且在“任意”位置

--div，带有class属性 ，并且值包含demo

div[class*=demo]

• Element[attr^=val]：表示的属性值里包含val字符并且在“开始”位置

--div，带有class属性 ，并且值以 demo开头

div[class^=demo]

• E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置

--div，带有class属性 ，并且值以demo结尾

div[class$=demo]

◆ 伪类选择器：

1、结构伪类：

以某元素相对于其父元素或兄弟元素的位置来获取无素

• Element:first-child
  第一个子元素
• Element:last-child
  最后一个子元素
• Element:nth-child(n)
  第n个子元素，计算方法是E元素的全部兄弟元素

--第三个元素
div>ul>li:nth-child(3){
   color: deeppink;
} 

--选中前面五个
li:nth-child(-1n+5){
   color: red;
}

--选中所有的7 的倍数的li
li:nth-child(7n){
  color: red;
}

• Element:nth-last-child(n)
  倒数第n个子元素

--倒数第二个子元素
div>ul>li:last-child(2){
     color: deeppink;
}

注：n遵循线性变化，其取值0、1、2、3、4、… 但是当n<=0时，选取无效。

• 奇数和偶数可以用odd和even表示

--所有的奇数
li:nth-child(odd){
  color:blue;
}

--所有的偶数
li:nth-child(even){
  color:red
}

2、empty伪类：

选中没有任何子节点的E元素，没有任何的子元素，包括空格

Element:empty

示例：

/* 如果div是空的则会被选中*/

div:empty{
    background-color: red;
}

3、目标伪类：

结合锚点进行使用，被激活状态的锚点的对应元素会被选中

Element:target

示例：

见CSS3案例之target伪类

◆ 伪元素：

通过css模拟出html标签的效果：1、必须有content属性才行；2、是一个行内元素，可以转换成块元素

• Element::before

span::before{
    content:"今天";
    color:green;
    display: inline-block;
}

• Element::after

span::after{
    content:"真好";
    color:green;
}

◆ 伪元素选择器：

• Element::first-letter
  文本的第一个字母或字（如中文、日文、韩文等）

li::first-letter{
    color:red;
    font-size:30px;
}

• Element::first-line
  文本第一行

div{
    width: 500px;
    border: 1px solid #000;
    height: 300px;
}
/* 选中第一行的伪元素的选择器*/
div::first-line{
  color:red;
}

• Element::selection
  可改变选中文本的样式

div{
    width: 500px;
    border: 1px solid #000;
    height: 300px;
}
/* 选中的伪元素的选择器*/
div::selection{
  color:red;
}