2020-12-06常见的几种选择器

最新推荐文章于 2022-03-17 19:41:37 发布

the弄潮儿_

最新推荐文章于 2022-03-17 19:41:37 发布

阅读量661

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/m0_52247852/article/details/110731121

版权

常见的几种选择器

1. 标签名选择器

一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。

2. 类选择器

类选择器以一个点（.)前缀开头，然后跟随一个自定义类名。

具体步骤为：先在标签中定义class属性，然后把该属性值设置为实现定义好的类选择器名称即可。

主要用途：若要为相同的标签赋予不同的CSS样式就应使用类选择器

 <style>
     .name{
      font-size: 2em;
      color: aquamarine;
    }
  </style>
</head>
<body>
  <div class="name">类选择器</div>
  <div></div>
  <div></div>
</body>

3. ID选择器

ID选择器以#号作为前缀，然后是自定义一个ID名。

具体步骤为：先在标签中定义id属性，然后把改属性值设置为事先定义好的ID选择器的名称即可。

<style>
   #name{
    font-size: 3em;
    color: aquamarine;
   }
 </style>
</head>
<body>
  <p id="name">Lorem.</p>
  <p>Ut.</p>
  <p>Sit.</p>
</body>

主要区别
标签选择器针对的是页面上的一类标签。
类选择器可以供多种标签使用。
ID选择器是供特定的标签（一个）。ID是此标签在此页面上的唯一标识。

4.通配符选择器

如果HTML所有元素都需要定义相同的样式，这时就使用通配选择器，一般用星号（*）表示。

 <style>
    *{
      font-size: 2em;
      color: aqua;
    }
  </style>
</head>
<body>
 <div>Lorem, ipsum.</div>
 <div>Nostrum, rerum?</div>
 <div>Fuga, laborum!</div>
 <p>Lorem.</p>
 <p>Nihil?</p>
</body>

5.组合选择器

标签选择器、类选择器和ID选择器是可以组合起来使用的。
一般的组合方式是：标签选择器和类选择器组合，标签选择器和ID选择器组合。
组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。

包含（派生选择器）

父子选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器
直接子选择器

直接子选择器是指定父元素所包含的子元素。子选择器使用尖叫号（>)表示。

<style>
  #header>p{
    font-size: 2em;
    color: brown;
  }
</style>
</head>
<body>
  <div id="header">
    <p>你好！世界</p>
     <div>
       <p>hello,world!</p>
     </div> 
  </div>
  <div class="main">
    <p>人之初</p>
    <p>性本善</p>
  </div>
</body>

在这里插入图片描述
包含选择器和直接子选择器的区别

包含选择器选中的是所有的子元素（也可以是孙子），而直接子选择器只选择子元素（不可以是孙子）

并列选择器

如果两个不同的标签，使用同一个类选择器，则可以使用并列选择器将它们区分开

<style>
    div.main{
      font-size: 2em;
      color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="main">hello,world！</div>
  <p class="main">你好，世界!</p>
</body>

在这里插入图片描述

兄弟选择器

‘+’ 跟 ‘~’
‘+’：表示选中匹配元素下面的第一个兄弟元素
‘~’：表示选中匹配元素下面的所有兄弟元素

具体看一下区别：

<style>
    .h3+p{
      color: red;
    }
  </style>
</head>
<body>
  <p>这是段落标签</p>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
	<h3 class="h3">这是标题标签</h3>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
	<h3>这是标题标签</h3>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
</body>

在这里插入图片描述

<style>
    .h3~p{
      color: red;
    }
  </style>
</head>
<body>
  <p>这是段落标签</p>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
	<h3 class="h3">这是标题标签</h3>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
	<h3>这是标题标签</h3>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
	<p>这是段落标签</p>
</body>

在这里插入图片描述

6.分组选择器

分组选择器通过逗号（，）分隔符进行定义。其基本结构是第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后把前后选择器匹配的元素都选取出来

通过分组选择器可以实现集体声明，将样式表中一致的CSS样式放在一起，然后通过逗号链接这些选择器，减少代码的书写量

<style>
    .content1,.content2{
      width: 100px;
      height: 100px;
    }

    .content1{
      font-size: 2em;
      color: chartreuse;
      background: cornflowerblue;
    }

    .content2{
      font-size: 2em;
      color: coral;
      background: darkgoldenrod;
    }
  </style>
</head>
<body>
  <div class="content1">人之初</div>
  <div class="content2">性本善</div>
</body>