经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
玩透 CSS 3 选择器，网页元素任意操作 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:46　　对本文有异议

标签选择器：（范围比较大）

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

h1,h2,p,div...  标签选择器

 

类与ID选择器：

.class 类选择器

#id ID选择器

注意：ID选择器是唯一的，范围比较小，个人不建议使用id来定义样式，建议使用class

 

多类样式声明：

class="class1 class2 class3"

 

结构选择器：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         /* 后代选择器 */
  11.         main article h2{
  12.             color:red;
  13.         }
  14.         /* 直接子元素选择器 */
  15.         main article>h2{
  16.             background:pink;
  17.         }
  18.         /* 兄弟选择器，取后面不取前面 */
  19.         article h1~h2{
  20.             text-decoration: underline;
  21.         }
  22.         /* 紧挨着的兄弟选择器，取后面不取前面 */
  23.         article h1+h2{
  24.             font-size:12px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <main>
  30.         <article>
  31.             <h1>h1</h1>
  32.             <h2>h2</h2>
  33.             <aside>
  34.                 aside
  35.                 <h2>aside-h2</h2>
  36.             </aside>
  37.             <h2>h2</h2>
  38.         </article>
  39.     </main>
  40. </body>
  41. </html>

 

属性选择器：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         h1[title][id]{
  11.             color:red;
  12.         }
  13.         /* 指定属性值 */
  14.         h1[title='cyy']{
  15.            background:pink;
  16.         }
  17.         /* 指定值开始 */
  18.         h1[title^='cyy']{
  19.            text-decoration: underline;
  20.         }
  21.         /* 指定值结束 */
  22.         h1[title$='cyy']{
  23.            font-size:12px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <main>
  29.         <article>
  30.             <h1 title id>h1-title-id</h1>
  31.             <h1 title='cyy'>h1-title</h1>
  32.             <h1 title='cyyhahaha'>h1-title</h1>
  33.             <h1 title='cyyhahahacyy'>h1-title</h1>
  34.             <h2>h2</h2>
  35.             <aside>
  36.                 aside
  37.                 <h2>aside-h2</h2>
  38.             </aside>
  39.             <h2>h2</h2>
  40.         </article>
  41.     </main>
  42. </body>
  43. </html>

 

属性选择器内容值筛选：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         /* 指定值出现在任意位置 */
  11.         h1[title*='cyy']{
  12.             font-size:12px;
  13.         }
  14.         /* 指定值出现在任意位置，独立词两边有空格 */
  15.         h1[title~='cyy']{
  16.             color:red;
  17.         }
  18.         /* 单独的指定值本身，或者后面跟着中划线 */
  19.         h1[title|='cyy']{
  20.             background:pink;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <main>
  26.         <article>
  27.             <h1 title id>h1-title-id</h1>
  28.             <h1 title='cyy'>h1-title</h1>
  29.             <h1 title='cyyhahaha'>h1-title</h1>
  30.             <h1 title='cyyhahahacyy'>h1-title</h1>
  31.             <h1 title='cyyhahaha cyy'>h1-title</h1>
  32.             <h1 title='cyy hahahacyy'>h1-title</h1>
  33.             <h1 title='cyy-hahaha cyy'>h1-title</h1>
  34.             <h2>h2</h2>
  35.             <aside>
  36.                 aside
  37.                 <h2>aside-h2</h2>
  38.             </aside>
  39.             <h2>h2</h2>
  40.         </article>
  41.     </main>
  42. </body>
  43. </html>

 

伪类选择器：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         a:link{
  11.             color:red;
  12.         }
  13.         a:visited{
  14.             color:yellow;
  15.         }
  16.         a:hover{
  17.             color:green;
  18.         }
  19.         a:active{
  20.             color:orange;
  21.         }
  23.         input:focus{
  24.             background:yellow;
  25.             outline:none;
  26.         }
  27.         input:active{
  28.             background:pink;
  29.         }
  30.         input:hover{
  31.             color:red;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <main>
  37.         <a href="http://www.baidu.com" target="_blank">baidu</a>
  38.         <input type="text" value="111">
  39.         <article>
  40.             <h1 title id>h1-title-id</h1>
  41.             <h1 title='cyy'>h1-title</h1>
  42.             <h1 title='cyyhahaha'>h1-title</h1>
  43.             <h1 title='cyyhahahacyy'>h1-title</h1>
  44.             <h1 title='cyyhahaha cyy'>h1-title</h1>
  45.             <h1 title='cyy hahahacyy'>h1-title</h1>
  46.             <h1 title='cyy-hahaha cyy'>h1-title</h1>
  47.             <h2>h2</h2>
  48.             <aside>
  49.                 aside
  50.                 <h2>aside-h2</h2>
  51.             </aside>
  52.             <h2>h2</h2>
  53.         </article>
  54.     </main>
  55. </body>
  56. </html>

 

实际开发过程中建议使用第三方库

 

目标与根伪类以及空元素的处理：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         main{
  11.             height:1000px;
  12.         }
  13.         /* 锚点目标 */
  14.         div:target{
  15.             color:red;
  16.         }
  17.         /* 根元素 */
  18.         html{
  19.             color:yellow;
  20.         }
  21.         /* 根伪类元素 */
  22.         :root{
  23.             background:lightblue;
  24.         }
  25.         /* 空元素 */
  26.         li:empty{
  27.             display:none;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <a href="#cyy">cyy</a>
  33.  
  34.     <ul>
  35.         <li>111</li>
  36.         <li></li>
  37.     </ul>
  38.  
  39.     <main>
  40.         <a href="http://www.baidu.com" target="_blank">baidu</a>
  41.         <input type="text" value="111">
  42.         <article>
  43.             <h1 title id>h1-title-id</h1>
  44.             <h1 title='cyy'>h1-title</h1>
  45.             <h1 title='cyyhahaha'>h1-title</h1>
  46.             <h1 title='cyyhahahacyy'>h1-title</h1>
  47.             <h1 title='cyyhahaha cyy'>h1-title</h1>
  48.             <h1 title='cyy hahahacyy'>h1-title</h1>
  49.             <h1 title='cyy-hahaha cyy'>h1-title</h1>
  50.             <h2>h2</h2>
  51.             <aside>
  52.                 aside
  53.                 <h2>aside-h2</h2>
  54.             </aside>
  55.             <h2>h2</h2>
  56.         </article>
  57.     </main>
  58.     <div id="cyy">cyy</div>
  59. </body>
  60. </html>

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13934470.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号