一 CSS3 现状
在CSS2的基础上新增扩张的样式
移动端支持优于PC端
不断改进中 应用相对广泛
1.1 CSS3中新增的选择器
1> 属性选择器
代码示例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> button { cursor: pointer; } /* 属性选择器使用 */ /* 权重和类选择器 相同 */ /* 其实 类选择器 属性选择器 伪类选择器都是相同的*/ button[disabled] { cursor: default; } /* input type属性 且 type=search 的 */ input[type="search"] { color: pink; } /* div 有class属性 class属性以icon开头 */ div[class^="icon"] { color: red; } /* div 有class属性 class属性以icon结尾 */ div[class$="icon"] { color: black; } div[class*="hhh"] { color: blue; } </style> </head> <body> <!-- disabled 是禁用按钮 --> <button>按钮</button> <button>按钮</button> <button disabled="disabled">按钮</button> <button disabled="disabled">按钮</button> <input type="text" name="" id="" value="文本框"> <input type="text" name="" id="" value="文本框"> <input type="text" name="" id="" value="文本框"> <input type="search" value="搜索框"> <input type="search" value="搜索框"> <input type="search" value="搜索框"> <div class="icon1">图标一</div> <div class="icon2">图标二</div> <div class="icon3">图标三</div> <div class="abicon">图标四</div> <div class="abhhhcg">图标五</div> </body> </html>
2>结构伪类选择器
代码示例1
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>结构伪类选择器</title> <style> ul li:first-child { background-color: pink; } ul li:last-child { background-color: deeppink; } /* nth-child(n) 选择第n个元素 要第几个n就是几 */ ul li:nth-child(8) { background-color: lightpink; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
注意nth-child(n)选择器
n可以使数字 关键字和公式
n如果是数字 就是选择第几个
n如果是关键词 常见的关键词 even是偶数 odd是基数
n也可以是公式 (如果n是公式 则从0开始计算 ) 常见的公式如下
如果等于0或者超出元素的个数 忽略
代码示例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>nth-child(n)选择器</title> <style> /* ul li:nth-child(even) { background-color: lightyellow; } ul li:nth-child(odd) { background-color: lightpink; } */ ul li:nth-child(2n) { background-color: lightyellow; } ul li:nth-child(2n+1) { background-color: lightpink; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
其他示例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 得加空格 否则没用 不知道为啥 */ /* div :nth-child(1) { background-color: pink; } div :nth-child(2) { background-color: purple; } */ /* div span:nth-child(1) { 选不到 background-color: rebeccapurple; } */ /* div span:nth-child(2) { 可以选中 background-color: purple; } */ /* :nth-child(n) 选择父元素里面的第n个孩子 不管里面的孩子是否是同一种元素 */ /* 满足span的第一个元素 of-type 选择指定的元素*/ div span:first-of-type { background-color: pink; } div span:last-of-type { background-color: skyblue; } div span:nth-last-of-type(2) { background-color: blue; } </style> </head> <body> <div> <p>我是一个p</p> <span>我是span</span> <span>我是span</span> <span>我是span</span> </div> </body> </html>
nth-of-type(n)里面的n同上,只不过选定了指定类型的子元素。
>3伪元素选择器
注意:
before 和 after 必须有content属性
before的content 在元素的内容前面，after的content 在元素的内容后面
before和after都创建一个元素 其属于行内元素
因为在dom里面看不到before和after创建的元素 所以我们称之为伪元素
伪元素和标签选择器的权重一样
代码示例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素选择器</title> <style> div { width: 300px; height: 300px; border: 1px solid #ccc; } /* 在div的里面 在内容之前 创建了一个行内元素 内容为我*/ div::before { content: "我"; /* 转化为块级元素后 可以接受宽高 可以打开试试*/ /* display: block; */ /* 有背景色 但是不接受大小 证明是行内元素 */ width: 100px; height: 100px; background-color: pink; } /* 在div的里面 在内容之后 创建了一个行内元素 内容为‘谁’*/ div::after { content: "谁"; display: inline-block; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div>是</div> </body> </html>
利用伪元素选择器做字体图标的案例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪元素字体图标</title> <link rel="stylesheet" href="../CSS/font.css"> <style> /* 以前的做法 */ div { position: relative; width: 249px; height: 35px; border: 1px solid #ccc; } div span { position: absolute; top: 8px; right: 4px; font-family: 'icomoon'; } /* 利用伪元素选择器做法 */ p { position: relative; width: 249px; height: 35px; border: 1px solid #ccc; } p::after { position: absolute; top: 8px; right: 4px; content: ""; font-family: 'icomoon'; } </style> </head> <body> <!-- 以前的做法 --> <div><span></span></div> <p></p> </body> </html>