- A+
所属分类：Web前端
标签选择器：（范围比较大）
* 通配符选择器，全部选择器
h1,h2,p,div... 标签选择器
类与ID选择器：
.class 类选择器
#id ID选择器
注意：ID选择器是唯一的，范围比较小，个人不建议使用id来定义样式，建议使用class
多类样式声明：
class="class1 class2 class3"
结构选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> /* 后代选择器 */ main article h2{ color:red; } /* 直接子元素选择器 */ main article>h2{ background:pink; } /* 兄弟选择器，取后面不取前面 */ article h1~h2{ text-decoration: underline; } /* 紧挨着的兄弟选择器，取后面不取前面 */ article h1+h2{ font-size:12px; } </style> </head> <body> <main> <article> <h1>h1</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> </article> </main> </body> </html>
属性选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> h1[title][id]{ color:red; } /* 指定属性值 */ h1[title='cyy']{ background:pink; } /* 指定值开始 */ h1[title^='cyy']{ text-decoration: underline; } /* 指定值结束 */ h1[title$='cyy']{ font-size:12px; } </style> </head> <body> <main> <article> <h1 title id>h1-title-id</h1> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> </article> </main> </body> </html>
属性选择器内容值筛选：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> /* 指定值出现在任意位置 */ h1[title*='cyy']{ font-size:12px; } /* 指定值出现在任意位置，独立词两边有空格 */ h1[title~='cyy']{ color:red; } /* 单独的指定值本身，或者后面跟着中划线 */ h1[title|='cyy']{ background:pink; } </style> </head> <body> <main> <article> <h1 title id>h1-title-id</h1> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h1 title='cyyhahaha cyy'>h1-title</h1> <h1 title='cyy hahahacyy'>h1-title</h1> <h1 title='cyy-hahaha cyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> </article> </main> </body> </html>
伪类选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> a:link{ color:red; } a:visited{ color:yellow; } a:hover{ color:green; } a:active{ color:orange; } input:focus{ background:yellow; outline:none; } input:active{ background:pink; } input:hover{ color:red; } </style> </head> <body> <main> <a href="http://www.baidu.com" target="_blank">baidu</a> <input type="text" value="111"> <article> <h1 title id>h1-title-id</h1> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h1 title='cyyhahaha cyy'>h1-title</h1> <h1 title='cyy hahahacyy'>h1-title</h1> <h1 title='cyy-hahaha cyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> </article> </main> </body> </html>
实际开发过程中建议使用第三方库
目标与根伪类以及空元素的处理：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> main{ height:1000px; } /* 锚点目标 */ div:target{ color:red; } /* 根元素 */ html{ color:yellow; } /* 根伪类元素 */ :root{ background:lightblue; } /* 空元素 */ li:empty{ display:none; } </style> </head> <body> <a href="#cyy">cyy</a> <ul> <li>111</li> <li></li> </ul> <main> <a href="http://www.baidu.com" target="_blank">baidu</a> <input type="text" value="111"> <article> <h1 title id>h1-title-id</h1> <h1 title='cyy'>h1-title</h1> <h1 title='cyyhahaha'>h1-title</h1> <h1 title='cyyhahahacyy'>h1-title</h1> <h1 title='cyyhahaha cyy'>h1-title</h1> <h1 title='cyy hahahacyy'>h1-title</h1> <h1 title='cyy-hahaha cyy'>h1-title</h1> <h2>h2</h2> <aside> aside <h2>aside-h2</h2> </aside> <h2>h2</h2> </article> </main> <div id="cyy">cyy</div> </body> </html>
