欢迎光临
我的个人博客网站

玩透 CSS 3 选择器,网页元素任意操作 -cyy


标签选择器:(范围比较大)

* 通配符选择器,全部选择器

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>

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 玩透 CSS 3 选择器,网页元素任意操作 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏