CSSDay02 组合选择器

最新推荐文章于 2023-03-16 11:53:44 发布

'"<>{{7*7}}

最新推荐文章于 2023-03-16 11:53:44 发布

阅读量949

点赞数

分类专栏： # PHP

本文链接：https://blog.csdn.net/weixin_43415644/article/details/87927503

版权

PHP 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

把基本选择器通过特殊符号串在一起,具有特定意义。

分组选择器

/*
div{
    background:green;
    color: blue;

}
p{
    background: green;
    font-size: 50px;
    color: blue;
}*/
/*分组选择器  多个标签选择器通过 ，来隔开
 div，p，ul 可以简化代码
*/

div,p{
    background:green;
    color: blue;
}
p{
   font-size: 50px;
}

嵌套选择器

/*嵌套选择器
多个标签选择器用空格隔开
div p  表示：嵌套在div中的p标签（包括间接嵌套）
*/

div p{
   background-color: brown;
   color:rebeccapurple;
   font-size:50px;


}

子选择器

/*子选择器
div>p  直接父标签为div的p

*/
div>p{
    background-color: brown;
    color:rebeccapurple;
    font-size:50px;
 
 
 }

相邻同级选择器

/*
div+p  表示和div同一级别的p

*/
div+p{
    background-color: brown;
    color:rebeccapurple;
    font-size:50px;
 
 
 }

属性选择器

p[title]{/*对应有title属性的p*/
  background:green;
  color:red;
  font-size:50px;
}

p[title=qiuqiu2]{/*对应title属性为qiuqiu2的p*/
    background:blue;
}
p[title~=qiuqiu]{/*对应title属性的值中包含有qiuqiu的*/
 background: gold;   
}
p[title^=qiuqiu]{/*对应title属性的值是以qiuqiu开始的*/

background: darkmagenta;
}
p[title$=qiuqiu]{/*对应title属性的值是以qiuqiu结尾的*/
    background: rgb(13,45,42)
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="2.css">
    <style>
    div{
        background:green;
    }
    
    </style>
    
</head>
<body>
    <div><p title="qiubazi">操逼操到天亮</p></div>
    <p title="qiuqiu2">逍遥法外无常</p>
    <p title="ccc qiuqiu ccc">起床看不见光</p>
    <p title="qiuqiu ccc">独坐床上彷徨</p>
    <p title="1 qiuqiu">余生去向何方</p>
    <p>我心暗自悲伤</p>
    <p>美女令人心慌</p>
    <p>裤子太窄勒档</p>
</body>
</html>

伪元素选择器

伪元素：我们自己没哟写就TM存在的元素

真元素：我们自己写的元素

每一个标签都会被偷偷在标签中加上两个伪元素：（你丫看不见）

开始：before

结束：after

块元素的伪标签：

第一个字母：first-letter

第一行：first-line

p[title]{/*对应有title属性的p*/
  background:green;
  color:red;
  font-size:50px;
}

p[title=qiuqiu2]{/*对应title属性为qiuqiu2的p*/
    background:blue;
}
p[title~=qiuqiu]{/*对应title属性的值中包含有qiuqiu的*/
 background: gold;   
}
p[title^=qiuqiu]{/*对应title属性的值是以qiuqiu开始的*/

background: darkmagenta;
}
p[title$=qiuqiu]{/*对应title属性的值是以qiuqiu结尾的*/
    background: rgb(13,45,42)
}
p::before{
    content:"你的黄湿已被修改 ";/*相当于<before>你的黄湿已被修改</before>*/

}
p::after{
    content:" 好湿好湿";/*p文字的属性伪标签会继承*/
}
p::first-letter{
    color:red;
    font-size: 100px;
}

伪类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="2.css">
    <style>
    div{
        background:green;
    }
    
    </style>
    
</head>
<body>
    <div><p title="qiubazi">操逼操到天亮</p></div>
    <p title="qiuqiu2">逍遥法外无常</p>
    <p title="ccc qiuqiu ccc">起床看不见光</p>
    <p title="qiuqiu ccc">独坐床上彷徨</p>
    <p title="1 qiuqiu">余生去向何方</p>
    <p><!--<before> -->
        我心暗自悲伤
        <!--<after>-->
    </p>
    <p>美女令人心慌</p>
    <p>裤子太窄勒档</p>

    
</body>
</html>

CSS背景使用实例

p[title]{/*对应有title属性的p*/
  color:red;
  font-size:50px;
}

p[title=qiuqiu2]{/*对应title属性为qiuqiu2的p*/

}
p[title~=qiuqiu]{/*对应title属性的值中包含有qiuqiu的*/ 
}
p[title^=qiuqiu]{/*对应title属性的值是以qiuqiu开始的*/
}
p[title$=qiuqiu]{/*对应title属性的值是以qiuqiu结尾的*/
}
p::before{
    content:"~";/*相当于<before>你的黄湿已被修改</before>*/

}
p::after{
    content:"~";/*p文字的属性伪标签会继承*/
}
p::first-letter{
    color:red;
    font-size: 100px;
}
body{
    /*
 background-color: darkgoldenrod;
 background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551198678904&di=7c8f86efce31377e1afec6033faa2815&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Ffeed%2Fpic%2Fitem%2F1e30e924b899a9019a9d55c411950a7b0308f59c.jpg');
/* background-repeat:repeat-x;只沿着x轴平铺*/
/* background-repeat:no-repeat;/*不平铺*/
 /*background-position:100px 100px;/*(x,y)坐标，页面左上角为原点*/
 /*background-position:50% 50%;/*位于x轴50%的地方，y轴50%的地方*/
/*
x:left center right
y:top center bottom

*//*
background-position: center right;
background-attachment: fixed;/*使页面滚动的时候，图片固定在上面*/

/*background：color image repeat attachment position*/
background:darkgoldenrod url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551198678904&di=7c8f86efce31377e1afec6033faa2815&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Ffeed%2Fpic%2Fitem%2F1e30e924b899a9019a9d55c411950a7b0308f59c.jpg") no-repeat fixed center right;


}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="2.css">
    <style>
    div{
        
    }
    
    </style>
    
</head>
<body>
    <div><p title="qiubazi">操逼操到天亮</p></div>
    <p title="qiuqiu2">逍遥法外无常</p>
    <p title="ccc qiuqiu ccc">起床看不见光</p>
    <p title="qiuqiu ccc">独坐床上彷徨</p>
    <p title="1 qiuqiu">余生去向何方</p>
    <p><!--<before> -->
        我心暗自悲伤
        <!--<after>-->
    </p>
    <p>美女令人心慌</p>
    <p>裤子太窄勒档</p>


</body>
</html>

CSS字体实例的多种变换


body{
    font-family: "微软雅黑","Microsoft YaHei";/*如果系统里有第一个字体，就用第一个，如果么有就用第二个*/
    font-size: 30px;/*字体的高度*/
    font-weight:900;/*100~900 9个级别，字体粗体*/
    /*normal lighter bold*/
    font-style:normal;/*italic 斜体*/
简写：
   font：style weight size（字号）/line-height（行高） font-family 
至少要有 font：size（字号） font-family
}

CSS文本的实例

/*空格的距离：word-spacing：0px*/
/*direction：ltr；left to right*/
/*text-decoration:none 不划线
 line-through 删除线
 overline;上划线
 underline; 下划线*/
/*
文字对齐方式：
text-align:
center居中对齐
left左对齐
right右对齐
justify 两端对齐


只要是块元素，就一定能设置宽高；
text-indent:设置缩进
英文大小写字母
text-transform:uppercase;全部大写
lowercase;全部小写
capitalize；首字母大写


*/
img{
    width: 200px;
    /*垂直对齐 top center bottom */
    vertical-align: top;
    float:left;/*使文字围绕图片*/
    
}

p{
   text-decoration: line-through;/*删除线*/
   text-align: left;
   text-indent: 60px;
   /*
  
   width: 250px;1.设置容器宽度低于文字的宽度
   white-space: nowrap;2.不包裹，即让文字撑出容器
   overflow:hidden;3.将撑出部分隐藏
   text-overflow:ellipsis;4.将隐藏文字替换成省略号*/
   background: yellow;
   text-transform: capitalize;

}
.txt1{
    text-align:justify;
    text-decoration: overline;/*上划线*/
    text-transform: uppercase;
    /*字符间距*/
    /*letter-spacing: 0px;/*没有距离*/
    /*word-spacing: 10px;
    direction: rtl;/*表示文字右对齐*/

}
.txt2{
    text-align:right;
    text-decoration: underline;/*下划线*/
    letter-spacing:-5px;
    word-spacing: -10px;

}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="2.css">
    <style>
    div{
        
    }
    
    </style>
    
</head>
<body>
  这是一段字
  <br>
  <p>hello world</p>
  <p class="txt1">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551279036211&di=0ef60c102ecdf0164e8944a80826cfc0&imgtype=0&src=http%3A%2F%2Fimg2.gomein.net.cn%2Fimage%2Fbbcimg%2Fproduction_image%2Fnimg%2F20150523%2F15%2F8006201393%2F116805426_800.jpg" alt="小米8">
    hello world 看看我的字符间距密不密
  </p>
  <p class="txt2">hello world 我的字符间距为负哦</p>    

</body>
</html>

与超链接相关的CSS设置


/*
a标签的伪类
初始状态
被访问的状态
鼠标移动上去的状态
鼠标点击时的状态


*/
a:link{
    color:blue;
}
a:visited{
    color:yellow;
}
a:hover{
    color:red;
    font-size: 30px;
}
a:active{
    color:green;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="2.css">
    <style>
    div{
        
    }
    
    </style>
    
</head>
<body>
 <a href="#1">这是第一个链接</a>
 <br>
 <br>
 <a href="#1">这是第二个链接</a>

</body>
</html>

ul{
  list-style-type:none;
}

/*
ul：
none:不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
demical：阿拉伯数字
ol：
lower-alpha：小写英文字母
upper-alpha:大写英文字母
lower-roman:小写罗马数字
upper-roman:大写罗马数字
不需要记 最常用的是none
*/

li{
background-image: url("timg.jpg");
height: 50px;
background-repeat: no-repeat;
color:white;


}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="2.css">
    <style>
    div{
        
    }
    
    </style>
    
</head>
<body>
  <ul>
    <li>第一章</li>
    <li>第二章</li>
    



  </ul>

</body>
</html>

'"<>{{7*7}}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSSDay02 组合选择器

把基本选择器通过特殊符号串在一起,具有特定意义。分组选择器/*div{ background:green; color: blue;}p{ background: green; font-size: 50px; color: blue;}*//*分组选择器多个标签选择器通过，来隔开 div，p，ul 可以简化代码*/di...
复制链接

扫一扫

专栏目录