html选择器

更新时间:2023-04-07 12:04:52 阅读：评论：0

html（7）选择器

1.元素选择器：

直接设置所有的di哪种病人不宜饮茶 v元素的样式

div{}

2.类选择器：

.container{}

3.id选择器:

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

#div1{}

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

<html>  &l士不可以不弘毅任重而道远t;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: agreen;        }                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的第一个孩子2013好看的韩剧的背景颜色

.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

本文发布于:2023-04-07 12:04:50，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/939a48f04ea3da9000dab665b6139e5b.html

本文word下载地址：html选择器.doc

本文 PDF 下载地址：html选择器.pdf

上一篇：著名建筑师的早期作品进入阿什伯顿市场

下一篇：返回列表

标签：选择器元素状态第一个

留言与评论（共有 0 条评论）