文章目录
-
关系选择器:relationship selectors
E+F E~F
<div> <span></span> <p></p> <a></a> </div> <p></p> <p></p> <!--E+F:下一个相邻的满足条件的兄弟元素节点,div span + a 无法选中,因为a并不是相邻的兄弟节点,如果想选中a,则要用 div span ~ a--> <style> div+p{ background-color: red; } /* E~F:E后面满足条件的兄弟元素节点,不止一个,并不要求元素连续 */ div~p{ background-color: green; } </style>
-
属性选择器:attribute selectors
E[attr ~= “val”] 还可以是后面几个比较符号 [|=、^=、$=、*=]
- ~= 包含独立的val(结合class选择器进行理解)
- |= 以“val”开头或者以“val-”开头
- ^= 以“val”开头
- $= 以“val”结尾
- *= 包含“val”(试试空格行不行 /doge)
-
伪元素选择器:pseudo-element selectors()
E::placeholder E::selection
- placeholder :只能改字体颜色
- selection:只能改 color、background-color、text-shadow
-
伪类选择器:pseudo-classes selectors(被选中的元素的一种状态)
E:not(s) E:root E:target
E:first-child E:last-child E:only-child E:nth-child(n)
E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type
E:nth-of-type(n) E:nth-of-last-type(n)
E:empty E:checked E:enabled E:disabled
E:read-only E:read-write
-
:root :在html中等同于 html 标签选择器,本意是选择根标签
-
:target
<a href="#box1"></a> <a href="#box1"></a> <div id="box1"></div> <div id="box2"></div> <style> /*location.hash === target id值等于hash的元素被选中*/ div:target{ border: 1px solid #f00; } </style>
-
:nth-child(n) :CSS从1开始查,但n是自然数,从0开始
-
:nth-last-child(n):从后面向前查
带 child 的这几个伪类选择器,会考虑其他元素,of-type的不会考虑其他元素,只考虑被选择的类型的元素。
-
:nth-of-type(n):传入n是数值的话,比如传入2,代表从第2个开始查
-
:empty :里面不包含节点,或只包含注释标签,注意:空格或文字算节点
-
:checked :例如:Input:checked;
<input type="checkbox"/>
-
案例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器练习</title>
<!-- <link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="./reset.css" /> -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* padding: 15px; */
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #333;
border-bottom: 1px solid #000;
}
a:hover {
color: #888;
}
ul,
li {
list-style: none;
}
:root,
body {
height: 100%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.menu-list-wrap {
position: absolute;
right: 0;
}
.menu-list-wrap li {
float: left;
margin: 3px 6px;
height: 40px;
line-height: 40px;
}
.demo-wrapper {
height: 100%;
}
.demo-wrapper div[id] {
width: 100%;
height: 100%;
padding: 40px 0 0 0;
background-color: #eee;
padding: 15px;
}
.demo-wrapper div[id]:not(:target) {
display: none;
}
a:active {
border-color: red;
}
.demo-wrapper h4 {
padding: 40px 0 15px 35px;
}
/* 关系选择器 */
.demo p + span {
background-color: red;
}
.demo p ~ div {
background-color: green;
}
/* 属性选择器 */
.demo div[data] {
height: 40px;
line-height: 40px;
padding: 0 8px;
}
.demo div[data~="b"] {
background-color: blue;
color: #eee;
}
.demo div[data|="a"] {
background-color: pink;
}
.demo div[data^="c"] {
background-color: orange;
}
.demo div[data$="d"] {
background-color: red;
color: #fff;
}
.demo div[data*=" "] {
background-color: green;
color: #fff;
}
/* 伪元素选择器 */
.demo input::placeholder {
color: green;
}
div.selection {
font-size: 28px;
}
div.selection::selection {
color: #fff;
background-color: pink;
text-shadow: 2px 2px 2px #000;
}
/* 伪类选择器 */
#pseudo-classes .demo div:first-of-type {
background-color: green;
}
#pseudo-classes .demo div:last-of-type {
background-color: orange;
}
#pseudo-classes .demo div:last-child {
background-color: red;
}
#pseudo-classes .demo div:first-child {
background-color: blue;
}
#pseudo-classes .demo span:nth-of-type(2n-1) {
background-color: blue;
color: #fff;
}
#pseudo-classes .demo input:read-only {
color: red;
}
#pseudo-classes .demo input:read-write {
color: green;
}
</style>
</head>
<body>
<ul class="menu-list-wrap clearfix">
<li><a href="#relation-ship">关系选择器</a></li>
<li><a href="#attribute">属性选择器</a></li>
<li><a href="#pseudo-element">伪元素选择器</a></li>
<li><a href="#pseudo-classes">伪类选择器</a></li>
</ul>
<div class="demo-wrapper">
<div id="relation-ship">
<h4>关系选择器</h4>
<pre>
.demo p + span {
background-color: red;
}
.demo p ~ div {
background-color: green;
}
</pre>
<div class="demo">
<p>p</p>
<span>span1</span>
<span>span2</span>
<div>div1</div>
<div>div2</div>
<a href="#">a</a>
<div>div3</div>
</div>
</div>
<div id="attribute">
<h4>属性选择器</h4>
<pre>
.demo div[data~="b"] {
background-color: blue;
color: #eee;
}
.demo div[data|="a"] {
background-color: pink;
}
.demo div[data^="c"] {
background-color: orange;
}
.demo div[data$="d"] {
background-color: red;
color: #fff;
}
.demo div[data*=" "] {
background-color: green;
color: #fff;
}
</pre>
<div class="demo">
<div data="b-a">b-a</div>
<div data="ba">ba</div>
<div data="a">a</div>
<div data="b">b</div>
<div data="a-c">a-c</div>
<div data=" ">空格</div>
<div data="abc">abc</div>
<div data="c-ba">c-ba</div>
<div data="c">c</div>
<div data="c-ba-d">c-ba d</div>
<div data="dc-da">dc-da</div>
<div data="a-c-c">a-c c</div>
</div>
</div>
<div id="pseudo-element">
<h4>伪元素选择器</h4>
<pre>
.demo input::placeholder {
color: green;
}
div.selection {
font-size: 28px;
}
div.selection::selection {
color: #fff;
background-color: pink;
text-shadow: 2px 2px 2px #000;
}
</pre>
<div class="demo">
<div>
<input type="text" placeholder="placeholder" />
</div>
<div class="selection">
selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection、selection
</div>
</div>
</div>
<div id="pseudo-classes">
<h4>伪类选择器</h4>
<pre>
#pseudo-classes
.demo
div:first-of-type {
background-color: green;
}
#pseudo-classes
.demo
div:last-of-type {
background-color: orange;
}
#pseudo-classes
.demo
div:last-child {
background-color: red;
}
#pseudo-classes
.demo
div:first-child {
background-color: blue;
}
#pseudo-classes
.demo
span:nth-of-type(2n-1) {
background-color: blue;
color: #fff;
}
#pseudo-classes
.demo
input:read-only {
color: red;
}
#pseudo-classes
.demo
input:read-write {
color: green;
}
</pre>
<div class="demo">
<span>span1</span>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<span>span5</span>
<p>
<input type="text" readonly value="readonly" />
</p>
<p>
<input type="text" value="read-write" />
</p>
</div>
</div>
</div>
</body>
</html>