css-选择器

最新推荐文章于 2024-09-10 22:55:28 发布
最新推荐文章于 2024-09-10 22:55:28 发布
阅读量342 收藏 1
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45838066/article/details/123319937
版权

(1) 在html中使用样式#

  1. 内联样式
  2. 内部样式
  3. 外部样式

1-2内联样式和内部样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <style>
        /* 内部样式 */
        .box {
           color: green;
           font-size: 30px; 
        }
    </style>
</head>

<body>
    <!-- 内联样式 -->
    <div style="border:1px solid;color:red;">
        内联样式
    </div>

    <div class="box">
        内部样式
    </div> 

</body>
</html>

3 外部样式

<!-- demo.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <link rel="stylesheet" href="./demo.css">
</head>

<body>
    <!-- 内联样式 -->
    <div style="border:1px solid;color:red;">
        内联样式
    </div>

    <div class="box">
        内部样式
    </div> 

</body>
</html>

<!-- demo.css -->
.box {
	border:1px solid red;
	color: red;
}

(2) 几个简单的css样式#

  1. border 边框
  2. width, height 宽高
  3. Background-color 背景颜色
  4. font-size 字体大小
<!DOCTYPE html>
<html lang="en">
<style>
  div {
    border: 1px solid;
    font-size: 30px;
    width: 300px;
    height: 300px;
    background-color: grey;
  }
</style>
<body>
  <div>
    我爱web
  </div>
</body>
</html>

(3) 元素选择器#

常用选择器

  1. 元素选择器
  2. id选择器
  3. 类选择器
  4. 群组选择器
  5. 后代选择器
  6. 子代选择器
  7. 兄弟选择器
  8. nth(n) 选择器
  9. :first-child (伪类选择器)
  10. :last-child (伪类选择器css3新增)
  11. :hover (伪类选择器)
  12. :visited (伪类选择器)
  13. :after (伪类选择器)
  14. css3新增选择器

1.元素选择器#

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        div {
            border: 1px solid;
        }
        p {
            background-color: green;
        }

    </style>
</head> 
<body>
    <div>
        div1
    </div> 
    <div>
        div2
    </div> 
    <p>
        pppppppp
    </p> 

    <p>2342342</p>
</body>
</html>

2.id选择器#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        #div1 {
            color: red;
        }
        #div2 {
            color: green;
        } 
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>    

    <div id="div2">
        div2
    </div>      
</body>
</html>

3.class选择器#

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1 {
            color: red;
        }
        .div2 {
            color: blue;
        }
    </style>
</head> 
<body>
    <div class="div1">
        div1
    </div> 
    <div class="div2">
        div2
    </div> 
    <p class="div1">
        pppppppp
    </p> 
</body>
</html>

4.群组选择器#

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box {
            color: red;
        }
        #aa {
            color: red;
        }
        p {
            color: red;
        } */
        /* 以上可以使用群组选择器 */
        .box,#aa,p {
            color: red;
        }

    </style>
</head>

<body>
    <div class="box">
        div1
    </div>

    <div id="aa">
        div2
    </div>

    <p>
        pppp
    </p>
</body> 
</html>

5.后代选择器#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        /* 后代选择器 */
        .box1 .aa {color: red;}
        .box2 li {color: green;} 
    </style>
</head>
<body>
    <ul class="box1">
        <li class="aa">111</li>
        <li class="aa">111</li>
        <li class="aa">111</li>
    </ul>

    <ul class="box2">
        <li class="aa">2222</li>
        <li class="aa">2222</li>
        <li class="aa">2222</li>
    </ul> 
</body>
</html>

6. 子代选择器#

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box>.aa {
      border: 1px solid;
      width: 300px;
    }

    .box>p.aa {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="aa">
      <i>iiiii</i>
      <span>span</span>
    </div> 
    <p class="aa">
      这是p标签
    </p>
  </div>
</body>
</html>

7. 兄弟选择器#

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pp+.span {
      color: red;
    }
  </style>
</head>

<body>
  <h3>把.pp标签的下一个兄弟元素字体变成红色</h3>
  <div class="box">
    <div class="div">div标签</div>
    <p class="pp">p标签</p>
    <span class="span">span标签</span>
    <i>i标签</i>
  </div>
</body>
</html>   

<!-- 一个小技巧:除了第一个li,其它li加上边框 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li+li {
			border-bottom:1px solid #999;
      width: 100px;
    } 
  </style>
</head>
<body>
  <ul>
    <li>1xxx</li>
    <li>2xxx</li>
    <li>3xxx</li>
    <li>4xxx</li>
    <li>5xxx</li>
  </ul>
</body>
</html>

伪类选择器

8. :nth(n) 选择器#

<!DOCTYPE html>
<html lang="en">
 <style>
   .item:nth-child(1) {
     color:red;
   }
   .item:nth-child(2) {
     color:gold;
   }
   .item:nth-child(3) {
     color:greenyellow;
   }
 </style>
<body>
  <div class="box">
    <p class="item">xxxx</p>
    <p class="item">xxxx</p>
    <p class="item">xxxx</p>
  </div>
</body>
</html>

<!-- 奇数和偶数 -->
<!DOCTYPE html>
<html lang="en">
 <style>
   /* 奇数 */
   .item:nth-child(odd) {
     color: blue;
   }
   /* 偶数 */
   .item:nth-child(even) {
     color: red;
   }
 </style>
<body>
  <div class="box">
    <p class="item">xxxx</p>
    <p class="item">xxxx</p>
    <p class="item">xxxx</p>
    <p class="item">xxxx</p>
  </div>
</body>
</html>

9. :first-child (第一个)#

10. :last-child (最后一个 css3新增)#

<!DOCTYPE html>
<html lang="en">
<style>
  li.item:first-child{
    color: red;
  }
  li.item:last-child {
    color: blue;
  }
</style>
<body>

  <ul class="list">
    <li class="item">xxxx</li>
    <li class="item">xxxx</li>
    <li class="item">xxxx</li>
    <li class="item">xxxx</li>
    <li class="item">xxxx</li>
  </ul>
</body>
</html>

11. :hover (移动到元素上)#

12. :visited (访问过)#

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
  /* 未访问的链接 */
  a:link {
    color: #000;
  }
  /* 已访问的链接 */
  a:visited {
    color: #F00;
  }
  /* 鼠标在链接上 */
  a:hover {
    color: #0F0;
  }
  /* 点击元素 */
  a:active {
    color: #00F;
  } 
</style>

<body>
  <a href="http://www.baidu.com" target="_blank">百度</a>
  <a href="http://www.sina.com" target="_blank">新浪</a>
</body>
</html>

13. :after (伪类选择器)#

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      width: 200px;
      height: 200px;
      border: 1px solid;
    }

    p:after {
      content: "疯狂编码中...";
    }
  </style>
</head>
<body>
  <p></p>
</body>
</html>

(4) 选择器优先级#

样式可以继承, 相同的设置会覆盖

  1. 内联样式 > 内部样式 > 外部样式 (就近原则)
  2. !important > id选择器 > class选择器 > 元素选择器 > 通配符(*)选择器
  3. 都是class的情况下, 一般选择器越"长", 优先级越高
  4. !important能不用就不用, 因为用不好对维护会产生影响
<!-- 内联样式 > 内部样式 > 外部样式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <link rel="stylesheet" href="./demo6.css">
    <style>
        /* 内部样式 */
        .box {
            font-size: 30px; 
            border: 1px solid red;
        }
    </style>
</head>
<body> 
    <!-- 内联样式 -->
    <div class="box" style="color: red;font-size: 10px;">
        box 
    </div>

</body>
</html>

<!-- !important > id选择器 > class选择器 > 元素选择器 > 通配符选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      /* 将!important放在样式的后面, 不管它是什么选择器都会优先使用 */
       * {
        color: white!important;
       }
        #box {
            color: blue;
        }
        .box {
            color: green;
        }
        /* 元素选择器 */
        div {
           color: red; 
        } 
    </style>

</head>
<body>
    <div id="box" class="box">
        div
    </div>
</body>
</html>
牛马小先锋
关注
html选择最后一个元素,css 背景图片属性background｜ 最后一个元素last-child选择器及hover样式...
weixin_42565402的博客
06-03 1502
一 css 背景图片background 属性华哥虽说css接触得早，而且在dreamweaver里，也曾写过无数的背景属性样式，可是如果要手写css 背景的代码，总是会忘记顺序和一些参数，别说哥很low，毕竟哥不是天天在玩前端啊。如上图，导航的最后一项，是新增的营销用页面，既然有营销目的，那能否让其更为突出一些，让用户注意到并吸引更多点击呢。比较好的方式是在前面加一个小图标，以突出它的与众不同。...
CSS 选择器
qq_46291038的博客
08-19 539
一：选择器的种类 1.标签选择器 通过标签的名字，修改 css 样式 div{ width:200px; height:300px; } 2.通配符选择器 • 选择页面中所有的元素 *{ margin:0; padding:0; } 3.属性选择器 例子：例如<td>标签的一些符号含义： td[class] 带有class属性的td标签 td[class = ”a”] 类名为“a”的d.
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
weixin_41549971的博客
01-04 1228
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
CSS选择器之div:first-child&div :first-child
weixin_44249574的博客
07-30 1万+
div:first-child&div :first-child的区别 div:first-child属于组合选择器 既满足是div元素，又满足是父级元素的“第一个孩子”，至于父级元素是谁，无所谓。 div :first-child属于后代选择器 必须是div元素的“第一个孩子”，父级元素明确要求是div元素，至于“第一个孩子”是什么元素，无所谓。 div:first-child <!DOCTYPE html> <html lang="en"> <head>
CSS中的选择器总结
前端学习博客
01-15 1991
文章目录一.基本选择器二.结构选择器1.后代选择器,用空格隔开2.子代选择器，用符号`>`表示3.紧邻兄弟元素4.后面兄弟元素三.属性选择器四.伪类选择器1.超链接伪类2.结构伪类:first-child:first-of-type:only-child::only-of-type:nth-child(n):nth-of-type(n)计算数量偶数元素奇数元素:nth-last-child(n):nth-last-of-type(n):not(selector)3.表单伪类表单属性样式表单必选样式表单
CSS选择器
qq_41988669的博客
06-11 704
网页的初级，css选择器
postcss-selector-namespace:使用postcss命名CSS选择器
05-13
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
使用自定义命名空间.a => .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be ...
heyunjiang#Blog#深入css-选择器及权重1
07-25
2.1 权重分配规则 2.2 权重比较规则 2.3 实例 2.1 权重分配规则 2.2 权重比较规则 2.3 实例 3.1 伪类选择器
postcss-selector-parser:CSS选择器解析器，与postcss集成，但不需要它
04-28
postcss选择器解析器 选择器解析器，具有用于处理选择器字符串的内置方法。 安装 使用可以： npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const ...
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm install postcss-css-variables --save-dev 目录 -- ...
CSS选择器 【class选择器】 【id选择器】 【important】【first-child】【nth-child()】【hover】
hangshao_123的博客
10-22 605
1. 通配符选择器 权重是0 但是大于浏览器的默认权重 继承的权重是最小的 2. 标签选择器 权重是1 3. 类选择器 权重是10 4. id选择器 权重是100 5. 结构伪类选择器 权重是10 6. 伪元素选择器 权重是10 7. 链接伪类选择器 权重是10 8. 兄弟选择器 9.！important 权重最大 ...
css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-30 3509
全栈工程师开发手册 （作者：栾鹏） css系列教程1—选择器全解css伪类选择器伪类选择器用于表达在某种状态下的元素。 包括:link、:visited、:focus、:hover、:active、:first-child， 代码如下：a:link{ /*link表示未访问过的超链接*/ } a:visited{ /*vi
【CSS】结构伪类选择器
德仔
06-20 1454
结构伪类选择器 上图中，我们很清楚的看到了那些属于同级，first-of-type 是要找到同级的第一个，所以 div1、div2、div5 是符合要求的，所以“456” “ 789”’ “唯一的”会发生样式变化。 解析：如上代码中，我们给 p 标签和 div 标签都设置了 only-of-type，但是只有 p 标签的起作用了。为什么？因为上述代码中存在多个 div。所以这个选择选择器一定要注意唯一性。...
关于自己在学习div p:first-child的一点笔记
u013713961的博客
04-12 356
div p:first-child 自己在网上看了视频，发现好多讲的都是错的，果然这个东西还是要自己尝试这打一遍代码才能真正明白这个是什么意思。 首先这是我自己举例子时候用的测试代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 选择div的所有后代p
css选择符第二部分(基础用法)
qq_58242432的博客
11-25 1585
css选择符第二部分(基础用法) 四，伪类选择符
CSS: :last-child 与 :first-child的坑
热门推荐
weixin_39015132的博客
07-23 6万+
原文链接 前言 前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器， 但是在实际使用中，要特别需要注意一个点。 开始 :last-child:指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述） 实践 HTML: <div class="div1"&gt...
CSS —— 界面布局
最新发布
m0_73557953的博客
09-10 1064
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
CSS3选择器详解与实例
"这篇内容主要介绍了CSS3选择器的基本概念和使用方法，包括基本选择器、多元素的组合选择器以及CSS2.1属性选择器。" 在网页设计和开发中，CSS（层叠样式表）是用于控制网页元素样式的重要工具。CSS3选择器的引入，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛马小先锋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值