根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color: red;} 引用id一定要加# #p2 {color: green;} #p3 {color: blue;} </style> </head> <body> <p id="p1">大多数人的帅,都是浮在表面的,是外表的帅</p> <p id="p2">而我,不仅具备外表帅,内心更是帅了一逼</p> <p id="p3">就是我,我就是</p> </body> </html>
作用:根据指定的类名称,在当前界面中找到对应的标签,然后设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p1 {color: red;} #引用class一定要加点. .p2 {font-size: 50px;} .p3 {text-decoration: underline;} </style> </head> <body> <p class="p1">大多数人的帅,都是浮在表面的,是外表的帅</p> <p class="p2">而我,不仅具备外表帅,内心更是帅了一逼</p> <p class="p3">那就是我</p> <#gth# 第一行与第三行的颜色都是红色 第一行与第二行的字体大小都是50px 第二行与第三行内容有个下划线 --> <p class="p1 p2">大多数人的帅,都是浮在表面的,是外表的帅</p> <p class="p2 p3">而我,不仅具备外表帅,内心更是帅了一逼</p> <p class="p3 p1">那就是我</p> </body> </html>
作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p {color: red;} </style> </head> <body> <p>美丽的外表下其实隐藏着一颗骚动的心</p> <ul> <li> <p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p> </li> </ul> </body> </html>
注意: 1、只要是HTML的标签都能当做标签选择器 2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签 3、标签选择器,无论嵌套多少层都能选中
作用:选择所有标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * {color: red;} #把所有的标签设置相同的属性 </style> </head> <body> <h1 >我是标题</h1> <p >我是段落</p> <a href="#">我是超链接</a> </body> </html>
作用:找到指定标签的所有后代(儿子,孙子,重孙子、、、)标签,设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .part1 p {color: red;} # 1 找到part1下的所有p标签,添加属性 #id1 ul p {color: red;} # 2 找到一个id='id1'下的ul下的所有p标签 </style> </head> <body> <p>我是body下的段落1</p> <div id="id1" class="part1"> <p>我是div下的段落1</p># 1 <ul> <li class="aaa"> <p class="ccc">我是ul>li下的段落1</p># 1 2 </li> </ul> </div> <div> <p>hahahahah</p> </div> <p>我是body下的段落2</p> </body> </html>
注意:1、后代选择器必须用空格隔开 2、后代不仅仅是儿子,也包括孙子、重孙子 3、后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class 4、后代选择器可以通过空格一直延续下去
作用:找到指定标签的所有特定的直接子元素,然后设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #id1>p {color: red;} # 1 找到id='id1'下的子标签p,添加属性 .part1 ul .aaa>a {color: red;} </style> #2 找到class='part1'下的所有标签ul下的class=aaa的子标签a,添加属性 </head> <body> <p>我是body下的段落1</p> <div id="id1" class="part1"> <p>我是div下的段落1</p> # 1 <ul> <li class="aaa"> <p class="ccc">我是ul>li下的段落1</p> <a href="">点我啊1</a> # 2 <p> <a href="">点我啊2</a> </p> </li> <li> <a href="#">点我啊3</a> </li> </ul> </div> <div> <p>hahahahah</p> </div> <p>我是body下的段落2</p> <a href="#">百度一下</a> </body> </html>
注意: 1、子元素选择器之间需要用>符号链接,并且不能有空格,比如div >p会找div标签的所有后代标签,标签名为">p" 2、子元素选择器只会查找儿子,不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class 4、子元素选择器可以通过>符号一直延续下去
相邻兄弟选择器:只能选中紧跟其后的那个标签,不能选中被隔开的标签
通用兄弟选择器:给指定选择器后面的所有选择器中的所有标签设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style type="text/css"> #相邻兄弟选择器 h1+p {color: red;}#相邻兄弟选择器必须通过+号链接 x #通用兄弟选择器 h1~p {color: red;}#通用兄弟选择器必须用~来链接 y </style> </head> <body> <h1>我是标题1</h1> <a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a> <p>我是段落</p> #y <p>我是段落</p> #y <h1>我是标题2</h1> <p>我是段落</p> #x y </body> </html>
作用:给所有满足条件的标签设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p,a {color: red;} #找到所有p标签和a标签,添加属性 </style> </head> <body> <h1>哈哈啊</h1> <p class="part1">我是段落1</p> <a href="#" class="part2">a标签</a> </body> </html>
注意: 1、选择器与选择器之间必须用逗号来链接 2、选择器可以使用标签名称、id、class
作用:给所有选择器选中的标签中,相交的那部分标签设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a.part2 {color:
参与评论
手机查看
返回顶部