选择器
选择器
作用:选择页面上的某一个或者某一类元素
1、标签选择器:选择一类标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> /*标签选择,会选择到页面上所有的这个*/ h1{ color: #669c46; background: aquamarine; border-radius: 11px; } p{ font-size: 80px; } style> head> <body> <h1>杨不悔h1> <h1>杨不悔h1> <p>yangbuhuip> body> html>2、类 选择器 class:选择所有Class属性一致的标签,跨标签 .类名{}
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> /*类选择器的格式 .class的名称{} 好处,可以多个标签归类,是同一个class,可以复用 */ .yangbuhui{ color: coral; } .buhui{ color: deepskyblue; } style> head> <body> <h1 class="yangbuhui">杨不悔h1> <h1 class="buhui">杨不悔h1> <h1 class="yangbuhui">杨不悔h1> <p class="buhui">杨不悔p> body> html>3、id选择器:全局唯一! #id名{}
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> /* id选择器 :id必须保证全局唯一! #id名称{} 不遵循就近原则,固定的 id选择器 >class选择器 >标签选择器 */ #yangbuhui{ color: cornflowerblue; } .style1{ color: gold; } h1{ color: hotpink; } style> head> <body> <h1 class="style1" id="yangbuhui">标题1h1> <h1 class="style1">标题2h1> <h1 class="style1">标题3h1> <h1>标题4h1> <h1>标题5h1> body> html>优先级:id>class>标签