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

常见的几种选择器

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选择器组合。
组合选择器只是一种组合形式,并不算是一种真正的选择器,但在实际中经常使用。

  1. 包含(派生选择器)

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

  2. 直接子选择器

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

<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>

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

包含选择器选中的是所有的子元素(也可以是孙子),而直接子选择器只选择子元素(不可以是孙子)

  1. 并列选择器

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

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

在这里插入图片描述

  1. 兄弟选择器

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

具体看一下区别:

<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>

7.伪选择器

见上一次博客发布内容(伪选择器)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值