CSS选择器
2018-01-09 本文已影响3人
王小贱_ww
- 标签选择器
对于p标签，统一进行处理。就好比：在Android中，我们有一些常用的textview、imageView控件像字体大小、尺寸要一致，我们把它放到style文件里，这里的标签选择器类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
p{
width: 880px;
height: 50px;
background: pink;
color: white;
font-size: 40px;
}
</style>
</head>
<body>
<p>Android开发工程师</p>
<p>前端开发工程师</p>
</body>
</html>
10-1.PNG
- id选择器
id选择器可以根据id属性的值为标签指定样式。如果我只想让其中的一个 p标签指定样式，怎么办？？增加一个id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
#android{
width: 880px;
height: 50px;
background: pink;
color: white;
font-size: 40px;
}
</style>
</head>
<body>
<p id="android">Android开发工程师</p>
<p>前端开发工程师</p>
</body>
</html>
10-2.PNG
- 类选择器
id选择器是 idvalue# 而类选择器是 .className - 通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<p>前端开发工程师</p>
<strong>android开发</strong>
<em>后台开发</em>
</body>
</html>
10-3.PNG
通配符选择器我们把所有的标签字体都设置成红色了，mmp，这是什么操作。在实际应用中，我们要适配各种浏览器。。。。。我们需要剔除浏览器的一些默认设置(统一处理)，例如：
*{
margin: 0;
padding: 0;
}
-
并集选择器
并集选择器由各个选择器通过逗号连接而成的，它为不同的标签设置相同的CSS样式
01.PNG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style type="text/css">
.welcome,#title,div{
font-size: 23px;
color: red;
}
</style>
</head>
<body>
<p class="welcome">第一段内容</p>
<p id="title"> 第二段内容</p>
<div>第三段内容</div>
</body>
</html>
-
标签指定式选择器
标签名.类选择器名 ,,,,,,标签名#ID选择器名
02.PNG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签指定式选择器</title>
<style type="text/css">
p.welcome,p#title{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<p class="welcome">11111111111</p>
<p id="title">222222222222</p>
</body>
</html>
-
后代选择器
后代选择器强调的是”嵌套” div空格.welcome
03.PNG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
div .welcome{
color: red;
}
</style>
</head>
<body>
<div>
<div>
<section>
<p class="welcome">1111111</p>
</section>
</div>
<p class="welcome">22222222222</p>
<p class="welcome">3333333333</p>
</div>
</body>
</html>
- 子选择器
子选择器用于为指定标签的第一代子元素设置样式
div>.welcome{
color: red;
}
只有第一代类名为welcome的类可以设置样式，后代选择器和子选择器的区别是：子选择器仅仅作用于标签的直接后代（第一代），后代选择器作用于所有的子孙后代元素。
