1.什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 格式: 标签名称{ 属性:值; } 注意点: 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 2.标签选择器无论标签藏得多深都能选中 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
<style> p{ color: red; } h1{ color: blue; } </style> <body> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <ul> <li> <ul> <li> <ul> <li> <p>我是段落</p> </li> </ul> </li> </ul> </li> </ul> <h1>我是标题</h1> </body>2.什么是id选择器? 作用: 根据指定的id名称找到对应的标签, 然后设置属性 格式:#id名称{ 属性:值; } 注意点: 1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id 2.在同一个界面中id的名称是不可以重复的 3.在编写id选择器时一定要在id名称前面加上# 4.id的名称是有一定的规范的 4.1id的名称只能由字母/数字/下划线 a-z 0-9 _ 4.2id名称不能以数字开头 4.3id名称不能是HTML标签的名称 不能是a h1 img input ... 5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
<style> #identity1{ color: red; } #identity2{ color: green; } #identity3{ color: blue; } #identity4{ color: yellow; } </style> <body> <p id="identity1">迟到毁一生</p> <p id="identity2">早退穷三代</p> <p id="identity3">按时上下班</p> <p id="identity4">必成高富帅</p> </body>3.什么是类选择器? 作用: 根据指定的类名称找到对应的标签, 然后设置属性 格式:.(点)类名{ 属性:值; } 注意点: 1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名 2.在同一个界面中class的名称是可以重复的 3.在编写class选择器时一定要在class名称前面加上. 4.类名的命名规范和id名称的命名规范一样 5.类名就是专门用来给CSS设置样式的 6.在HTML中每个标签可以同时绑定多个类名 格式: <标签名称 class="类名1 类名2 ...">错误的写法: <p class="para1" class="para2">
<style> .pp{ color: red; } .ppp{ color: green; } .pppp{ color: blue; } .ppppp{ color: yellow; } .para1{ font-size: 100px; } .para2{ font-style: italic; } </style> <body> <p class="pp">迟到毁一生</p> <p class="ppp">早退穷三代</p> <p class="pppp">按时上下班</p> <p class="ppppp">必成高富帅</p> <p class="para1 para2">我是段落</p> <p class="para1 para2">我是段落</p> </body>4.什么是后代选择器? 作用: 找到指定标签的所有特定的后代标签, 设置属性 格式: 标签名称1 标签名称2{ 属性:值; } 先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性 div p{} 注意点: 1.后代选择器必须用空格隔开 2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代 3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器 4.后代选择器可以通过空格一直延续下去
<style> /* div p{ color: red; } */ /* #identity p{ color: red; } */ /* .para p{ color: blue; } */ /* #identity #iii{ color: skyblue; } */ /* #identity .ccc{ color: purple; } */ div ul li p{ color: red; } </style> <body> <p>我是段落</p> <div id="identity" class="para"> <p>我是段落</p> <p>我是段落</p> <ul> <li> <!--<p id="iii" class="ccc">我是段落</p>--> <p>我是段落</p> </li> <li> <p>我是段落</p> </li> </ul> </div> <p>我是段落</p> </body>5.什么是子元素选择器? 作用: 找到指定标签中所有特定的直接子元素, 然后设置属性 格式: 标签名称1>标签名称2{ 属性:值; } 先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素 注意点: 1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 2.子元素选择器之间需要用>符号连接, 并且不能有空格 3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器 4.子元素选择器可以通过>符号一直延续下去
<style> /* div>p{ color: red; } */ /* #identity>p{ color: blue; } */ div>ul>li>p{ color: purple; } </style> <body> <p>我是段落</p> <div id="identity"> <p>我是段落</p> <p>我是段落</p> <ul> <li><p>我是段落</p></li> </ul> </div> <p>我是段落</p> </body>6.什么是交集选择器? 作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性 格式: 选择器1选择器2{ 属性: 值; } 注意点: 1.选择器和选择器之间没有任何的连接符号 2.选择器可以使用标签名称/id名称/class名称 3.交集选择器仅仅作为了解, 企业开发中用的并不多
<style> /* p.para1{ color: red; } */ .para1#identity{ color: blue; } </style> <body> <p>我是段落</p> <p>我是段落</p> <p class="para1" id="identity">我是段落</p> <p class="para1">我是段落</p> <p>我是段落</p> </body>7.什么是并集选择器? 作用: 给所有选择器选中的标签设置属性 格式: 选择器1,选择器2{ 属性:值; } 注意点: 1.并集选择器必须使用,来连接 2.选择器可以使用标签名称/id名称/class名称
<style> /* .ht{ color: red; } .para{ color: red; } */ .ht,.para{ color: red; } </style> <body> h1 class="ht">我是标题</h1> <p class="para">我是段落</p> <p>我是段落</p> <p>我是段落</p> </body>8.相邻兄弟选择器 CSS2 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性 格式: 选择器1+选择器2{ 属性:值; } 注意点: 1.相邻兄弟选择器必须通过+连接 2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签 2.通用兄弟选择器 CSS3 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性 格式: 选择器1~选择器2{ 属性:值; } 注意点: 1.通用兄弟选择器必须用~连接 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
<style> /* h1+p{ color: red; } */ h1~p{ color: green; } </style> <body> <h1>我是标题</h1> <a href="#">我是超链接</a> <p>我是段落</p> <p>我是段落</p> <a href="#">我是超链接</a> <p>我是段落</p> <h1>我是标题</h1> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </body>9.CSS3中新增的选择器最具代表性的就是序选择器 1.同级别的第几个 :first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-last-child(n) 选中同级别中的倒数第n个标签 :only-child 选中父元素中唯一的标签 注意点: 不区分类型 2.同类型的第几个 :first-of-type 选中同级别中同类型的第一个标签 :last-of-type 选中同级别中同类型的最后一个标签 :nth-of-type(n) 选中同级别中同类型的第n个标签 :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 :only-of-type 选中父元素中唯一类型的某个标签
<style> /* p:first-child{ color: red; } */ /* p:first-of-type{ color: blue; } */ /* p:last-child{ color: red; } */ /* p:last-of-type{ color: blue; } */ /* p:nth-child(3){ color: red; } */ /* p:nth-of-type(3){ color: blue; } */ /* p:nth-last-child(2){ color: red; } */ /* p:nth-last-of-type(2){ color: red; } */ /* p:only-child{ color: purple; } */ /* p:only-of-type { color: red; } */ .para:only-of-type { color: red; } </style> <body> <!-- <h1>我是标题</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <div> <p>我是段落5</p> <p>我是段落6</p> <p>我是段落7</p> <p>我是段落8</p> </div> --> <p class="para">我是段落1</p> <div> <p class="para">我是段落2</p> <p class="para">我是段落2</p> <h1>我是标题</h1> </div> </body>:nth-child(odd) 选中同级别中的所有奇数 :nth-child(even) 选中同级别中的所有偶数 :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
style> /* p:nth-child(odd){ color: red; } p:nth-child(even){ color: blue; } */ /* p:nth-of-type(odd){ color: red; } p:nth-of-type(even){ color: blue; } */ /* p:nth-child(2n+0){ color: red; } p:nth-child(2n+1){ color: blue; } */ p:nth-child(3n+0){ color: red; } </style> <body> <p>我是项目</p> <p>我是项目</p> <p>我是项目</p> <p>我是项目</p> <p>我是项目</p> <p>我是项目</p> <p>我是项目</p> </body>10.什么是属性选择器? 作用: 根据指定的属性名称找到对应的标签, 然后设置属性 格式: [attribute] 作用:根据指定的属性名称找到对应的标签, 然后设置属性 [attribute=value] 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性 最常见的应用场景, 就是用于区分input属性
<style> /* p[id]{ color: red; } */ p[class=cc]{ color: blue; } </style> <body> <p id="identity1">我是段落1</p> <p id="identity2" class="cc">我是段落2</p> <p class="cc">我是段落3</p> <p id="identity3" class="para">我是段落4</p> <p>我是段落5</p> </body>(10)1.属性的取值是以什么开头的 [attribute|=value] CSS2 [attribute^=value] CSS3 两者之间的区别: CSS2中的只能找到value开头,并且value是被-和其它内容隔开的 CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开 2.属性的取值是以什么结尾的 [attribute$=value] CSS3 3.属性的取值是否包含某个特定的值得 [attribute~=value] CSS2 [attribute*=value] CSS3 两者之间的区别: CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的 CSS3中的只要包含value就可以找到
<style> /* img[alt^=abc]{ color: red; } */ /* img[alt|=abc]{ color: red; } img[alt$=abc]{ color: blue; } */ /* img[alt*=abc]{ color: red; } */ img[alt~=abc]{ color: red; } </style> <body> <img src="" alt="abcwwwmmm"> <img src="" alt="wwwmmmabc"> <img src="" alt="wwwabcmmm"> <img src="" alt="www-abc-mmm"> <img src="" alt="www abc mmm"> <img src="" alt="qq"> </body>11.什么是通配符选择器? 作用: 给当前界面上所有的标签设置属性 格式: *{ 属性:值; } 注意点: 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
<style> /* .cc{ color: red; } */ *{ color: red; } </style> <body> <!-- <h1 class="cc">我是标题</h1> <p class="cc">我是段落</p> <a href="#" class="cc">我是超链接</a> --> <h1>我是标题</h1> <p>我是段落</p> <a href="#">我是超链接</a> </body>
