css常用选择器
css常用选择器
css选择器
- 基本选择器
-.class- 类选择器
- `# id`
+ id选择器
- `div`
+ 标签选择器
- `*`
+ 通配符
- 关系选择器
-div,p,ul,li- 并集选择器
- `ul li`
+ 后代选择器：
选择`<ul>`元素内的所有`<li>`元素
<ul>
<li>
这个li会被选中
<ol>
<li>这个li不会被选中</li>
</ol>
</li>
<li>这个li会被选中</li>
<li>这个li会被选中</li>
</ul>
ul>li-
子代选择器：
选择在<ul>元素内的第一层<li>元素<ul> <li> 这个li会被选中 <ol> <li>这个li不会被选中</li> </ol> </li> <li>这个li会被选中</li> <li>这个li会被选中</li>
-
- `div+p`
+ 相邻兄弟选择器：
选择紧接在`<div>`后面第一个`<p>`元素
<div>div</div>
<p>第一个p会被选中</p>
<p>第二个p不会被选中</p>
- `div~p`
+ 一般兄弟选择器：
选择与`<div>`同父元素的且在`<div>`元素之后的所有兄弟`<p>`元素
<p>在div上面的p不会被选中</p>
<div>
<p>div里面的p不会被选中</p>
</div>
<p>第一个p会被选中</p>
<p>第二个p会被选中</p>
- 属性选择器
-div[id]-
选择带有id属性的所有
<div>元素会被选中会被选中不会被选中
-
- `a[target="_blank"]`
+ 选择target=_blank的所有`<a>`元素
<a href="#" target="_blank">会被选中</a>
<a href="#" target>不会被选中</a>
<a href="#">不会被选中</a>
- `div[class|="box"]`
+ 选择class值为box的或者以box-开头的所有`<div>`元素
<div class="box">会被选中</div>
<div class="box-one">会被选中</div>
<div class="boxtwo">不会被选中</div>
<div class="three-box">不会被选中</div>
<div class="four box">不会被选中</div>
- `div[title~="hello"]`
+ 选择title值为hello完整单词的或者是包含hello完整单词的所有`<div>`元素
<div title="hello">会被选中</div>
<div title="one hello">会被选中</div>
<div title="hellotwo">不会被选中</div>
<div title="three-hello">不会被选中</div>
+ **example**：title="hellow"||title="hello word" notice:中间有空格
- `a[href^="http"]`
+ 选择href值以http开头的所有的`<a>`元素
<a href="http://www.">会被选中</a>
<a href="#http://www.">不会被选中</a>
<a href="www.">会被选中</a>
- `img[scr$=".png"]`
+ 选择src值以.png结尾的所有`<img>`元素
<img src="01.png" alt="会被选中">
<img src="01.jpg" alt="不会被选中">
<img src="01.pngj" alt="不会被选中">
- `p[class*="text"]`
+ 选择class值中包含text的所有`<p>`元素
<div class="text">会被选中</div>
<div class="one-text">会被选中</div>
<div class="two text">会被选中</div>
<div class="tthreeext">不会被选中</div>
- 伪元素选择器
-p::first-letter- 选择所有
<p>元素的第一个字符
- 选择所有
- `p::first-line`
+ 选择所有`<p>`元素的第一行字符
- `div::before`
+ 在每个div之前插入的内容(content)及样式
- `div::after`
+ 在每个div之后插入的内容(content)及样式
- `p::selection`
+ 选择所有`<p>`元素被用户选取的内容样式
+ **notice**：只能设置color、background、cursor 以及 outline。
- 伪类选择器
选择该父元素内的元素
-h1:first-child-
选择h1的父元素下的第一个标签，并且为h1的
<h1>元素会被选中
不会被选中
会被选中
不会被选中
不会被选中
不会被选中
-
- `h1:last-child`
+ 选择h1父元素下的最后一个标签，并且为h1的`<h1>`元素
<div>
<h1>不会被选中</h1>
<h1>不会被选中</h1>
<div>
<h1>不会被选中</h1>
<h1>会被选中</h1>
</div>
<div>
<h3>不会被选中</h3>
<h1>会被选中</h1>
</div>
</div>
- `h3:first-of-type`
+ 选择h3父元素下第一个出现的`<h3>`元素
<div>
<h3>会被选中</h3>
<h3>不会被选中</h3>
<h1>不会被选中</h1>
<div>
<h1>不会被选中</h1>
<h3>会被选中</h3>
<h1>不会被选中</h1>
</div>
</div>
- `h3:last-of-type`
+ 选择h3父元素下最后一个出现的`<h3>`元素
<div>
<h3>不会被选中</h3>
<h3>会被选中</h3>
<h1>不会被选中</h1>
<div>
<h1>不会被选中</h1>
<h3>会被选中</h3>
<h1>不会被选中</h1>
</div>
</div>
- `h3:only-of-type`
+ 选择h3父元素下仅仅只有一个`<h3>`元素（可以含有其他标签）的`<h3>`元素
<div>
<h3>不会被选中</h3>
<h3>不会被选中</h3>
<h1>不会被选中</h1>
<div>
<h1>不会被选中</h1>
<h3>会被选中</h3>
<h1>不会被选中</h1>
</div>
</div>
- `h3:only-child`
+ 选择没有兄弟元素的`<h3>`元素
<div>
<h3>不会被选中</h3>
<h3>不会被选中</h3>
<h1>不会被选中</h1>
<div>
<h1>不会被选中</h1>
<h3>不会被选中</h3>
</div>
<div>
<h3>会被选中</h3>
</div>
</div>
- `p:nth-child(3)`
+ 选择p父元素下第三个元素是p元素的`<p>`元素
+ 参数支持：an+b 形式 即2n+1
+ 其中a可正可负，b必须为正
+ 当a为负时，-n+3 选择倒数三个
+ 下例：p:nth-child(2n+1)
<div>
<p>会被选中</p>
<p>不会被选中</p>
<p>会被选中</p>
<p>不会被选中</p>
<p>会被选中</p>
<p>不会被选中</p>
<p>会被选中</p>
</div>
- `p:nth-last-child(3)`
+ 选择p父元素下倒数第三个是p元素的`<p>`元素
<div>
<p>不会被选中</p>
<p>不会被选中</p>
<p>会被选中</p>
<div>
<p>会被选中</p>
<p>不会被选中</p>
<p>不会被选中</p>
</div>
<div>
<div>不会被选中</div>
<p>不会被选中</p>
<p>不会被选中</p>
</div>
</div>
- `p:nth-of-type(3)`
+ 选择p父元素下第三个`<p>`元素
<div>
<div>不会被选中</div>
<p>不会被选中</p>
<p>不会被选中</p>
<p>会被选中</p>
<div>
<p>不会被选中</p>
<p>不会被选中</p>
<p>会被选中</p>
</div>
<div>
<p>不会被选中</p>
<div>不会被选中</div>
<p>不会被选中</p>
<p>会被选中</p>
</div>
</div>
- `p:nth-last-of-type(3)`
+ 选择p父元素下倒数第三个`<p>`元素
<div>
<div>不会被选中</div>
<p>会被选中</p>
<p>不会被选中</p>
<p>不会被选中</p>
<div>
<p>会被选中</p>
<p>不会被选中</p>
<p>不会被选中</p>
</div>
<div>
<p>会被选中</p>
<div>不会被选中</div>
<p>不会被选中</p>
<p>不会被选中</p>
</div>
</div>
- `a:link`
+ 未被访问的a链接
- `a:visited`
+ 已被访问的a链接
- `a:active`
+ a链接被激活状态
- `a:hover`
+ 鼠标经过a链接
- `input:focus`
+ 选择获取焦点的`<input>`元素
- `:root`
+ 选择文档根元素即`<html>`元素
- `div:empty`
+ 选择空的div元素（也不可以有文本）
- `p:target`
+ 选择当前活动的`<p>`元素
(一般用于锚链接)
- `input:enabled`
+ 选择激活的`<input>`元素
- `input:disabled`
+ 选择禁用的`<input>`元素
- `:not(p)`
+ 选择非p的元素
+ **notice**：p要设置相应的样式，否则也会调用:not(p)里的样式
浙公网安备 33010602011771号