CSS的进阶
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>css的进阶</title>
</head>
<body>
? ? <!-- 复合选择器
? ? 定义：由两个或多个基础选择器，通过不同的方式组合而成
? ? 作用：更准确，更高效的选择目标元素（标签）
? ? 1.后代选择器：选中某元素的后代元素
? ? 选择器写法：父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开
? ? <div>
? ? ? ? <span>这是在div里面的（儿子）span</span>
? ? ? ? <p>
? ? ? ? ? ? <span>这是在div里面的p里面的（孙子）span</span>
? ? ? ? </p>
? ? </div>
? ? <style>
? ? ? ? div span{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
? ? 2.子代选择器：选中某元素的子代元素（最近的子级）
? ? 选择器写法：父选择器>子代选择器{CSS属性}，父选择器之间用 > 隔开
? ? <div>
? ? ? ? <span>这是在div里面的（儿子）span</span>
? ? ? ? <p>
? ? ? ? ? ? <span>这是在div里面的p里面的（孙子）span</span>
? ? ? ? </p>
? ? </div>
? ? <style>
? ? ? ? /* 子代选择器 ?儿子变红，孙子不变*/
? ? ? ? div > span{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
? ? 3.并集选择器：选中多组标签设置相同的样式
? ? 选择器写法：选择器1，选择器2，...选择器N{CSS}，选择器之间用，隔开
? ? <div>
? ? ? ? <span>这是在div里面的（儿子）span</span>
? ? ? ? <p>
? ? ? ? ? ? <span>这是在div里面的p里面的（孙子）span</span>
? ? ? ? </p>
? ? </div>
? ? <p>p</p>
? ? <span>span</span>
? ? <style>
? ? ? ? p,div,span{
? ? ? ? ? ? color:red;
? ? ? ? }
? ? </style>
? ? 4.交集选择器：选中同时满足多个条件的元素
? ? 选择器写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号
? ? 需求：只想修改 box类的p标签
? ? <p> class ='box'> p标签用了类选择器 box </p>
? ? <p> p标签 </p>
? ? <div class ='box'> div 标签，使用了类选择器 box </div>
? ? <style>
? ? ? ? p.box{
? ? ? ? ? ? color:red;
? ? ? ? }
? ? </style> ? ?
? ? 注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面
? ? -->
? ? <!-- 伪类选择器
? ? 伪类选择器：伪类选择器元素状态，选中元素的某个状态设置样式
? ? 鼠标悬停状态：选择器：hover{CSS属性}
? ? 任何标签都可以设置鼠标悬停的状态
? ? ?a:hover{
? ? ? ? ? ? color: aqua;
? ? ? ? }
? ? 伪类-超链接
? ? 超链接一共有四个状态
? ? :link ：访问前
? ? :visited ：访问后
? ? :hover ：鼠标悬停
? ? :active ：点击时（激活）
? ?
? ? 提示：如果要给超链接设置以上四个状态，需要按LVHA顺序书写
? ? -->
? ? <h2 color="red">红</h2>
? ? <div>
? ? ? ? <span>这是在div里面的（儿子）span</span>
? ? ? ? <p>
? ? ? ? ? ? <span>这是在div里面的p里面的（孙子）span</span>
? ? ? ? </p>
? ? </div>
? ? <p>p</p>
? ? <span>span</span>
? ? <a href="#">超链接</a>
? ? <div class="box">div</div>
? ? <style>
? ? ? ? /* 后代选择器 ?儿子和孙子都变红*/
? ? ? ? /* div span{
? ? ? ? ? ? color: red;
? ? ? ? } */
? ? ? ? /* 子代选择器 ?儿子变红，孙子不变*/
? ? ? ? /* div > span{
? ? ? ? ? ? color: red;
? ? ? ? } */
? ? ? ? /* 并集选择器 */
? ? ? ? /* p,div,span{
? ? ? ? ? ? color:red;
? ? ? ? } */
? ? ? ? /* 伪类选择器 */
? ? ? ? /* a:hover{
? ? ? ? ? ? color: aqua;
? ? ? ? }
? ? ? ? .box:hover{
? ? ? ? ? ? ?div:hover 也可以
? ? ? ? ? ? color: blueviolet;
? ? ? ? } */
? ? ? ?
? ? ? ? /* 超链接伪类选择器 */
? ? ? ? /* 访问前 */
? ? ? ? a:link{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? /* 访问后 */
? ? ? ? a:visited{
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? /* 鼠标悬停 */
? ? ? ? a:hover{
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? ? ? /* 点击时 */
? ? ? ? a:active{
? ? ? ? ? ? color: orange;
? ? ? ? }
? ? </style>
</body>
</html>
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！