CSS学习笔记2：选择器
标签选择器
1、选择要给样式的目标标签，所以叫做标签选择器，也叫元素选择器。
2、给所有相同标签，给相同样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> /*标签选择器：标签作为选择器*/ p{ color: red; } div{ color: purple; } </style> </head> <body> <p>李大嘴</p> <p>佟掌柜</p> <p>白展堂</p> <div>鸣人</div> <div>佐助</div> </body> </html>
类选择器
1、html声明，CSS调用
2、格式： .类名{属性:值;属性:值}
3、类名尽量不使用下划线（用中横线代替），纯数字，中文，具体见命名规范。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> /*标签选择器：标签作为选择器*/ p{ color: red; } div{ color: purple; } /*类选择器:html声明，CSS调用*/ .mingren{ color: orange; font-weight: bold; font-family: "微软雅黑" } .zuozhu{ color: blue; } </style> </head> <body> <p>李大嘴</p> <p>佟掌柜</p> <p>白展堂</p> <!-- 声明类 --> <div class="mingren">鸣人</div> <div class="zuozhu">佐助</div> </body> </html>
多类名选择器
1、混合搭配，比较自由
2、多个类名用空格隔开，与顺序无关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> .font20{ font-size: 20px； } .font14{ font-size:14; } .pink{ color: pink; } </style> </head> <body> <div class="font20 pink">亚瑟</div> <div class="font20">项羽</div> <div class="font14 pink">刘备</div> <div class="font14">安琪拉</div> </body> </html>
id选择器
1、id名即为html元素的id属性值，大多数html元素都具体定义id属性，元素的id值是唯一的，只能对应文档中的某一个具体元素
2、类选择器时可以多次重复使用，类似人名。W3C规定，id选择器只能使用一次，相当于身份证号。区别就是在使用次数上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> #pink{ color: pink; } </style> </head> <body> <div id="pink">亚瑟</div> <div >项羽</div> <div >刘备</div> <div >安琪拉</div> </body> </html>
通配符选择器
*代表所有选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> *{ color: pink; } </style> </head> <body> <div>亚瑟</div> <p >刘备</p> <h1>我是段落</h1> </body> </html>
伪类选择器
用于向某些选择器添加特殊效果，如给链接添加效果，比如可以选择 第一个，第n个选择器。
链接伪类选择器
1、a:link /*未访问的链接*/
2、a:visited /*已访问的链接*/
3、a:hover /*鼠标移入的链接*/
3、a:activea: /*鼠标按住的链接*/
顺序尽量不要颠倒，按照lvha（love hate记忆法）的顺序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> a:link { color: blue; } a:visited { color: gray; } a:hover{ color: green; } a:active{ color: red; } </style> </head> <body> <div><a href="#">秒杀</a></div> </body> </html>
简写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> a{ font-weight: 700; font-size: 16px; color: gray; } a:hover{ color: red; } </style> </head> <body> <a href="#">秒杀</a> </body> </html>
结构（位置）伪类选择器（CSS3）
:first-child：选择父类选择器的第一个子类
:last-child：选择父类选择器的最后一个子类
:nth-child(4)：选择父类选择器的最后4个子类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li:first-child{ color:red; } li:last-child{ color: blue; } li:nth-child(4){ color: green; } </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> </ul> </body> </html>
:nth-child(even)：选择所有偶数子类
:nth-child(odd)：选择所有奇数子类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li:nth-child(even){ color:red; } li:nth-child(odd){ color:green; } </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> </ul> </body> </html>
可以用公式：n是从0开始的
:nth-child(n)：选择所有子类
:nth-child(2n)：选择所有偶数子类
:nth-child(2n+1)：选择所有奇数子类
:nth-child(3n)：选择第3的倍数个子类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li:nth-child(3n){ color:red; } </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> </ul> </body> </html>
:nth-last-child(2)：选择倒数第2个子类
后面的公式和even、odd用法和:nth-child一样，不过是把最后一个当第一个子类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li:nth-last-child(2){ color:red; } </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> </ul> </body> </html>
目标伪类选择器
:target：当前选中的元素，配合锚点使用
<style type="text/css"> :target{ color: red; } </style>
文本颜色
1、英文：red，green等
2、十六进制：#00ff00（#0f0）、#ffffff（#fff），尽量用16进制的简写，#ff00fe不能简写
3、GRB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*英文*/ li:nth-child(3n){ color:red; } /*十六进制*/ li:nth-child(2){ color:#ff00ff; } /*RGB */ li:nth-child(4){ color:rgb(203,35,224); } </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> </ul> </body> </html>
