CSS3笔记（一）选择器

回顾css3之前的选择器

div        标签选择器
.box       类名
#box       id
*          通配符
div p      后代
div>p      子代
div,p      并集
div.box    交集
div+p div  后面的第一个p标签（同级）
div~p div  后面所有的p标签

css3选择器

1、属性选择器

div[title] 选中页面中带有title属性的div
div[title="yy"] 选中页面中带有title属性的div,并且title属性取值为aa
^ 开始  $ 结束 * 包含
div[title^="yy"] 选中页面中带有title属性的div,并且title属性取值以aa开始
div[title$="yy"] 选中页面中带有title属性的div,并且title属性取值以aa结尾
div[title*="yy"] 选中页面中带有title属性的div,并且title属性取值包含aa

2、结构 伪类选择器

li:first-child:选中li的父盒子下面的第一个子盒子
li:last-child:选中li的父盒子下面的最后一个子盒子
li:nth-child(n):选中li的父盒子下面的第n个子盒子
li:nth-last-child(n): 从后向前选中第n个子元素

n 是从0开始正整数 0,1,2,3,4,5....  n小于1是无效的
偶数： 2n  even   奇数：2n+1 2n-1  odd
3n 所有 3 的倍数  -n+5  选中前 5 个
nth-child( -n+5)       选中前 5 个
nth-last-child(n+5)    选中最后 5 个

注意点 ： 选择是分类型，排序是不分类型的

<div id='e1'>
    <span id='e2'>1111</span>
    <p id='e3'>2222</p>
    <p id='e4'>3333</p>
</div>


span:nth-child(1)
p:nth-child(2)
p:nth-child(3)

3、empty伪类

div:empty{border: 1px solid #000;}
仅仅当div内为空时样式才有效

4、not排除伪类

div:not(.box){border: 1px solid #000;}
div中除了带有类名 .box 都具有该样式

5、target伪类

target伪类 表示 元素 被激活的状态 必须配合锚点使用

h2:target{  /* 表示h2标签 被激活后 的状态 */
  color:red;
}
<ul class="nav">
    <li><a href="#title1">标题1</a></li>
    <li><a href="#title2">标题2</a></li>
    <li><a href="#title3">标题3</a></li>
</ul>
<!-- 点击列表可以激活状态 h2文字变红色 -->
<div class="content">
    <h2 id="title1">标题1</h2>
    <p>段落1段落1段落1段落1</p>
    <p>段落1段落1段落1段落1</p>
    <h2 id="title2">标题1</h2>
    <p>段落1段落1段落1段落1</p>
    <p>段落1段落1段落1段落1</p>
    <h2 id="title2">标题1</h2>
    <p>段落1段落1段落1段落1</p>
    <p>段落1段落1段落1段落1</p>
</div>

6、伪元素

本质上使用css 模拟的 标签 效果
::before ,::after 是在标签的内部的前后分别模拟出来标签的效果
他们默认是行内元素
必须有content属性，如果内容为空 可以 content:"";

作用： 有利于seo优化 简化网页结构

7、伪元素选择器

<div>
    111111111111111<br>
    111111111111111<br>
    111111111111111<br>
</div>
在div中有多行文字
    /* 选中第一行*/
    div::first-line{
      color:red;
    }
    /* 选中第一个字*/
    div::first-letter{
      color:green;
      font-size: 30px;
      float: left; /*浮动*/
    }
    /* 设置选中区域的样式，通常设置背景颜色和文字颜色*/
    div::selection{
      color:red;
      background:rgba(0,0,0,0.3);
      font-size: 100px;
      line-height: 200px;
    }