hello,时隔一年多,我再次回归了,在之前的公司因为保密协议过于严格,所以一直没敢写博客,还是挺想念博客生活的呢,接下来的日子我将继续学习了。
因为现在是在专科里面带的H5CSS3和c语言课程,所以接下来写的内容可能就更适合初学者,有写错的地方还请大家多多指教。
CSS选择器
CSS中的选择器的种类非常多,并且在CSS3中也新增了一些选择器,使选择器的功能更强大,具体如下。
`这个比较简单就,不截图结果图了
*{
padding: 0;
margin: 0;
}
p{
font-size: 12px;
color: brown;
}
input[value] {
color: brown;
}
input[type="password"] {
background-color: plum;
}
<!-- 属性选择器 -->
<input type="text" value="请输入" />
<input type="text" />
<input type="password" name="" id="" />
结果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css选择器</title>
<style>
.p1,
.p2 {
font-weight: 700;
}
.contain > li {
background-color: bisque;
list-style: none;
}
/* 后代 */
.ohh1 b {
color: red;
}
/* 子代 */
.ohh > i > b {
color: brown;
}
/* 相邻 */
h1 + p {
color: rgb(102, 93, 96);
background-color: blue;
}
h2 ~ p {
color: rgb(238, 188, 205);
background-color: rgb(36, 36, 88);
}
</style>
<!-- <link rel="stylesheet" href="./css/style.css"> -->
</head>
<body>
<p style="color: aquamarine; font-size: 24px">hello</p>
<div class="box">1111</div>
<!-- 属性选择器 -->
<input type="text" value="请输入" />
<input type="text" />
<input type="password" name="" id="" />
<!-- 并集选择器 -->
<div class="p1">最美中国</div>
<div class="p2">我是谁</div>
<!-- 子代选择器 -->
<div class="contain">
<li>锄禾日当午</li>
</div>
<div class="ohh">ohh<i>旱地<b>123</b>干旱2</i></div>
<!-- 后代 -->
<div class="ohh1">ohh1<i>旱地<b>123</b>干旱2</i></div>
<!-- 兄弟选择器 -->
<p>1111</p>
<h1>wwww</h1>
<p>1111</p>
<p>1111</p>
<h2>dddd</h2>
<p>2222</p>
<p>2222</p>
<p>2222</p>
</body>
</html>
结果图有点乱,但是一个一个截图实在是太麻烦了,将就看看吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
background-color: beige;
}
::first-line{
background-color: brown;
}
::first-letter{
color: blue;
}
h1::before{
content: "sasasas";
}
h1::after{
content: "wwwwws";
color: yellow;
}
.container p:first-child{
font-style: italic;
color: azure;
}
.container p:last-child{
font-style: italic;
color: rgb(18, 94, 94);
}
.container p:only-child{
background-color: blueviolet;
color: rgb(63, 24, 24);
}
.container :only-of-type{
background-color: rgb(212, 65, 151);
color: rgb(134, 16, 16);
}
.container p:nth-of-type(2){
font-weight: 800;
color: green;
}
a:link{
background-color: blue;
}
a:visited{
background-color: aqua;
}
a:hover{
background-color: blanchedalmond;
}
a:active{
background-color: blueviolet;
}
input:checked{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>sasasasasasadsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
sdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>sasasasasas</p>
<p>sasasasasas</p>
<a href="#">fdfdfdfdfdfvf</a>
<h1>1111</h1>
</div>
<div class="container">
<p>白日依山尽</p>
<p>黄河入海流</p>
<li>sasas</li>
<p>欲穷千里目</p>
<p>更上一层楼</p>
</div>
<div class="container">
<p>白日依山尽</p>
</div>
<a href="http://www.baidu.com">111111111111</a>
<input type="checkbox">
</body>
</html>
截图如下:
本节小练习:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器的使用</title>
</head>
<style type="text/css">
/* 设置导航栏样式 */
nav {
width: 300px
}
/* 设置导航栏中的每一项的样式 */
li {
background-color: rgba(0, 0, 0,
0.4);
height: 35px;
line-height: 35px;
overflow: hidden
}
/* 设置偶数行背景颜色透明度为0.9 */
li:nth-of-type(2n) {
background-color: rgba(0, 0, 0, 0.5)
}
/* 鼠标悬停时背景颜色为#0099E5 */
li:hover {
background: #0099E5
}
/* 设置超链接的样式 */
a {
text-decoration: none;
display: block;
color: #fff;
height: 35px;
padding: 0 38px
}
</style>
<body>
<nav>
<ul>
<li>
<a href="#">JavaEE教程</a>
</li>
<li>
<a href="#">Android教程</a>
</li>
<li>
<a href="#">PHP教程</a>
</li>
<li>
<a href="#">UI设计教程</a>
</li>
<li>
<a href="#">iOS教程</a>
</li>
<li>
<a href="#">Web前端教程</a>
</li>
<li>
<a href="#">C/C++教程</a>
</li>
</ul>
</nav>
</body>
</html>