选择器 | CSS3中常见选择器有哪些？

XMX303
273 阅读5分钟

属性选择器，用通配符快速匹配属性范围

使用属性选择器时，需要声明属性与属性值，语法为[att=val]。实例如下：

<style type="text/css">
[id=section1]{
    background-color: yellow;
}
</style>

CSS3中追加了三个属性选择器[att*=val]、[att^=val]、[att$=val]，使得属性选择器有了通配符的概念。各自的详解如下：

通配符作用通配符语法示例代码
向每个att属性中含有（包含开头或结尾）val值的元素赋予设定好的样式[att*=val][id*=section1]{background-color: yellow;}
向每个att属性中开头为val值的元素赋予设定好的样式[att^=val][id^=section1]{background-color: yellow;}
向每个att属性中结尾为val值的元素赋予设定好的样式[att$=val][id$=section1]{background-color: yellow;}

CSS 中的伪类选择器和伪元素选择器

伪类选择器

选择器例子描述
:linka:link匹配所有未被访问的链接
:visiteda:visited匹配所有被访问过的链接
:hovera:hover匹配鼠标悬停其上的元素
:activea:active匹配被点击的链接

伪元素选择器

选择器例子描述
:first-linep:first-line匹配p元素的第一行文字
:first-letterp:first-letter匹配p元素的首字母
:beforea:before向a元素之前插入一些内容
:aftera:after向a元素之后插入一些内容

CSS3 中的伪类选择器和伪元素选择器

结构性伪类选择器

选择器例子描述
:root:root {...}root选择器将样式绑定到页面的根元素中，也就是html元素
:notbody *:not(h1):{...}如果想对某个结构元素使用样式，但是排除这个结构元素下面的子结构元素，让子元素不使用这个样式时，可以使用not选择器
:empty:empty{...}当元素中内容为空白时，获取当前样式
:target:target{...}，页面链接为a.html/#text3 ,时选中id=text3区域页面的超链接指向的区域

子类伪类选择器

选择器例子描述
:first-childli:first-child{...}指向每个列表的第一个li元素的子元素
:last-childli:last-child{...}指向每个列表的最后一个li元素的子元素
:nth-childli:nth-child(odd){...}指向每个列表的第奇数位置的li元素的子元素
:nth-last-childli:nth-last-child(even){...}指向每个列表的倒数的偶数位置的li元素的子元素
:nth-of-typeli:nth-of-type(odd){...}指向第奇数位的li元素，区别于:nth-child，即使li不连续也没关系，这个选择器与父子关系无关
:nth-last-of-typeh2:nth-last-of-type(even){...}指向第偶数位的li元素，区别于:nth-last-child，即使li不连续也没关系，这个选择器与父子关系无关
:only-childli:only-child{...}指定当某个父元素有且只有li一个子元素时才使用的样式

斑马表格示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>使用nth-child对第奇数个、第偶数个子元素使用不同样式示例</title>
<style type="text/css">
li:nth-child(odd){
    background-color: yellow;
}
li:nth-child(even){
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>

循环使用实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>使用nth-child选择器指定项目背景色</title>
<style type="text/css">
li:nth-child(1) {
   background-color: yellow;
}
li:nth-child(2) {
   background-color: limegreen;
}
li:nth-child(3) {
   background-color: red;
}
li:nth-child(4) {
   background-color: white;
}
li:nth-child(4n+1) {
    background-color: yellow;
}
li:nth-child(4n+2) {
    background-color: limegreen;
}
li:nth-child(4n+3) {
    background-color: red;
}
li:nth-child(4n) {
    background-color: white;
}
</style>
</head>
<body>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
<li>列表项目7</li>
<li>列表项目8</li>
<li>列表项目9</li>
<li>列表项目10</li>
<li>列表项目11</li>
<li>列表项目12</li>
</ul>
</body>
</html>

表单伪类选择器

选择器描述用法
:hover当鼠标指针移动到元素上时元素所使用的样式input[type="text"]:hover
:active当元素被激活（鼠标在元素上按下还没松开）时使用的样式-
:focus主要在文本框空间获得焦点并进行文字输入时使用-
:enabled当元素处于可用状态时的样式-
:disabled当元素处于不可用状态时的样式-
:read-only当元素处于只读状态时的样式-
:read-write当元素处于非只读状态时的样式-
:checked当表单中的radio或checkbox处于选取状态时的样式-
:default当页面打开时默认处于选取状态的单选框或复选框空间的样式-
:indeterminate当任何一个单选框都没有被设定为默认选取状态时，整组单选框的样式-
::seletcion指定当前元素处于选中状态时的样式p::selection{...}
:invalid当元素不能通过required或pattern等属性所制定的检查时的样式-
:valid当元素通过了required、pattern等属性所制定的检查时的样式-
:required当元素设置了required属性，成为必填项时的样式-
:optional当元素未设置required属性，为可选项时的样式-
:in-range常用于数字输入器，输入有效值时（大于min且小于max值）的样式-
:out-of-range常用于数字输入器，输入无效值时（大于max或者小于min）的样式-

通用兄弟元素选择器

指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素。

<子元素> ~<子元素之后的同级兄弟元素> {
// 指定样式
}

示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
div ~ p {background-color:#00FF00;}
</style>
<title>通用兄弟元素选择器 E ~ F</title>
</head>
<body>
<div style="width:733px; border: 1px solid #666; padding:5px;">
<div>
    <p>p元素为div元素的子元素</p>
    <p>p元素为div元素的子元素</p>
</div>
<hr />
<p>p元素为div元素的兄弟元素</p>
<p>p元素为div元素的兄弟元素</p>
<hr />
<p>p元素为div元素的兄弟元素</p>
<hr />
<div>p元素为div元素的子元素</div>
<hr />
<p>p元素为div元素的兄弟元素</p>
</div>
</body>
</html>
avatar
文章
阅读
粉丝