选择器:
1、标签选择器
以标签名开头,如body,div,p,ul,li
div
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
2、类选择器
需对标签取class名,如class="head"
,格式设置以.
+类名
开头。
.head
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
指定特定的HTML元素使用class
p.center
{
text-align:center;
}
3、id选择器
需对标签取id名,以#
加id
名开头,具有唯一性,id="name"
。
#para1
{
text-align:center;
color:red;
}
4、后代选择器
以空格隔开包含关系的元素,用来选择特定元素或元素组的后代。
ul a
{
color: red;
}
5、子选择器
以>隔开父子级元素,作用于子元素的第一个后代。
ul li > a
{
color: red;
}
4,5例子
<ul>
<li>
<a href="#">一级菜单</a>##5 只作用此条
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
6、兄弟选择器
以~隔开,模块名~模块名,修饰~前模块往下的所有兄弟模块
h1 ~ p
{
color:red;
}
7、相邻选择器
以+隔开,模块名+模块名,修饰+前模块往下的相邻的模块,只有一个
h1+p
{
color:red;
}
6,7例子
<p>1</p>
<h1>2</h1>
<p>3</p>#7作用,6作用
<p>4</p>#6作用
<p>5</p>#6作用
8、全局选择器
*
开头,修饰了包含body所有的标签
9、群选择器
修饰大括号前所有的元素
h2, p { color: gray; }
10、属性选择器
以中括号为符号,比如:
修饰属性为type=text的模块:
[type=text]
{
margin:0;
}
11、伪类选择器
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
1 Comment
CSS学习笔记 – xinzipanghuang.home · 2020年8月15日 at 14:35
[…] CSS选择器类型 […]