对很多人来说都比较熟悉CSS选择器,对于我们在html里的各种标签,class类名,ID类名都非常熟悉,怎么选择他们来设置样式通过练习也早已熟记于心,今天我们就简单的把选择器做一个总结,方便以后使用
- 元素选择器
- 类选择器
- id选择器
- 通配符选择器
- 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
/*通配符选择器*/
*{
color: green;
}
/*标签选择器*/
p{
color:blue;
}
/*类选择器*/
.special{
color: red;
}
.sterss{
font-weight: bold;
font-size: 20px;
}
/*ID选择器*/
#hello{
color: gray;
}
/*属性选择器-[att]*/
[disabled]{
background-color: #eee;
}
/* 属性选择器-[att=val]*/
/*#nav{} == [id=nav]{}*/
[type=button]{
color: red;
}
/*属性选择器-[att~=val]*/
/*选中所有class属性值为sports的元素*/
/*.sports{}==[class~=sports]{}*/
[class~=sports]{
color: orange;
}
/*属性选择器-[att|=val]*/
[lang|=en]{
color: red;
}
/*属性选择器-[att^=val]*/
[href^="#"]{
color: yellow;
}
/*属性选择器-[att$=val]*/
[href$=pdf]{
color: red;
}
/*属性选择器-[att*=val]*/
[href*="lady.163.com"]{
color: pink;
}
</style>
<body>
<div>
<!-- .classNmae
- .号开头
- classNmae必须以字母开头
- 后跟字母, 数字, - , _
- 区分大小写
- 可以出现多个类名 -->
<p>段落一</p>
<p class="special">段落二</p>
<p class="special sterss">段落三</p>
</div>
<!-- #id
- #
- 字母, 数字, -, _
- id必须以字母开头
- 区分大小写
- 只出现一次 -->
<div id="hello">
Hello World
</div>
<div>
I Love China
</div>
<!-- 属性选择器-[att] -->
<from action="">
<div>
<input disabled type="text" value="张三">
</div>
<div>
<input type="password" placeholder="密码">
</div>
</from>
<!-- 属性选择器-[att=val] -->
<from action="">
<div>
<input type="text" value="文本框">
</div>
<div>
<input type="button" value="按钮">
</div>
</from>
<!-- 属性选择器-[att~=val] -->
<h2 class="title sports">标题</h2>
<p class="sports">内容...</p>
<!-- 属性选择器-[att|=val] -->
<p lang="en">Hello!</p>
<p lang="en-us">Greetings</p>
<p lang="en-au">Goods</p>
<p lang="enfr">Bon</p>
<p lang="cy-en">Gr</p>
<!-- 属性选择器-[att^=val] -->
<div>
<a href="http://www.w3.org">W3C</a>
<a href="#HTML">HTML</a>
<a href="#CSS">CSS</a>
</div>
<!-- 属性选择器-[att$=val]以什么结尾 -->
<a href="http://xxx.doc">word文档.doc</a>
<a href="http://xxx.pdf">pdf文件.pdf</a>
<!-- 属性选择器-[att*=val]包含了某些值 -->
<a href="http://lady.163.com/15.html">女性</a>
<a href="http://lady.163.com/10.html">男性</a>
<a href="http://sports.163.com/12.html">篮球</a>
<a href="http://sports.163.com/16.html">足球</a>
</body>
</html>
选择器效果图
- 伪类选择器
a:link{color:gray} 所有的链接变成灰色(只用于链接)
a:visited{color:red} 访问过的链接样式(只用于链接)
a:hover{color:green} 鼠标滑过链接时的样式
a:active{color:orange} 用户鼠标点击时的样式
:enabled
- input:enabled{} 元素可用的状态
:disabled
- input:disabled{} 元素不可用的状态
:checked
- input:checked{} 单选,复选框
:first-child 第一项
:last-child 最后一个
:nth-child(even) 偶数
:nth-child(3n+1) 表达式选择
:only-child 只有一个子元素
:first-of-type
:lat-of-type
:nth-of-type(even)
:only-of-type
:empty 选中没有子元素的标签
:root html根标签
:target
:lang()
- 伪元素选择器
::first-letter 选中第一个字母
::first-line 选中第一行
::before{content:"before";} 在某个元素之前插入一些内容(当前插入了after)
::after{content:"after";} 在某个元素之后插入一些内容
::selection 应用于被用户选中的内容
- 后代选择器和子选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*后代选择器*/
.main h2{
color: red;
}
/*子选择器*/
.main>h2{
color: green;
}
</style>
</head>
<body>
<div class="main">
<h2>标题一</h2>
<div>
<h2>标题二</h2>
<p>段落一</p>
</div>
</div>
</body>
</html>
- 相邻兄弟选择器和通用兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*相邻兄弟选择器,选择了h2后面面第一个p标签*/
h2+p{
color: red;
}
/*通用兄弟选择器*/
/*选择的是h2后面所有的兄弟节点p标签*/
h2~p{
color: orange;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
<h2>标题</h2>
<p>段落二</p>
<p>段落三</p>
</div>
</body>
</html>
