欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html选择器

程序员文章站 2022-03-06 10:37:20
html(6)选择器1.元素选择器:直接设置所有的div元素的样式div{}2.类选择器:.container{}3.id选择器:是唯一的,无法重名,不利于维护#div1{}4.后代选择器(有空格的) ...

html(7)选择器

html选择器

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