css3高级选择器

大家好，我是讯享网，很高兴认识大家。

一、层次选择器

1、后代选择器

2、子选择器

3、相邻兄弟选择器

4、通用兄弟选择器

5、并集选择器

二、结构伪类选择器

三、属性选择器

四、链接伪类选择器

：focu伪类选择器

一、层次选择器

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

链接伪类选择器实际工作中的写法

一、层次选择器

1、后代选择器

2、子选择器

3、相邻兄弟选择器

4、通用兄弟选择器

5、并集选择器

二、结构伪类选择器

三、属性选择器

四、链接伪类选择器

：focu伪类选择器

相关推荐