【CSS选择器大总结】

css选择器总结

css常见选择器

开发中经常需要找到特定的网页元素进行设置样式,此时就会用到各种选择器,我们会涉及到的选择器有:

  • 通用选择器(universal selector)
  • 元素选择器(type selectors)
  • 类选择器(class selectors)
  • id选择器(id selectors)
  • 属性选择器(attribute selectors)
  • 组合选择器(combinators)
  • 伪类(pseudo-classes)
  • 伪元素(pseudo-elements)

❤❤❤具体的使用和效果,让我的猪宝们一起来探索吧:❤❤❤

1.通用选择器:一般用来给所有元素作一些通用性的设置。

  • 作用范围:所有的元素都会被选中。
  • 应用范围:内边距、外边距、重置一些内容。
<style>
body, p, div, h2, span {
      margin: 0;
      padding: 0;
      color: green;
    }
</style>
<body>
  
  <div>你好</div>
  <p>我好</p>

  <div>
    <h2>大家好</h2>
    <p>都好  <span>好极了</span> </p>
  </div>

</body>

2.简单选择器:开发中常用的选择器(括号中对应使用方法)

简单选择器分类:

  • 元素选择器(元素标签的名称)、
  • 类选择器(.类名)、
  • id选择器(#id)(id是唯一的,取名字不可重复);
<style>
    div {
      color: red;
    }

    .zyj {
      color: blue;
    }

    #home {
      color: green;
    }
  </style>
<div>div元素</div>
  <div class="zyj">一个美女</div>
  <div id="home">努力猪</div>

  <p class="zyj">一个P元素</p>

  <h2 id="div">p标签</h2>

3.属性选择器:选择器用于选取带有指定属性的元素。

  • [attribute] 选择器用于选取带有指定属性的元素。
  • [attribute=“value”] 选择器用于选取带有指定属性的元素。
  • [attribute~=“value”] 选择器选取属性值包含指定词的元素。
  • [attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。
  • [attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。
  • [attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。
  • [attribute*=“value”] 选择器选取属性值包含指定词的元素。
    注意:重点在于分辨出属性和值,然后通过公式对其进行引用。
<style>
    [target] {
      color: red;
    }
    [title=h2] {
      background-color: blue;
    }
  </style>
<body>
  
  <div>我是div元素</div>
  <a target="div">hello</a>
  <h2 title="h2">world</h2>
</body>

4.后代选择器:又称为包含选择器,可以选择作为某元素后代的元素。

  • 全选所有的后代:选择器之间用空格分隔;
  • 后代选择器的进一步说明:通常用单个空格(" ")字符表示)组合了两个选择器,如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先(父母,父母的父母,父母的父母的父母等)元素,则它们将被选择。
.home span {
      color: yellow;
      font-size: 40px;
    }
 <div class="home">
    <span>啦啦啦啦</span>  
    <div class="box">
      <p>我是p元素</p>
      <span class="home1">呵呵呵呵</span>
    </div>

    <div class="home-item">
      <div class="item">
        <p>
          <span class="home1">哈哈哈哈</span>
        </p>
      </div>
    </div>
  </div>
  <div class="home-unselected">不会变色</div>

5.子组合器:(>)被放在两个 CSS 选择器之间,它只匹配那些被第二个选择器匹配的元素,这些元素是被第一个选择器匹配的元素的直接子元素。

 .home > span {
      background-color: green;
    }
<div class="home">
    <span>hello</span>
    <span>喜喜</span>  
    <div class="box">
      <p>我是p元素</p>
      <span class="home-item">呵呵呵呵</span>
    </div>
    <span>zyjzyj</span>
    <span class="hei">嘿嘿</span>
    <div class="content">
      <div class="desc">
        <p>
          <span class="home-item">哈哈哈哈</span>
        </p>
      </div>
    </div>
  </div>

**6.兄弟选择器:**分为通用兄弟选择器(~)和相邻兄弟选择器 (+) 。

  • 相邻兄弟选择器: (+) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父 element 的子元素,则第二个元素将被选中。
  • 通用兄弟选择器:(~)将两个选择器分开,并匹配第二个选择器的所有迭代元素,位置无须紧邻于第一个元素,只须有相同的父级元素。
<body>
  <div class="home">
    <div>hello</div>
    <div class="box">world</div>
    <div class="content">a</div>
    <div>beautiful</div>
    <div>universal</div>
    <p>pppppp</p>
  </div>
</body>
<style>
    .box + .content {
      color: red;
    }

    .box ~ div {
      font-size: 30px;
      background-color: blue;
      color: orange;
    }
 </style>

效果:
在这里插入图片描述
7.选择器列表:CSS 选择器列表(,)选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。
选择器列表的分类

  • 并集选择器:在开发中通常为了给多个元素设置相同的样式,两个选择器之间用逗号(,)分割。
    并集选择器的详细解释:当多个选择器共享相同的声明时,它们可以被编组进一个以逗号分隔的列表。选择器列表也可以作为参数传递给一些函数式 CSS 伪类。逗号之前和/或之后可以有空白(字符)。
  • 交集选择器:在开发中精准的选择某一个元素。
<style>
/* 并集选择器 */
    .box1,p,h1 {
      color: red;
      font-size: 40px;
    }
</style>
<body>
<!-- 并集选择器 -->
  <p>我是p元素</p>
  <h1>我是h1元素</h1>
  <div class="box1">我是div1元素</div>
  <div class="box2">我是div2元素</div>
  <br>我是脑title</br>
</body>

在这里插入图片描述

/*交集选择器*/
<style>
    div.box {
      color: green;
    }
</style>
<body>
<!--交集选择器-->
  <div class="box">我是div元素</div>
  <p class="box">我是p元素</p>
</body>

在这里插入图片描述
伪类和动态伪类和伪元素的说明见文章添加链接描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python中的CSS选择用于在HTML文件中选择特定的元素并为其添加样式。使用CSS选择可以更精确地选择目标元素并设置样式。在Python中,可以使用第三方库如BeautifulSoup或lxml来解析HTML文件并使用CSS选择进行元素选择。 在Python中使用CSS选择的一种常见方法是使用BeautifulSoup库。该库提供了一个方法`select()`,可以使用CSS选择选择HTML元素。例如,要选择所有具有class为"my-class"的div元素,可以使用以下代码: ``` from bs4 import BeautifulSoup html = """ <div class="my-class">This is a div with class "my-class".</div> <div>This is a div without class.</div> """ soup = BeautifulSoup(html, "html.parser") divs = soup.select("div.my-class") for div in divs: print(div.text) ``` 这将输出: ``` This is a div with class "my-class". ``` 在上面的例子中,我们首先创建了一个HTML字符串,然后使用BeautifulSoup库解析HTML。然后,使用`select()`方法选择所有具有class为"my-class"的div元素,并打印它们的文本内容。 除了BeautifulSoup,还有其他一些库可以在Python中使用CSS选择,如lxml和pyquery等。它们的使用方式略有不同,但基本原理是相似的。 总结起来,Python中的CSS选择是一种用于选择HTML元素并为其添加样式的方法。可以使用第三方库如BeautifulSoup来实现CSS选择的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [python学习 day47之CSS选择](https://blog.csdn.net/wuzeipero/article/details/108622643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS样式与选择(Python)](https://blog.csdn.net/qvqqv/article/details/130181076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值