css选择器的分类

选择器的分类

1、通配符选择器 *

权重:0
符号:*
用法:*{}

<style>
*{
      
background:red;
}
style>

2、标签选择器

权重:10
命名:标签内通过class=“name”
用法:.name{}

<style>
.p2{
      
background:green;
}
style>
<body>
	<p>p1p>
	<p class="p2">p2p>
body>

3、属性选择器

权重:10
用法:

  • [属性]{}(选中该属性对应的所有标签)
  • [属性=“属性值”],选中对应属性值的标签
<style>
       [index]{
      
           background:darkorange;
       }
      [index="a1"]{
      
          background:darkorchid;
      }
style>

4、id选择器

权重:100
用法:

  • 在开始标签里添加id=“name”
  • style内使用#name{}进行选择使用

注意:id选择器和class选择器不同,例如在页面中写了一个id=“name1”,那么这个页面中不允许出现第二个相同的,这个是规定。id=“name1” 是唯一的。

<style>
    #p1{
      
      background:green;  
    }   
style>
<body>
	<p id="p1" class="p1">段落1p>
body>

5、子选择器

权重:组合的选择器之和
连接符:>(权重0)
含义:父子关系,例如下面的div>h1 代表选中div里面的儿子元素,并且是h1的这一类标签

<style>
      div>h1{
      
          background:green;
      }
style>
<body>
	<div class="main">
		<p>p1p>
		<h1>h1h1>
		<div>
			<span>spanspan>
		div>
	div>
body>

6、后代选择器

权重:组合的选择器权重之和
连接符: 空格
含义:后代关系,即无论是儿子还是孙子,只要是后代都可以被选择。

<style>
      div span{
      
          background:green;
      }
style>
<body>
	<div class="main">
		<div>
			<span>spanspan>
		div>
		<span>spanspan>
	div>
body>

7、分组选择器

权重:组合的选择器之和
连接符:逗号,
含义:将相同的代码提取出来,减少冗余

<style>
.box1>p1,.box2{
      
           color:darkorange;
           width:100px;
           height:100px;
           background:green;
}
style>
<body>
	<div class="box1">
		<p>p1p>
	div>
	<p class="box2">box2p>
body>

8、交集选择器

权重:组合的选择器之和
符号:无
含义:多个选择器组合而成

<style>
    .box1.current{
      
        background:green;
    }
style>
<body>
	<div class="box1 current" >box1div>
	<div class="box1">box1div>
	<p class="current">p1p>

9、相邻兄弟选择器

权重:组合的选择器之和
链接符号:+
含义:以下面为例,h1+p 代表的是选中与h1相邻的p标签(注意:向下寻找,下面代码中第一个p标签并不能被选中)

<style>
      h1+p{
      
          background:green;
      }
style>
<body>
	<p>p1p>
	<h1>h1h1>
	<p>p1p>
	<p>p2p>
	<h1>h1h1>
	<div>div1div>
	<h1>h1h1>
	<p>p1p>
	<p>p2p>
body>

10、通用兄弟选择器

权重:组合的选择器之和
连接符号:~
含义:以下面为例,h1~p 代表的是选中h1下面所有的兄弟p标签(注意:向下寻找,下面代码中第一个p标签并不能被选中)

<style>
      h1~p{
      
          background:green;
      }
style>
<body>
	<p>p1p>
	<h1>h1h1>
	<p>p1p>
	<div>box1div>
	<p>p2p>
	<h1>h1h1>
	<div>div1div>
	<h1>h1h1>
	<p>p1p>
	<p>p2p>
body>

11、伪类选择器

a标签的四种状态,它这四种状态有一定的顺序,在网络上被称为“爱恨原则”。 重点记住:hover 即可,其它几个不兼容。

<style>
        a{
      
            font-weight: bold;
            font-size:100px;
        }
        /* 默认链接的文字颜色 */
       a:link{
      
           color:green;
       }
       /* 访问过后的文字颜色 */
       a:visited{
      
           color:gold;
       }
       /* 鼠标滑上 */
       a:hover{
      
           color:hotpink;
       }
       /* 点击链接时候的 */
       a:active{
      
           color:darkcyan;
       }
style>

你可能感兴趣的:(css,html,css3,html5,html,css)