H5CSS3第一课——CSS选择器
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>
head>
<body>
<p style="color: aquamarine; font-size: 24px">hellop>
<div class="box">1111div>
<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>123b>干旱2i>div>
<div class="ohh1">ohh1<i>旱地<b>123b>干旱2i>div>
<p>1111p>
<h1>wwwwh1>
<p>1111p>
<p>1111p>
<h2>ddddh2>
<p>2222p>
<p>2222p>
<p>2222p>
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>Documenttitle>
<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>sasasasasasp>
<p>sasasasasasp>
<a href="#">fdfdfdfdfdfvfa>
<h1>1111h1>
div>
<div class="container">
<p>白日依山尽p>
<p>黄河入海流p>
<li>sasasli>
<p>欲穷千里目p>
<p>更上一层楼p>
div>
<div class="container">
<p>白日依山尽p>
div>
<a href="http://www.baidu.com">111111111111a>
<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>