一CSS种常见的几种选择器
前言
-
属性
通过属性的复杂叠加才能做出漂亮的网页 -
选择器
通过选择器找到对应的标签设置样式
二, 下面我们学习几个常见的选择器
<!--常见的几种CSS选择器-->
<html>
<head>
<meta charset="UTF-8">
<title>常见的几种CSS选择器</title>
<!--CSS中的页内样式-->
<style>
/*标签选择器*/
div {
color: red;
font-size: 20px;
}
/*类选择器 : . + 类名即可*/
.William {
color: greenyellow;
font-size: 50px;
}
/*id选择器*/
#first {
color: red;
font-size: 30px;
}
/*并列选择器*/
div,.Alex {
color: blueviolet;
background-color: darkolivegreen;
font-size: 30px;
}
/*复合选择器*/
p.Jhon {
font-size: 30px;
}
/*后代选择器*/
div p {
color: purple;
}
/*直接后代选择器*/
div > p {
color: greenyellow;
background-color: brown;
}
/*相邻兄弟选择器*/
div + p {
color: magenta;
background-color: cyan;
}
/*属性选择器*/
div[name] {
color: red;
font-size: 50px;
}
/*注意:div[name][age]之间是不能有空格的*/
div[name][age] {
color: gold;
font-size: 20px;
}
p[name = "大脸猫"] {
color: white;
background-color: red;
}
</style>
</head>
<body>
<div>小刚哥哥叫Alex</div>
<p class="William">你也可以亲切的叫他William</p>
<div id="first">学习编程是一个持续学习的过程</div>
<div class="Alex">iOS不是你想象的那么难,觉得难说明你没有下功夫</div>
<p class="Jhon">多出去走走,看看学学新知识</p>
<!--后代-->
<div>
<p>div的儿子</p>
<span>
<p>div的孙子</p>
</span>
</div>
<p>div外面的p</p>
<!--直接后代-->
<div>
<p>div的儿子</p>
<span>
<p>div的孙子</p>
</span>
</div>
<p>div外面的p</p>
<!--相邻兄弟-->
<div>
<p>div的儿子</p>
<span>
<p>div的孙子</p>
</span>
</div>
<p>div相邻的p</p>
<p>div相邻的p的兄弟p</p>
<!--属性选择器-->
<div name = "Alex">真的是属性选择器</div>
<div name = "William" age = "22">这是真实年龄</div>
<p name = "大脸猫">大脸猫爱吃鱼</p>
</body>
</html>
- 总结 :
需要主要每种选择的器的页内样式是怎么书写的,表示的是什么意思.需要注意的点是什么.