css学习之——选择器

今天我会中彩票

已于 2024-02-27 16:33:24 修改

阅读量882

点赞数 7

分类专栏： web前端共享之css篇文章标签： css 学习前端

于 2024-02-27 16:26:48 首次发布

本文链接：https://blog.csdn.net/weixin_43268050/article/details/136321485

版权

web前端共享之css篇专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css 选择器

css的常见选择器的用法，我自己学习，也方便大家一起学习，如果有不合适的或者不对的请大家批评指正。感谢阅读。

通用选择器

通用选择器的写法 *{ } ，它把元素全部遍历迭代一遍，修改属性配置，很消耗性能。

<style>
   *{
       color:green;
   }
</style>

<body>
    <div>我是div元素</div>
    <p>我是p元素</p>
    <h1>我是h1元素</h1>
</body>

简单选择器

元素选择器

使用元素的名称。

<style>
    p {
        color:green;
    }
    div {
	font-size:50px;
	}
</style>

上面直接使用p标签 和div标签 做css的选择器

类选择器

使用 .类名 ,可以小写、可以使用连接符 - ，可以使用下划线_，可以使用大驼峰、小驼峰。元素使用 class = " "，添加类名。

<style>
  .box{
         color:green;
     }
 </style>
 
 <body>
   <div class="box">我是div元素</div>
   <p class="box">我是p元素</p>
   <h1 class="box ">我是h1元素</h1>
 </body>

id 选择器

使用 #id ,一个HTML文档里面的id值是唯一的，不能重复,id值如果由多个单词组成，单词之间可以用中划线 -、下划线 _ 连接，也可以使用驼峰标识，最好不要用标签名作为id值。

<style>
   #one {
        color:green;
    }
</style>

<body>
  <div id="one">我是div元素</div>
</body>

属性选择器

拥有某一个属性 [att] ：[title] 所有包含 title 属性的都会被选中，属性等于某个值 [att=val]
[title=div] 选中 title 是div 的这个元素。

<style>
  [title] {
    color: green;
  }

  [title=div] {
    background-color: red;
  }
</style>

<body>
  <div>我是div元素</div>
  <div title="div">我也是div元素</div>
  
  <p>我是p元素</p>
  <h1 title="h1">我是h1元素</h2>
</body>

不常用的：
[attr*=val]: 属性值包含某一个值val;
[attr^=val]: 属性值以val开头;
[attr$=val]: 属性值以val结尾;
[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;

后代选择器

所有的后代(直接/间接的后代)，选择器之间以 空格 分割;

直接子代选择器(必须是直接自带)，选择器之间以 > 分割;


<style>
  /* 后代选择器 */
  .container span {
    color: red;
    font-size: 30px;
  }

  /* .container的子代的span元素设置一个背景 */
  .container > span {
    background-color: green;
  }
</style>

<body>
  <div class="container">
  
    <span>我是第一个元素 </span>  
    
    <div class="box">
      <p>我是第二个元素的第一个子元素</p>
      <span class="container-item">我是第二个元素的第二个子元素</span>
    </div>

    <div class="content">
      <div class="desc">
        <p>
          <span class="container-item">3-1-1-1</span>
        </p>
      </div>
    </div>

  </div>

  <!-- 不希望被选中 -->
  <span>我是第四个元素</span>
  <div>
    <span>我是第五个元素的第一个子元素</span>
  </div>

</body>

兄弟选择器

相邻兄弟选择器 + 必须是相邻的
普遍兄弟选择器 ~ 所有的兄弟元素

 <style>
  .box + .content {
     color: red;
   }

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

<body>
	 <div class="home">
	   <div>你的梦想很大</div>
	   <div class="box">努力奔跑</div>
	   <div class="content">努力生活</div>
	   <div>坚强而又自律</div>
	   <div>勇敢而又无畏</div>
	   <p>加油学习吧</p>
	 </div>
 </body>

选择器组

交集选择器

需要同时符合两个选择器条件(两个选择器紧密连接，中间没有空格)

<style>
  div.box {
     color: red;
     font-size: 30px;
   }
</style>

<body>
  
  <div class="box">我是div元素</div>
  <p class="box">我是p元素</p>

</body>

想要选中div那个box 使用 div.box 表示交集选择器

并集选择器

符合一个选择器条件即可(两个选择器以,(逗号)号分割)

<style>
    body, p, h1, h2 {
      color: red;
      font-size: 40px;
    }
</style>

<body>

  <p>我是p元素</p>
  <h1>我是h1元素</h1>

</body>

本文是根据我学习的时候整理的如果有任何表述不对的，或者是一些误会的地方，还挺批评指正。前端菜狗，感谢评论留言，一起学习~~~！！

今天我会中彩票

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
css学习之——选择器

css的常见选择器的用法，我自己学习，也方便大家一起学习，如果有不合适的或者不对的请大家批评指正。
复制链接

扫一扫

专栏目录