目录
一、层次选择器
1、后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内行标签写在后面,中间用空格分开,当标签发生嵌套时,内层标签就称为外层标签的而后代。
语法:
元素1 元素2 { 样式声明 }
上述表语法示选择元素1里面的所有元素2(后代元素)
例如:
ul li { 样式声明 } /* 选择 ul 里面所有的 li 标签元素 */
注意:
元素1和元素2中间用空格分开
元素1是父级,元素2是子级,最终选择元素2
元素2可以是儿子,也可以是孙子,只要是元素1的后代即可
元素1和元素2可以是任意基础选择器
2、子选择器
子元素选择器只能选择作为某元素的最近一级子元素,简单理解就是亲儿子。
语法:
元素1>元素2{样式声明}
上述语法表示选择元素1里面所有直接后代(子元素)元素2.
例如:
div>p{样式声明} /* 选择div里面所有最近一级p标签元素 */
注意:
元素1和元素2中间用大于号分开
元素1是父级,元素2是子级,最终选择元素2
元素2必须是亲儿子,其孙子等都不归他管,你也可以叫他亲儿子选择器
3、相邻兄弟选择器
例如:
<ul>
<li>1</li>
<a>2</a>
<p>4</p>
<p>5</p>
<p>6</p>
<h3>3</h3>
</ul>
a+p {
color: blue;
}
只有挨着a的<p>4</p>会变,别的都不会变
4、通用兄弟选择器
例如:
<ul>
<li>1</li>
<a>2</a>
<p>4</p>
<p>5</p>
<p>6</p>
<h3>3</h3>
</ul>
a~p {
color: blue;
}
挨着a的p元素全变
5、并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的元素,通常用作集体声明。
例如:
<ul>
<li>1</li>
<a>2</a>
<p>4</p>
<p>5</p>
<p>6</p>
<h3>3</h3>
</ul>
li,a ,p{
color: red;
}
li,a,p,元素全变
二、结构伪类选择器
1、
选择器 | 功能描述 |
E:first-child | 作为父元素的第一个子元素的元素E |
E:last-child | 作为父元素的最后一个子元素的元素E |
EF:nth-child(n) | 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even(偶数)、odd(奇数) |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
EF:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
<ul>
<li>ul第1个</li>
<li>ul第2个</li>
<li>ul第3个</li>
<li>ul第4个</li>
<li>ul第5个</li>
</ul>
<ol>
<li>ol第1个</li>
<li>ol第2个</li>
<li>ol第3个</li>
<li>ol第4个</li>
<li>ol第5个</li>
</ol>
ul :first-child {
color: red;
}
ul :last-child {
color: red;
}
ol :nth-child(3) {
color: red;
}
注:
前三个是元素选择
后三个是类选择
<ul>
<li>ul第1个</li>
<li>ul第2个</li>
<li>ul第3个</li>
<li>ul第4个</li>
<li>ul第5个</li>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</ul>
ul :first-of-type {
color: red;
}
ul :last-of-type {
color: red;
}
ul :nth-of-type(3) {
color: red;
}
三、属性选择器
属性选择器 | 功能描述 |
E[attr] | 选择匹配具有属性attr的E元素 |
E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写) |
E[attr^=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串 |
E[attr$=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串 |
E[attr*=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配 |
<footer>
<h2>标题一</h2>
<p>段落</p>
<ul>
<li>
12345<a href=""><strong>12345</strong></a>
</li>
<li>
12345<a href=""><strong>12345</strong></a>
</li>
<li>
12345<a href=""> <strong>12345</strong></a>
</li>
</ul>
<strong></strong>
<form action="">
<p>
name:<input type="text"/>
</p>
<p>
pass:<input type="password" placeholder="请输入">
</p>
<p>
tel:<input type="tel" placeholder="请输入">
</p>
<p>
date:<input type="date" placeholder="请输入">
</p>
<p>
date-time:<input type="datetime" placeholder="请输入">
</p>
<p>
date:<input type="submit" value="99999">
</p>
</form>
</footer>
a[href]{
color: red;
}
input[type="date"]{
color: blue;
}
input[type^="su"]{
color: aqua;
}
input[type$="xt"]{
color: blue;
}
input[type*="d"] {
color: green
}
四、链接伪类选择器
a:link /*选择所有未访问过的链接*/
a:visited /**选择所有已被访问的链接/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起)*/
注意事项:
为了确保生效,请按照LVHA的顺序声明:link:visited:hover:active
链接伪类选择器实际工作中的写法