Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css选择器
Blogger Information
Blog 17
fans 0
comment 0
visits 19011
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css选择器
嘬一口啊
Original
623 people have browsed it

简单选择器

  • 选择器的优先级

ID选择器 > class选择器 > 元素(标签)选择器

  • 元素选择器(标签选择器):

以元素或标签作为选择器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>demo</title>
  5.     <meta charset='utf-8' />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <style type="text/css">
  8.         body {
  9.                background-color: lightcyan;
  10.           }
  11.     </style>
  12. </head>
  13. <body>
  15. </body>
  16. </html>
  • 类选择器:

类选择器: 对应着html标签中的class属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>demo</title>
  5.     <meta charset='utf-8' />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <style type="text/css">
  8.           .div_class {
  9.               background:red;
  10.           }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="div_class">这是div_class</div>
  15. </body>
  16. </html>
  • id选择器:

id选择器对应着html中id属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>demo</title>
  5.     <meta charset='utf-8' />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <style type="text/css">
  8.           #div_id {
  9.               color:green;
  10.           }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="div_id">这是div_id</div>
  15. </body>
  16. </html>
  • 多个类复合应用:

同一个元素下有多个属性选择器,在选择这个元素时可以复合使用,便于更进准的找到这个元素

注意:多个复合类选择器中间不能有空格一定要是连着:#div_di.div_class 中间有空格是多个选择器属性选中一个元素:#div_id .div_class(这是div_id下的div_class)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>demo</title>
  5.     <meta charset='utf-8' />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <style type="text/css">
  8.           #div_id.div_class {
  9.               color:green;
  10.           }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="div_id" class="div_class">这是div_id和div_class复合使用</div>
  15. </body>
  16. </html>
  • 层叠样式表:相同元素后面追加的样式会覆盖前面的样式
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>demo</title>
  5.     <meta charset='utf-8' />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <style type="text/css">
  8.           #div_id.div_class {
  9.               color:green;
  10.           }
  12.           //使用这个后面设置的元素
  13.           #div_id.div_class {
  14.               color:red;
  15.           }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="div_id" class="div_class">这是div_id和div_class复合使用</div>
  20. </body>
  21. </html>

上下文选择器

  • 后代选择器

注意第一个参数和第二个参数中间一定要有一个空格

  1. //选择.container 下的所有div记住是所有
  2. .container div {
  3.     color:red;
  4. }
  • 父子选择器
  2. `父子选择器中间以 > 指向子类标签`
  4. //选择body下的子类及别的div记住只是子类的div
  5. body > div {
  6.     color:red;
  7. }
  • 同级相邻选择器

同级相邻选择器以 + 隔开

  1. //选中和当前类属性同级的相邻item类属性元素改变其背景颜色
  2. .item.center + .item {
  3.     background-color: red;
  4. }
  • 同级所有选择器

同级所有选择器以 ~ 隔开

  1. //选中和.item.center同级的所有类属性名为item的元素改变其背景颜色
  2.  .item.center ~ .item {
  3.     background-color: lightsalmon;
  4. }

结构伪类选择器

  • 匹配第一个子元素
  1. //选择.container 下的第一个子元素设置背景颜色
  2. //这里的*可以省略不写
  3. .container > *:first-child {
  4.  `background-color: lightgreen;
  5. }
  6. //选择.container 下的.tem下的第一个子元素设置背景颜色
  7. .container > .item:first-child {
  8.     background-color: blue;
  9. }
  • 匹配最后一个子元素
  1. //选择.container 下的最后一个子元素设置背景颜色
  2. .container > :last-child {
  3.     background-color: lightpink;
  4. }
  • 选择指定的第几个子元素

这里的索引是从1开始的

  1. //选择.container下的第三个子元素
  2. .container > :nth-child(3) {
  3.      background-color: limegreen;
  4. }
  • 选择偶数

偶数用even表示

  1. //选择.container下的所有索引为偶数的元素设置背景颜色
  2. .container > :nth-child(even) {
  3.     background-color: limegreen;
  4. }
  6. //这是另一种选择索引为偶数的元素(建议用上面的)
  7. .container > :nth-child(2n) {
  8.     background-color: limegreen;
  9. }
  • 选择奇数元素

奇数用odd表示

  1. //选择.container下的所有索引为奇数的元素设置背景颜色
  2. .container > :nth-child(odd) {
  3.     background-color: salmon;
  4. }
  6. //这是另一种选择索引为奇数的元素(建议用上面的)
  7. .container > :nth-child(2n-1) {
  8.     background-color: lightsalmon;
  9. }
  • 从指定位置开始选择剩下的元素
  1. // 选择.container下的item下的第四个子元素开始剩下的所有子元素
  2. .container > .item:nth-child(n + 4) {
  3.     background-color: limegreen;
  4. }
  • 只取前三个元素
  1. // 选择.container下的item下的前三个子元素
  2. .container .item:nth-child(-n + 3) {
  3.     background-color: salmon;
  4. }
  • 只取最后三个元素
  1. //选择.container下的item下的最后三个子元素
  2. .container .item:nth-last-child(-n + 3) {
  3.     background-color: salmon;
  4. }
  • 倒数查找指定的元素
  1. //选择.container下的item下的倒数第二个子元素
  2. .container .item:nth-last-child(2) {
  3.     background-color: yellow;
  4. }
  • 分组结构伪类选择器

元素按类进行分组[相同的类名、相同标签分为一类]

  1. // .container下的所有div设置背景颜色[container下的所有div为一类]
  2. .container div {
  3.     background-color:green;
  4. }
  • 元素按照类型进行分组,在分组中根据索引进行选择
  1. //选择.container下的div分组的最后一个div元素
  2. .container div:last-of-type {
  3.     background-color: violet;
  4. }
  6. // 选择container下的span分株的第三个span元素
  7. .container span:nth-of-type(3) {
  8.     background-color: violet;
  9. }
  11. //选择container下的span分组下的前三个span标签元素
  12. .container span:nth-of-type(-n + 3) {
  13.     background-color: red;
  14. }
  16. //选择 container下的span分组的最后两个span标签元素
  17. .container span:nth-last-of-type(-n + 2) {
  18.     background-color: violet;
  19. }

伪类于伪元素选择器

伪类前面可以是单冒号,伪元素前面必须是双冒号

  • 伪类
  1. :target伪类:用来匹配文档中uri中某个标志符的目标元素
  3. 具体来说，uri中的标志通常会包含一个#，后面带有一个标志符名称，如#login-form,:target就是匹配ID为"login-form"的目标元素
  5. //获取这里的login-form
  6. 例:<a href="#login-form">点击</a>
  1. :focus伪类:用来当获取焦点的时候起作用
  3. 例:
  4. //当input标签获取焦点的时候获取焦点的input标签给变背景颜色
  5. input:focus {
  6.     background-color: yellow;
  7. }
  1. ::selection伪类: 设置选中文本的前景色与背景色
  3. 例:
  4. // input输入框里的文本被选中的时候个便便被选中的文本背景色
  5. input::selection {
  6.     color: white;
  7.     background-color: red;
  8. }
  1. :not()伪类: 用于选择不满足条件元素(就是剔除一些不想要的元素)
  3. 例:
  4. // 这里剔除了.lisi下的第三个子元素给剩余的子元素颜色改变
  5. .list > :not(:nth-of-type(3)) {
  6.     color: red;
  7.  }

` 用伪类:target实现表单的弹出

:target: 必须id配合，实现锚点操作

  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.     <title>伪类与伪元素</title>
  7.     <style>
  8.       #login-form {
  9.         display: none;
  10.       }
  11.       /* :target: 必须id配合，实现锚点操作 */
  12.       /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
  13.       #login-form:target {
  14.         display: block;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <!-- <a href="#login-form">我要登录:</a> -->
  20.     <button onclick="location='#login-form'">点击登录</button>
  21.     <form action="" method="post" id="login-form">
  22.       <label for="email">邮箱:</label>
  23.       <input type="email" name="email" id="email" />
  24.       <label for="password">密码:</label>
  25.       <input type="password" name="password" id="password" />
  26.       <button>登录</button>
  27.     </form>
  28.   </body>
  29. </html>
  • 伪元素

伪元素是浏览器自动生成的

伪元素不能被鼠标选中

  1. ::before 伪元素:在元素之前添加内or那个
  3. 例:
  4. //在.list元素前添加内容"购物车"
  5. .list::before {
  6.     content: "购物车";
  7. }
  1. ::after伪元素:在元素之后添加内容
  3. 例:
  4. // 在.list元素后面添加内容"结算中..."
  5. .list::after {
  6.     content: "结算中...";
  7. }

总结

  1. 简单选择器

  2. 上下文选择器

  3. 结构伪类选择器

  4. 伪类和伪元素

Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：总得来说写的非常不错，建议标题改一下，突出文章的重点。
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post