通配符选择器和元素选择器
<!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>选择器</title>
<style> *{
margin: 0px; padding: 0px; } </style>
</head>
<body>
<div style="background: aqua;">华为路由器</div>
<p>使用5G技术</p>
<ul>
<li>5G是下一代通信技术</li>
</ul>
</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>选择器</title>
<style> *{
margin: 0px; padding: 0px; } h1{
color: aquamarine; background: blueviolet; } </style>
</head>
<body>
<div style="background: aqua;">华为路由器</div>
<p>使用5G技术</p>
<ul>
<li>5G是下一代通信技术</li>
</ul>
<h1>h1标签</h1>
</body>
</html>
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>选择器</title>
<style> #title,#title2{
color: aqua; } </style>
</head>
<body>
<h1 id="title">我是出镜率很高的h1</h1>
<h2 id="title2">我是出镜率不高的h2</h2>
</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>选择器</title>
<style> /* #title,#title2{ color: aqua; } */ .title{
color:rebeccapurple;} </style>
</head>
<body>
<!-- <h1 id="title">我是出镜率很高的h1</h1> <h2 id="title2">我是出镜率不高的h2</h2> -->
<div class="title">华为5G技术</div>
</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>选择器</title>
<style> /* #title,#title2{ color: aqua; } */ .title{
color:rebeccapurple;} .phone{
font-size: 30px;} p.phone{
color: rosybrown;} </style>
</head>
<body>
<!-- <h1 id="title">我是出镜率很高的h1</h1> <h2 id="title2">我是出镜率不高的h2</h2> -->
<div class="title">华为5G技术</div>
<div class="phone">p40</div>
<div class="phone">mate40</div>
<div>路由器</div>
<div>智慧屏</div>
<p class="phone">honor</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>选择器</title>
<style> /* p[title]{color: skyblue;} */ /* p[title="huawei"]{color: slateblue;} */ /* p[title~="hua"]{color: springgreen;} */ p[title|="hua"]{
color: turquoise;} </style>
</head>
<body>
<p title="hua-wei">华为</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>选择器</title>
<style> /* p[title]{color: skyblue;} */ /* p[title="huawei"]{color: slateblue;} */ /* p[title~="hua"]{color: springgreen;} */ p[title|="hua"]{
color: turquoise;} a:link{
color: red;} a:visited{
color: blue;} a:hover{
color: green;} a:active{
color: pink;} /* LoVe HAte */ </style>
</head>
<body>
<p title="hua-wei">华为</p>
<a href="https://www.huawei.com">华为官网</a>
</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>选择器</title>
<style> span{
color:blue} p span{
color: red;} </style>
</head>
<body>
<div>华为云：<span>HCIA</span></div>
<p>华为云：<span>HCIP</span><span>HCIE</span></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>选择器</title>
<style> span{
color:blue} p > span{
color: red;} </style>
</head>
<body>
<div>华为云：<span>HCIA</span></div>
<p>华为云：<span>HCIP<span>孙子span</span></span><span>HCIE</span></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>选择器</title>
<style> span{
color:blue} /* p > span{color: red;} */ span + span{
color: violet;} div + p{
color: pink;} </style>
</head>
<body>
<div>华为云：<span>HCIA</span></div>
<p>华为云：
<span>HCIP<span>孙子span</span></span>
<span>HCIE</span>
</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>文档</title>
<style> div{
color: blue !important; color: cadetblue; } .title{
color: chartreuse; } #title{
color: cornflowerblue; } div#title{
color: orange;} </style>
</head>
<body>
<div id="title" class="title" style="color: crimson;">华为云</div>
</body>
</html>
京公网安备 11010502036488号