前言
工作中部分选择器总是忘记其具体的含义,这在开发项目时很影响效率,我始终相信每个选择器无论简单复杂,既然诞生了就必定有他的使命,虽然常用的选择器就那么几个就够用了,但系统的掌握所有的选择器还是很有必要的,特别是如果你想开发一个属于的UI框架时,会发现合理的使用选择器,可以大量减少类名的使用。以下产考W3C总结,如有错误还请批评指正。
*
* {
color: red;
}
<p>一段文字</p> <!-- 红色 -->
<span>一段文字</span> <!-- 红色 -->
说明:通配符选择器。选择所有的元素
.class
.intro {
color: red;
}
<p class="intro">一段文字</p> <!-- 红色 -->
说明:类选择器,选者拥有指定类名的元素。选择类名为intro的所有元素
#id
#intro {
color: red;
}
<p id="intro">一段文字</p> <!-- 红色 -->
说明:id选择器,选择拥有id的元素。选择id为intro的元素
p
p {
color: red;
}
<p>一段文字</p> <!-- 红色 -->
说明:标签选择器,选择指定标签的元素。选择所有的p元素
div,p
p,
div{
color: red;
}
<p>hello</p> <!-- 红色 -->
<div>world</div> <!-- 红色 -->
说明:并列选择器,用于同时选择多个指定元素。选择所有的p元素和div元素。
div p
div p{
color: red;
}
<div>
<p>hello</p> <!-- 红色 -->
<p>world</p> <!-- 红色 -->
</div>
说明:子代选择器,选择指定元素内部的元素。选择div元素内部的所有p元素。
div > span
div > span{
color: red;
}
<div>
<p><span>world</span></p>
<span>hello</span> <!-- 红色 -->
</div>
说明:子元素选择器,选择拥有特定父元素的元素。选择父元素为div的span元素。
div + p
div + p{
color: red;
}
<div>
<p>hello</p>
<p>hello</p>
<div><p>world</p></div>
<p>hello</p> <!-- 红色-->
</div>
说明:紧邻选择器,选择指定元素后紧跟的元素(同级)。选择div元素后面紧邻的p元素,他们必须是同一级
[target]
a[target] {
color: red;
}
<a href="https://www.86886.wang" target="_blank">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang">VueBlog</a>
说明:属性选择器,选择拥有指定属性的元素。选中拥有target属性的a元素。
[target="_blank"]
a[target="_blank"] {
color: red;
}
<a href="https://www.86886.wang" target="_blank">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang" target="_self">VueBlog</a>
说明:属性选择器,选者拥有指定属性和值的元素。选择target属性为"_blank"的元素
[title~=VueBlog]
a[title~=VueBlog] {
color: red;
}
<a href="https://www.86886.wang" target="_blank" title="vueblog">VueBlog</a>
<a href="https://www.86886.wang" target="_self" title="Vue VueBlog">VueBlog</a> <!-- 红色 -->
说明:属性选择器,选择属性值包含特定词汇的元素。选择title包含VueBlog的元素,属性值区分大小写,并且是单独的单词。
[title|=Vue]
a[title~=Vue] {
color: red;
}
<a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
<a href="https://www.86886.wang" target="_self" title="VueBlog">VueBlog</a>
说明:属性选择器,选取属性值以指定词汇开头的元素。选择title以Vue开头的元素,可以拥有连字符。
[title^=Vue]
a[title^=Vue] {
color: red;
}
<a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
<a href="https://www.86886.wang" target="_self" title="VueBlog">VueBlog</a><!-- 红色 -->
说明:属性选择器,选取属性值以指定字母开头的元素。选择属性值以Vue开头的元素,这个选择器拥有[attrbute|=value]
选择器的所有功能且更强大。
[title$="Blog"]
a[title$=Blog] {
color: red;
}
<a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a>
<a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
<a href="https://www.86886.wang" target="_self" title="VueBlog">VueBlog</a><!-- 红色 -->
说明:属性选择器,选择属性值以指定字母结尾的元素。选择title属性以Blog结尾的元素。
[title*=Blog]
a[title*=Vue] {
color: red;
}
<a href="https://www.86886.wang" target="_blank" title="Blog system">VueBlog</a> <!-- 红色 -->
<a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
<a href="https://www.86886.wang" target="_self" title="VueBlog">VueBlog</a><!-- 红色 -->
说明:属性选择器,选择属性值包含指定字母的元素。选择title属性包含Blog的元素。
p ~ ul
p ~ ul {
color: red;
}
<div>一个 div 元素。</div>
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ul>
<p>第一段。</p>
<h2>一个列表</h2>
<!-- 红色 -->
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ul>
<h2>另一个列表</h2>
<!-- 红色 -->
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ul>
说明:选择指定元素后的所有元素。选择p元素后的ul元素,他们必须拥有相同的父元素,即在同一级。
a:link
a:link {
color: red;
}
<!-- 红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
说明:选择未访问的a元素。
a:visited
a:visited {
color: red;
}
<!-- 访问过后文字为红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
说明:选择已访问的a元素
a:hover
a:hover {
color: red;
}
<!-- 鼠标悬浮在链接上时为红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
说明:选择鼠标悬浮到的元素。适用于所有元素
a:active
a:active {
color: red;
}
<!-- 鼠标点击时为红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
说明:选择活动链接,即正在点击的链接。
a:focus
a:focus {
color: red;
}
<!-- 获得焦点是为红色 -->
<a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
说明:选择获得焦点的元素。对于a元素来说,通过tab键和点击该元素都可以获得焦点,而:active
选择的是活动链接,即点击那一瞬间。:focus
适用于可获得焦点的元素,如input,a元素
p:first-letter
p:first-letter {
color:red;
}
<!-- H红色-->
<p>Hello World<p>
<!--世字红色-->
<p>世界你好</p>
说明:选择首字母。汉字也能被选中。
p:first-line
p:first-line{
color:red;
}
<!-- 红色-->
<p>Hello World<p>
<!--红色-->
<p>世界你好</p>
说明:选择首行。汉字也能被选中。
p:first-child
p:first-child{
color:red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p>
<div>
<p>Hello World<p> <!-- 红色-->
<p>世界你好3</p>
</div>
</body>
说明:选择其父元素的第一个子元素。上面的例子中只有Hello World是红色,虽然"世界你好2"也拥有body这个父元素,但他不是body的第一个子元素
p:last-child
p:last-child{
color:red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p>
<div>
<p>Hello World<p>
<p>世界你好3</p> <!-- 红色-->
</div>
</body>
说明:选择其父元素的最后一个子元素。例子中“世界你好2”不是body元素的最后一个子元素。
p:only-child
p:only-child{
color:red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p>
<div>
<p>世界你好3</p> <!-- 红色-->
</div>
</body>
说明:选择其父元素仅有一个子元素的元素。
p:nth-child(n)
p:nth-child(2){
color:red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p> <!-- 红色-->
<div>
<p>Hello World</p>
<p>世界你好3</p> <!-- 红色-->
</div>
</body>
说明:选择其父元素的第n个子元素为指定元素的元素。上面例子中,“世界你好2”是父元素body的第二个子元素,“世界你好3”是div元素的第二个子元素,所以他们均被选中。
p:nth-last-child(n)
p:nth-last-child(2){
color:red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p> <!-- 红色-->
<div>
<p>Hello World</p> <!-- 红色-->
<p>世界你好3</p>
</div>
</body>
说明:选择其父元素的倒数第n个子元素为指定元素的元素。
p::before
p::before {
content: "前面:";
color: red;
}
<p>世界你好</p>
说明:伪元素,在指定元素前面插入一个元素。
p::after
p::after {
content: "后面";
color: red;
}
<p>世界你好</p>
说明:伪元素,在指定元素后面插入一个元素。
p:lang(zh)
p:lang(zh) {
color: red;
}
<p lang="zh-CN">汉字</p> <!-- 红色-->
<p lang="zh-Hans">汉字</p> <!-- 红色-->
<p lang="en">English</p>
说明:选择lang属性以指定词汇开头的元素。这里可以拥有连字符。
p:first-of-type
p:first-of-type {
color: red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p> <!-- 红色-->
<div>
<p>Hello World</p> <!-- 红色-->
<p>世界你好3</p>
</div>
</body>
说明:选择父元素下第一个子元素为指定类型的元素。上面的例子中世界你好2
是body元素的一个子元素,并且是第一个类型为p的元素;"Hello World"是div元素的第一个类型为p的元素。
p:last-of-type
p:last-of-type {
color: red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p> <!-- 红色-->
<div>
<p>Hello World</p>
<p>世界你好3</p> <!-- 红色-->
</div>
</body>
说明:选择父元素下最后一个子元素为指定类型的元素。
p:only-of-type
p:only-of-type {
color: red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p> <!-- 红色-->
<div>
<p>Hello World</p>
<p>世界你好3</p>
</div>
</body>
说明:选择父元素下仅有一个子元素为指定类型的元素。上面的例子中,body元素的子元素中,“世界你好2”是仅有的一个p元素
p:nth-of-type(n)
p:nth-of-type(2) {
color: red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p>
<div>
<p>Hello World</p>
<p>世界你好3</p><!-- 红色-->
</div>
</body>
说明:选择父元素下第n个子元素类型为指定元素的元素。上面的例子中“世界你好3”是div元素的第二个类型为p的子元素
p:nth-last-of-type(n)
p:nth-last-of-type(2) {
color: red;
}
<body>
<span>世界你好1</span>
<p>世界你好2</p>
<div>
<p>Hello World</p> <!-- 红色-->
<p>世界你好3</p>
</div>
</body>
说明:选择父元素下倒数第n个子元素类型为指定元素的元素。上面的例子中“Hello World”是div元素的倒数第二个类型为p的子元素
:root
:root {
background-color: #f3f3f3;
}
说明::root选择文档的根元素,在HTML中根元素就是html元素。
p:empty
p:empty {
background-color: red;
}
<p></p> <!-- 红色背景 -->
<p> </p>
<p>世界你好</p>
说明:选择子元素为空的元素。空格属于文本节点,所以上面例子中第二个p元素没有被选中。
:target
:target {
color: red;
}
<a href="#test1"> test1 </a>
<a href="#test2"> test2 </a>
<p id="test1">世界你好1</p>
<p id="test2">世界你好2</p>
说明:选择当前活动的目标元素。上面的例子中,点击test1时,“世界你好1”变成红色,点击test2时,“世界你好2”变成红色。
input:enabled
input:enabled {
background-color: red;
}
<input type="text"> <!-- 红色背景 -->
说明:选择已启用的元素,大多数为表单上的元素。
input:disabled
input:disabled {
background-color: red;
}
<input type="text" disabled> <!-- 红色背景 -->
说明:选择已禁用的元素,大多数为表单上的元素。
input[type="checkbox"]:checked
input[type="checkbox"]:checked + span{
color: red;
}
<label>
<input type="checkbox" value="音乐" checked>
<span>音乐</span>
</label>
<label>
<input type="checkbox" value="足球">
<span>足球</span>
</label>
说明:选择选中状态的单选框或复选框。可以根据这个选择器做美化版的单选框和复选框。
div:not(p)
div:not(p) {
color: red;
}
<div>
<span>Hello World</span> <!-- 红色 -->
<p>世界你好</p>
</div>
说明:选择非指定元素的元素。选择div元素中非p元素的元素
::selection
::selection {
color: red;
}
<p>世界你好</p>
说明:修饰被选中部分的文本。选中的文本会呈现红色,只能使用color、background、cursor 以及 outline这些css属性。