选择器
1.元素选择器
元素名(标签名){键1:值1;键2:值2;…键n:值n}
元素选择器的特点,所有该元素名的元素都受该效果影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
p {
color: pink;
}
div {
color: purple;
}
</style>
</head>
<body>
<p>人生哪有一路高歌，还不是会有低鸣。</p>
<p>但我们在低鸣时，千万不要忘记我们的雄心壮志。</p>
<p>待我们一鸣惊人时，让世间万人铭记。</p>
<div>人生哪有一路高歌，还不是会有低鸣。</div>
<div>但我们在低鸣时，千万不要忘记我们的雄心壮志。</div>
</body>
</html>
2.类名选择器：就是通过类名来控制样式的改变，那么什么是类名呢？比如
,class里面的就是类名，那么类名在css样式又是怎样被调用呢？代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.fenyun {
color: orange;
}
.fanyou {
color: blue;
}
</style>
</head>
<body>
<div class="fenyun">风带走了云，却带不走我忧伤的心情。</div>
<div class="fanyou">谁能解决这心中的烦忧，罢了，随风去吧！</div>
<div>善！</div>
</body>
</html>
3.ID选择器
ID选择器以井号为前缀，后面为ID名称。
在标签中中定义id属性，然后在里面设置的属性值就是ID名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/index.css" />
</head>
<body>
<div id="IDxuanzeqi">
</div>
</body>
</html>
下面在index.css文件中写入CSS样式
#IDxuanzeqi{
width:100px;
height:100px;
background-color；red;
}
4.属性选择器
使用
属性选择器在css中非常有用,尤其是设置表单的时候
HTML
<input type="time" class="form-control">
.form-control{
height:32px;
border:2px solid red;
&[type="text"]{
background:green;
}
&[type="time"]{
background:red;
}
}
上面[type=xxx]就是属性选择器的写法,
5.关系选择器
E F ：选择E元素的后代元素F（所有后代，包括子类、孙类）
E > F : 选择E元素的直接后代元素（也就是子类）
E + F：选择E元素的第一个弟弟元素F
E ~ F: 选择E元素的所有弟元素F
6.并选择器
将相同的样式放在一起，类名直接用逗号分开
<style type="text/css">
<!--
h2,h3,h4,h5,p
{ /* 并集选择器 */
color:purple; /* 文字颜色 */
font-size:24px; /* 字体大小 */
}
#one,h2.two,.two
{ /* 并集选择器 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
7.通配符选择器
通配符选择器可以选中页面所有的标签
*
写法：*{xxxxxxx}
<body>
你好，北京！！！
<span class="style1">新闻一</span>
<span class="style1">新闻二</span>
<span class="style1">新闻三</span>
<span id="style2">新闻四<span >这是一条很重要的新闻！<span>第二次嵌套span</span></span></span>
</body>
#style2 {
color:green;
font-size:30px;
background-color: silver;
}
#style2 span{
color:yellow;
font-weight:bold;
}
#style2 span span{
color:black;
background-color: silver;
}
s
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
