属性选择器
前面章节介绍过 这里重点介绍CSS3新增的几个 主要有以下几个：
- 格式 E[attr^="value"] 选取E元素 适配其中属性attr 并且属性值以value字符开头 进行操作
- 格式 E[attr$="value"] 选取E元素 适配其中属性attr 并且属性值以value字符结尾 进行操作
- 格式 E[attr*="value"] 选取E元素 适配其中属性attr 并且属性值包含value字符 进行操作
结构伪类选择器
主要有以下几个：
- :first-child 选择第一个子元素
- :last-child 选择最后一个子元素
- :nth-child(n)选择第n个子元素
- :only-child 选择父元素有且仅有一个子元素的孩子
- :first-of-type 同级元素第一个兄弟元素
- :last-of-type 同级元素最后一个兄弟元素
- :nth-of-type(n)同级元素中第n个兄弟元素 无论是否包含其它类型同级元素
- :only-of-type 匹配有且仅有一个同类型元素的子元素
- :root 根元素
- :empty 不包含任何子元素或者内容的元素
- :not() 该元素之外的所有元素
- :target 选取页面中某个target元素
UI元素状态伪类选择器
主要有以下几个：一般应用于表单
- :focus 指定元素获得光标焦点时 所设置的样式
- :checked 给所有设置checked选择属性的元素 设置样式
- ::selection 给元素中被选择的网页文本 设置样式
- :enabled 给所有设置enabled可用属性的元素 设置样式
- :disabled 给所有设置disabled不可用属性的元素 设置样式
- :read-write 给所有设置只写属性的元素 设置样式
- :read-only 给所有设置只读属性的元素 设置样式
- ::before 在指定元素之前插入内容
- ::after 在指定元素之前插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3选择器</title>
<style type="text/css">
/* 属性选择器 */
/*选取input元素 适配其中属性type 并且属性值以te字符开头 进行操作*/
p[align^="cen"] {
width: 150px;
height: 40px;
line-height: 40px;
border: 1px solid #f00;
color: #000;
font-size: 20px;
}
/* 选取所有元素 适配其中属性align 并且属性值以ght字符结尾 进行操作 */
[align$="ght"] {
width: 150px;
height: 40px;
line-height: 40px;
border: 1px dashed #0f0;
color: #000;
font-size: 20px;
}
/* 选取所有元素 适配其中属性align 并且属性值包含ef字符 进行操作 */
[align*="ef"] {
width: 150px;
height: 40px;
line-height: 40px;
border: 1px dotted #0f0;
color: #00f;
font-size: 20px;
}
/* 结构伪类选择器 */
ul li {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
list-style: none;
}
/* 第一个子元素 li 设置相关属性 */
/*ul li:first-child {
color: #f00;
border: 1px dotted blue;
}*/
/* 最后一个子元素 li 设置相关属性 */
/*ul li:last-child {
border: 2px dashed skyblue;
border-radius: 10px;
color: #0f0;
}*/
/* 第2个子元素 li 设置相关属性 */
/*ul li:nth-child(2) {
color: #00f;
border: 2px solid green;
border-radius: 5px;
}*/
/* 匹配父元素有且只有一个子元素 */
/*div span:only-child {
color: #f00;
font-size: 20px;
}*/
/* 选择同元素类型的第1个同级兄弟元素 */
div span:first-of-type {
color: #00f;
}
/* 选择同元素类型的最后1个同级兄弟元素 */
div span:last-of-type {
color: #f00;
}
/* 匹配同元素类型的第n个同级兄弟元素 */
div span:nth-of-type(3) {
color: #0f0;
}
/* 匹配父元素中特定类型的唯一子元素 */
.s:only-of-type {
color: blue;
}
:root {
background-color: #999;
}
/* 不包含子元素或者没有内容的元素 进行样式设置 */
div:empty {
width: 100px;
height: 100px;
background-color: #fff;
}
/* 列表中 类名是li2的除外 其它同类型同级元素设置样式 */
ul li:not(.li2) {
font-size: 30px;
}
/* :target选择器一般都是结合锚点链接来使用 */
:target p
{
color:red;
}
/* UI元素状态伪类选择器 一般应用于表单 */
[type*="text"] {
height: 20px;
border: 1px dashed blue;
border-radius: 5px;
/* 去掉默认编辑框外边框样式 */
outline: none;
}
[type*="text"]:focus {
height: 20px;
border: 1px dashed red;
border-radius: 5px;
outline: none;
}
[type*="password"] {
height: 20px;
border: 1px dotted blue;
border-radius: 5px;
outline: none;
}
[type*="password"]:focus {
height: 20px;
border: 1px dotted red;
border-radius: 5px;
outline: none;
}
/* 默认选中状态下的样式 */
[type^="ra"]:checked {
width: 20px;
height: 30px;
}
/* 选中文本样式 */
.s::selection {
color: #fff;
background-color: yellow;
}
/* 编辑框不可用状态样式 用户名框不可用*/
/*[type="text"]:disabled {
background-color: #666;
}*/
/* 编辑框可使用状态样式 密码框可用 */
/*[type$="word"]:enabled {
background-color: red;
}*/
/* 前面插入内容 */
ul li:first-child:before {
content: "小"
}
/* 后面插入内容 */
ul li:last-child:after {
content: "娃"
}
</style>
</head>
<body>
<!-- 属性选择器 -->
<!-- 前面的文章我们已经详细的介绍 这里再次提一下 CSS3中新增的几个 具体用法看前面文章 -->
<!-- 结构伪类选择器 -->
<!-- 前面我们也学过几个 <a>标签的几个伪类选择器 :link{未访问状态} :visited{已访问状态} :hover{鼠标悬停状态} :active{点击一瞬间状态} -->
<!-- UI 元素状态伪类选择器 -->
<a href="#music">音乐</a>
<div id="music">
<p>音乐</p>
</div>
<div class="box1"></div>
<p align="center">段落 中国</p>
<p align="right">段落 文化</p>
<p align="left">段落 博大精深</p>
<ul class="list1">
<li>选项一</li>
<li class="li2">选项二</li>
<li>选项三</li>
<li>选项四</li>
<li>选项五</li>
<li>选项六</li>
<li>选项七</li>
<li>选项八</li>
</ul>
<div>
<span>行内元素1</span><br />
<span>行内元素1.5</span><br />
<p>段落</p>
<span>行内元素2</span><br />
<span>行内元素2.5</span><br />
<p>段落</p>
<span>行内元素3</span><br />
<span>行内元素4</span>
</div>
<div>
<span class="s">内容</span>
</div>
<form class="fr" method="get" action="http:www.baidu.com">
<!-- 只读 readonly="readonly" -->
用户名：<input type="text" readonly="readonly" name="姓名" value="请输入姓名" /><br />
<!-- 只写 readonly="read-write" -->
密 码：<input type="password" readonly="read-write" name="密码" /><br />
性 别：<input id="man" type="radio" name="sex" checked="checked"><label for="man">男</label><input id="woman" type="radio" name="sex"><label for="woman">女</label><br />
爱 好：<input id="music" type="checkbox" checked="checked"><label for="music">音乐</label>
<input id="movie" type="checkbox"><label for="movie">电影</label>
<input id="baseketball" type="checkbox"><label for="baseketball">篮球</label>
<input id="pingpong" type="checkbox"><label for="pingpong">乒乓球</label>
<input id="badminton" type="checkbox"><label for="badminton">羽毛球</label>
</form>
</body>
</html>
