CSS选择器就是 通过选择器来 定位 你要控制的样式的部分,分为以下几种
1.HTML选择符(标签选择器)
就是把HTML标签作为选择符使用
如 p {.......} 网页中所有的P标签采用此样式
h2 {........} 网页中所有h2标签采用此样式
2.class类选择器 (使用 . 将自定义名{类名} 来定义的选择器 )
使用语法: <html 标签 class=“类名”></html标签>
.类名{
color=xxx;
font-size=xxx;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器练习</title> <style type="text/css"> .name1{ font-size: 15px; color: red; } .name2{ font-size: 20px; color: blue; } </style> </head> <body> <h1> 这是标题一 <p class="name1">美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p> </h1> <h2 class="name2"> 美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻 </h2> </body> </html>
3.ID选择器
定义: #id 名 { 样式 }
使用:<html 标签 id="id名" >....</htmL标签>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器练习</title> <style type="text/css"> #p1{ font-size: 40px; color: #999; } #p2{ font-size: 20px; color: blue; } </style> </head> <body> <h1> 这是标题一 <p id="p1">美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p> </h1> <h2 id="p2"> 美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻 </h2> </body> </html>
特点:ID是唯一的,如果id不唯一的话,也不会报错
4.通配符选择器
语法:
*{ key : value ; key : value }
功能:对所有HTML标签起作用(一般用于页面的初始化工作,统一字体,边框,内外边距)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器练习</title> <style type="text/css"> *{ color: red; } #p1{ font-size: 40px; } #p2{ font-size: 20px; } </style> </head> <body> <h1> 这是标题一 <p id="p1">美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p> </h1> <h2 id="p2"> 美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻 </h2> </body> </html>
特点:通配符选择器一般写到样式的最前面
5.关联选择器(只控制标签中的一部分)
等等等等,还有很多的标签选择器 ~ ~ ~