当前位置： 移动技术网 > IT编程>网页制作>HTML > html选择器

html选择器

2020年07月15日  | 移动技术网IT编程  | 我要评论

html（7）选择器

在这里插入图片描述

1.元素选择器：

直接设置所有的div元素的样式

div{

}

2.类选择器：

.container{

}

3.id选择器:

是唯一的，无法重名，不利于维护

#div1{

}

4.后代选择器(有空格的)

<html>
  <head>
    <style>
      .parent .child{
        
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <h1 class="child">
        
      </h1>
    </div>
  </body>
</html>

5.子元素选择器:

用来找元素,如下图代码是找parent类里面的h1

.parent>h1{

}

6.交集选择器：

要设置既是h1标签又要是child类的样式

h1.child{

}

7.并集选择器：

表示div和h1要有一样的样式

div,h1{

}

8.属性选择器：

<input type="text">

9.伪类选择器：

（1）link表示鼠标没有悬浮上去也没有点击时候的状态；visited表示鼠标点击之后的状态；hover表示鼠标悬浮上去的状态；active表示鼠标点击时候的状态(激活状态)

一定按照link—visited—hover—active顺序写

		a:link {
            color: seagreen;
        }
        
        a:visited {
            color: black;
        }

        a:hover {
            color: rosybrown;
        }
        
        a:active {
            color: red;
        }

（2）第一个：设置container下的div的基数孩子背景颜色，括号里的odd也可以换成1，2，3，4…（odd：偶数；even：奇数）

（3）第二个：设置container下的div的第一个孩子的背景颜色

.container>div:nth-child(odd){
            background-color: sienna;
        }
.container>div:first-child{
            background-color: springgreen;
        }

10.伪元素：

使用来装饰的，是一些非正文内容

<head>
  <style>
.container::before{
		content::before
}
.container::after{
		content::after
}
</style>
</head>
<body>
  <div >
  	123
</div>
</body>

上述代码呈现出来的结果是before 123 after

优先级：优先级计算方法及css特性

本文地址：https://blog.csdn.net/weixin_44713688/article/details/107341584

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网