CSS 选择器操作方法、使用教程、案例演示

常用

.class	.description	
/* 选择所有class="intro"的元素 */

#id	#firstname	
/* 选择所有id="firstname"的元素 */

*
/* 选择所有元素 */

element	p	
/* 选择所有<p>元素 */

element,element	div,p	
/* 选择所有<div>元素和<p>元素 */

element element	div p	
/* 选择<div>元素内的所有<p>元素 */

element>element	div>p	
/* 选择所有父级是 <div> 元素的 <p> 元素 */

element+element	div+p	
/* 选择所有紧跟在 <div> 元素之后的第一个 <p> 元素 */

临近选择器兄弟选择器

.content + .link{
  /* content 代码块旁边的 link 代码块 */
}

:before	p:before	
/* 在每个<p>元素之前插入内容 */

:after	p:after	
/* 在每个<p>元素之后插入内容 */

:nth-child(n) 该元素其父元素的第n个子元素 :nth-last-child(n) 倒数该元素其父元素的第n个子元素 :only-child 选择只有一个子元素的某种父级元素

p:nth-child(2){}
/* 父元素的第二个子元素，不一定是p也有可能是h1-h6，具html结构 */

p:nth-chi* 奇数 */

p:nth-child(even){}
/* 偶数 */

p:nth-child(3n+0){}
/* 第三个开始，后面三的倍数 */

p:nth-child(3n+2){}
/* 从第2个开始，每到3的倍数（每第3个：2、5、8、11...） */

td:nth-child(4n+11){color: red;}
/* 从第11列（包括第11列）开始每数4列第4列（间隔3个）都是红色字体 */
/* nth-child 在处理一些表格需求时可以做出很多很牛p的效果 */


p:nth-last-child(2){}

div p:only-child{}

```css
`:nth-of-type(n)` 
/* 选择该元素其父级下第n个该元素相同的元素 */

`:nth-last-of-type(n)` 
/* 倒数选择该元素其父级下第n个该元素相同的元素 */

p:nth-of-type(2){}
p:nth-last-of-type(2){}

:last-child 该元素其父级下的最后一个该元素相同的元素,最后一个不同无效

p:last-child{}

:link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择活动链接 :hover a:hover 选择鼠标在链接上面时

妙用

[attribute^=value] attribute html 标签的属性，value 表示属有三种方式：^值以这个内容开始，$表示值以这个内容结尾，*表示值包含这个内容。以下为举例大多数标签可用，不限a标签。

/*选择 href 属性的值以"https"开头的元素*/
a[href^="https"]{} 
/*选择 href 属性的值以".pdf"结尾的元素*/
a[href$=".pdf"]{}	
/*选择 href 属性的值包含"atop"的元素*/
a[href*="1px.run"]{}	
/* 选择 http://www.example.com/index.html#a <p id="a"></p> 的元素 */
p:target{} 
/* 选取任意的英文（en) 段落 */
p:lang(en){}
/* 选择 lang 属性为 en 中的 p 元素 */
:lang(en) > q{}

/* 选择所有带有target属性元素 */
[attribute]	[target]	
/* 选择所有使用target="-blank"的元素 */
[attribute=value]	[target=-blank]	
/* 选择标题属性包含单词"flower"的所有元素 */
[attribute~=value]	[title~=flower]	
/* 选择 lang 属性以 en 为开头的所有元素 */
[attribute|=language]	[lang|=en]	

:not(selector) 选择每个并非所选标签的元素

:not(p){}

:empty	p:empty
/* 选择每个没有任何子级的p元素（包括文本节点） */
:target	#news:target
/* 选择当前活动的#news元素（包含该锚名称的点击的URL）可以实现类似tab切换功能 */

:first-letter	p:first-letter
/* 选择每一个<p>元素的第一个字母 */
:first-line	p:first-line
/* 选择每一个<p>元素的第一行 */
:first-child	p:first-child
/* 指定只有当<p>元素是其父级的第一个子级的样式。 */
:last-child p:last-child
/* 指定只有当<p>元素是其父级的最后一个子级的样式。 */

/* 选择不是P标签的元素 */
body :not(p){}
/* 选择 class 不是 .red 的 P 标签 */
p:not(.red){} 
/* 选择 <h2> 元素中不是有 `.foo` 类名的 <span> 元素 */
h2 :not(span.foo){} 
/* 不是 <div> 或 `.fancy` 的元素*/
body :not(div, .fancy){}

表单输入框

:valid	:valid	
/* 用于匹配输入值为合法的元素 */
:invalid	:invalid	
/* 用于匹配输入值为非法的元素 */
:focus	input:focus	
/* 选择具有焦点的输入元素 */
:enabled input:enabled 
/* 输入框、按钮等可操作元素，没有被禁用状态，定义样式 */

选择内容

选择第一个字母或者汉字

p::first-letter {
 font-size: 2em;
 font-weight: bold;
 padding-right: 0.3em;
}

选择段落的第一行

需注意的是，这是第一行，不是段落第一句。

p::first-line {
 font-weight: bold;
 font-size: 1.4em;
}

content 相关

/* 添加 a 标签的链接 */
a::after {
  content: " (" attr(href) ")";
}
/* 添加 图片 */
.topic-hot::before {
    content: url('../../media/examples/fire.png');
}
/* 渐变 */
.topic-hot::before {
content: linear-gradient(#e66465, #9198e5);
}
/* 选择图片 */
.topic-hot::before {
content: image-set("image1x.png" 1x, "image2x.png" 2x);
}

自定义 title 悬浮文字样式

a[title]:hover::after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20;
  border-radius: 5px;   
  box-shadow: 0px 0px 4px #222;  
  background-image: linear-gradient(#eeeeee, #cccccc);  
}

CSS 选择器 操作方法、使用教程、案例演示

常用

临近选择器 兄弟选择器

妙用