css选择器

最新推荐文章于 2024-08-16 23:06:16 发布
最新推荐文章于 2024-08-16 23:06:16 发布
阅读量43 收藏
点赞数
分类专栏： 前端 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74618370/article/details/131631937
版权

        1、基本选择器

                1.标签选择器

        p{

        }


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 标签选择器  选中所有的p标签*/
        p {
            color: aqua;
        }

 
    </style>
</head>

<body>
    <p>我是一段文字</p>
    <div id="box1">我是盒子一</div>
    <div class="box2">我是盒子2</div>
    <div class="box2">我是盒子3</div>

    <p>我是一段文字</p>

</body>

</html>

效果图：

 2、id选择器 

#box1{

            }


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
       
        /* id选择器 */
        #box1 {
            color: pink;
        }

     
    </style>
</head>

<body>
    <p>我是一段文字</p>
    <div id="box1">我是盒子一</div>
    <div class="box2">我是盒子2</div>
    <div class="box2">我是盒子3</div>

    <p>我是一段文字</p>

</body>

</html>

效果图：

 3.类选择器：

.box2{
        }


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
    

        /* 类选择器 */
        .box2 {
            color: blueviolet;
        }

      
    </style>
</head>

<body>
    <p>我是一段文字</p>
    <div id="box1">我是盒子一</div>
    <div class="box2">我是盒子2</div>
    <div class="box2">我是盒子3</div>

    <p>我是一段文字</p>

</body>

</html>

效果图：

4.通配符选择器（选中所有的内容）

        *{

        }


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
    

    
        /* 通配符选择器  */
        *{
           background-color: blanchedalmond; 
        }
        
      
    </style>
</head>

<body>
    <p>我是一段文字</p>
    <div id="box1">我是盒子一</div>
    <div class="box2">我是盒子2</div>
    <div class="box2">我是盒子3</div>

    <p>我是一段文字</p>

</body>

</html>

 效果图：

         2.包含选择器
                1.子代选择器

.a>li{

        }


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器   选中亲生儿子*/
        .a>li {
            background-color: pink;
        }

       
    </style>
</head>

<body>

    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>

</body>

</html>

效果图：

 

2.后代选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      

        /* 后代选择器 找到后代所有要找的元素*/
        .a li {
            background-color: blueviolet ;
        }
    </style>
</head>

<body>

    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>

</body>

</html>

效果图：

 

        3.复合选择器

  


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            color: pink;
        }

        p {
            color: pink;
        }

        span {
            color: pink;
        } */
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div>小菜</div>
    <p>坤坤</p>
    <span>鸡哥</span>
    <ul>
        <li>nb</li>
    </ul>
</body>

</html>

效果图：

         4.属性选择器

 type^="te"        以te开头

type$="l"        以l结尾

 type*="e"    type值里边包含e


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            background-color: pink;
        }

        input[type="password"] {
            background-color: aquamarine;
        }

        div[id] {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        /* type^="te"以te开头 */
        input[type^="te"] {
            background-color: red;
        }
        /* type$="l"以l结尾 */
        input[type$="l"] {
            background-color: green;
        }

        /* type*="e"    type值里边包含e */
        input[type*="e"] {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />

    <div id="aquamarine">1</div>
    <div>2</div>


</body>

</html>

  效果图：

      

        5.伪类选择器

link  ： 表示鼠标点击之前，也称为原始状态
hover  ： 表示鼠标悬停状态
active ： 表示鼠标点击状态
visited ： 表示鼠标点击之后状态

<注>这四个选择器有先后之分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        a:link {
            color: aqua;}
       
        a:hover{
            font-size: 40px;
        } 
        a:active{
          background-color: blue;
            font: 80px;
        }
        a:visited{
            color: brown;
        }
        
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
</body>
</html>
       
6.结构伪类选择器

E:first-child   :  匹配父元素中的第一个元素E
E:last-child    :  匹配父元素中的最后一个元素E
E:nth-child(n)   : 匹配父元素中的第n个元素E(odd是单数，even：偶数)
E:nth-last-child(n) :  匹配父元素中倒数第n个元素EE:first-of-type    : 指定类型E中的第一个
E:last-of-type    :  指定类型E中的最后一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
         ul li:first-child {background-color: aqua;
          }
          ul li:nth-child(4)
          {
            font-size: 30px;
          }
          ul li:nth-child(odd)
          {
            font-family: 'Courier New', Courier, monospace;
          }
          p:first-of-type {
              color: red;
                         }

            p:last-of-type {
                color: blue;
                            }

    </style>
</head>
<body>
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
        <li>ads</li>
        <li>xzc</li>
        <li>qwe</li>
        <li>rtu</li>
    </ul>
<h6>1</h6>
<p>2</p>
<h6>3</h6>
<p>4</p>
    
</body>
</html>

效果图:

<注>

e：nth-child（n）选择e元素的第n个子元素，无论它是什么类型。

e：nth-of-type（n）选择e元素的第n个同类型兄弟元素，即与e元素同类型的元素中的第n个。

如下图所示：


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(2) {
            background-color: pink;
        }

        ul li:nth-of-type(4) {
            background-color: rgb(215, 30, 61);
        }

        div span:nth-child(2) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <p>我是文字</p>
        <li>1</li>
        <li>2</li>
    </ul>

    <div>
        <span>1</span>
        <span>kjdscnkdscn</span>
    </div>
</body>

</html>

效果图

        7.伪元素选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li::before {
            content: ">";
        }

        ul li::after {
            content: url();
        }

        /* input::placeholder  表单提示词 */
        input::placeholder {
            color: rgb(62, 226, 56);
        }


        /* ::selection 选中时 */
        ul li:nth-child(4)::selection {
            color: pink;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" placeholder="jdhcndsk">
    <ul>
        <li>caixvkun</li>
        <li>penghan</li>
        <li>zhangjie</li>
        <li>tangxiaofeng</li>

    </ul>
</body>

</html>

效果图：

 

夏炎正好眠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS 选择器
m0_60508194的博客
09-26 1612
可以将CSS选择器分为五类：
css 选择器
qq_42638586的博客
04-10 1416
css选择器
css 选择器 详解
2301_76669854的博客
12-12 1678
使用。
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
css选择器有哪些？
weixin_47450807的博客
04-04 1万+
一、写在前面 css选择器有很多，但是常用到的也就几个，今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 h1:hover {} 2.10 h
CSS选择器分类大全
m0_67859656的博客
11-05 6329
CSS选择器分类大全 基础选择器 一、基础选择器 二、复合选择器 三、CSS3选择器补充： （一）层级选择器： （二）属性选择器 （三）伪类选择器
CSS 选择器优先级
频繁记录
06-13 2152
CSS 选择器优先级
xpath选择器和css选择器的用法
人工智能视觉分析算法学习实践和经验分享。
03-29 4046
目标：xpath选择器和css选择器的用法 前文使用scrapy爬虫框架用到selector选择器了，本文补充两种选择器的使用细节 xpath选择器语法 css选择器语法 掌握常用的xpath选择器和css选择器 知识就像是抽象出来的规则。学习在大脑中分类。 内容：xpath选择器语法 XPath 使用路径表达式来选取 XML或HTML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。 选取节点：xml中的节点是以树结构（二叉树的树）来命名的，和HT
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
四大类CSS选择器的使用说明
01-31
### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型：标签（元素）选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**：用于选取文档中的特定HTML标签。例如： `...
CSS变量的语法、特性和细节
最新发布
读心悦
08-16 276
CSS变量（也称为CSS自定义属性）是一种在CSS中存储值，然后在整个文档中复用的方法。它们提供了一种强大的方式来组织和重用样式值，使得维护和更新样式变得更加容易。下面将详细介绍CSS变量的语法、特性和一些细节。
响应式Web设计：纯HTML和CSS的实现技巧
Caleb的博客
08-16 540
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
css-浮动
m0_73882020的博客
08-16 244
不再保留原先的位置。
CSS 的 position 属性
于坤
08-16 88
CSS 的position属性用于指定一个元素在文档中的定位方式。static（默认值）toprightbottomleftrelativetoprightbottomleftabsolutestaticfixedstickytoprightbottomleft。
JSoup全解析：CSS选择器详解与实战应用
本文档全面介绍了JavaScript库JSoup中的CSS选择器用法，是爬虫开发者不可或缺的参考资料。JSoup利用CSS选择器语法来定位和操作HTML文档中的元素，这对于处理网页抓取、数据提取和网页解析任务至关重要。 **CSS选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值