选择器：
1.后代选择器
：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/*1.后代选择器
/*注：某个元素的后面 祖爷爷 爷爷 爸爸 儿子*/
body p{
background: yellow;
}
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<h1>我是h1</h1>
<ul>
<li>
<p>儿子1</p>
</li>
<li>
<p>儿子2</p>
</li>
<li>
<p>儿子3</p>
</li>
</ul>
</body>
</html>
2.子代选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/* 2.子代选择器*/
body>p{
background: yellow;
}
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<h1>我是h1</h1>
<ul>
<li>
<p>儿子1</p>
</li>
<li>
<p>儿子2</p>
</li>
<li>
<p>儿子3</p>
</li>
</ul>
</body>
</html>
3.相邻兄弟选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
.active+p{
background: antiquewhite;
}
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<h1>我是h1</h1>
<ul>
<li>
<p>儿子1</p>
</li>
<li>
<p>儿子2</p>
</li>
<li>
<p>儿子3</p>
</li>
</ul>
</body>
</html>
4.通用选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/* 4.通用选择器*/
/*注：当前选择元素向下所有的兄弟元素*/
.active~p{
background: antiquewhite;
}
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<h1>我是h1</h1>
<ul>
<li>
<p>儿子1</p>
</li>
<li>
<p>儿子2</p>
</li>
<li>
<p>儿子3</p>
</li>
</ul>
</body>
</html>
/* 5.结构伪类选择器*/
/* 5。1 ul的最后一个子元素,不使用class和ID选择器*/
/*ul li:last-child{*/
/* background: yellow;*/
/*}*/
/* 5.2 ul的第一个子元素，不使用class和ID选择器 */
/* ul li:first-child{*/
/* background: red;*/
/* }*/
/* 5.3 选中p1：定位父元素，选择当前的p的第一个元素
选择当前P元素的父级元素，选择父级元素的第一个，并且是当前元素才生效*/
/*p:nth-child(2) {*/
/* background: yellow;*/
/*}*/
属性选择器：
<p class="demo">
<a href="
https://www.baidu.com
" class="link item first" id="first">1</a>
<a href="" class="link item active" id="test">2</a>
<a href="image/123.html" class="link item active">3</a>
<a href="image/123.png" class="link item">4</a>
<a href="image/123.jpg" class="link item">5</a>
<a href="adc" class="link item">6</a>
<a href="/a.jpg" class="link item">7</a>
<a href="abc.doc" class="link item">8</a>
<a href="abcd.doc" class="link item last">9</a>
</p>
<style>
.demo a{
float:left;
display: block;
height: 50px;
width: 50px;
border‐radius: 10px;
background: yellow;
text‐align: center;
color: red;
text‐decoration: none;
margin‐right: 5px;
font:bold 20px/50px Arial;
}
</style>
/*
属性选择器：属性名=属性值（正则表达式）
a[]{
}
*/
a[id]{
background: red;
}
a[id=first]{
background: yellowgreen;
}
/*
class中有link的元素的
*=:包含等于
=：绝对等于
*/
a[class*="link"]{
background: fuchsia;
}
/*选中href中的以https开头的元素*/
a[href^=https]{
background: slateblue;
}
/*选中href中的以png结尾的元素*/
a[href$=png]{
background: #4158D0;
}
-
span标签
重点突出的文字，使用
span
标起来
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title{
font-size: 100px; /*设置字体*/
}
</style>
</head>
<body>
欢迎学习
<span id="title">java</span>
</body>
</html>
2.字体的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
text-align: center; /*排版居中*/
}
.p1{
text-indent:1em;
text-decoration: underline; /*下划线*/
/* */
line-through 中划线
*/
}
.p2{
background: yellow;
height: 50px;
line-height: 20px;
}
</style>
</head>
<body>
<h1>java</h1>
<p class="p1">
Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，
因此Java语言具有功能强大和简单易用两个特征。
Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 。
</p>
<p class="p2">
Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 。
Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。
</p>
</body>
</html>
扫一扫
3789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
