CSS3新增选择器nth-child等

CSS3新增选择器

1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素


......

1

2
3
4
5

2、E:first-child:匹配元素类型为E且是父元素的第一个子元素
3、E:last-child:匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">

		/*  匹配第二个类型是div子元素  */

		.con div:nth-child(2){
			color:red;
		}

		.con div:nth-child(3){
			color:pink;
		}

		/* 
		.list li:nth-child(1){
			background-color:red;
		}

		等同于下面的写法:

		*/

		.list li:first-child{
			background-color:red;
		} 

		/* .list li:nth-child(8){
			background-color:green;
		} 

		等同于下面的写法:

		*/


		.list li:last-child{
			background-color:green;
		} 

		/* 	
		    2n:偶数行;
		    2n+1:奇数行;

		 */

		.list2 li:nth-child(2n+1){
			background-color:gold;
		}


	style>
head>
<body>

	<div class="con">
		<h3>标题h3>
		<div>这是一个divdiv>
		<div>这是第二个divdiv>	
	div>


	<ul class="list">
		<li>1li>
		<li>2li>
		<li>3li>
		<li>4li>
		<li>5li>
		<li>6li>
		<li>7li>
		<li>8li>
	ul>


	<ul class="list2">
		<li>1li>
		<li>2li>
		<li>3li>
		<li>4li>
		<li>5li>
		<li>6li>
		<li>7li>
		<li>8li>
	ul>

body>
html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">		
		.box > div{			
			border:1px solid red;
			padding:10px;
			margin:10px;
		}
		.box2 .title2{
			color:red;
		}
		.box2 .title2 ~ p{
			color:pink
		}
		.box2 .title2 + p{
			color:gold;
		}
		.box2 .title1 + p{
			color:green;
		}
	style>
head>
<body>
	<div class="box">
		<div>
			<div>这是div里面的文字div>
		div>
	div>


	<div class="box2">
		<h3 class="title1">这是标题一h3>
		<p>这是段落一p>
		<h3 class="title2">这是标题二h3>
		<p>这是段落二p>
		<p>这是段落二二p>
		<h3>这是标题三h3>
		<p>这是段落三p>
	div>

body>
html>

属性选择器:
1、E[attr] 含有attr属性的元素


......
这是一个div元素

2、E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”
3、E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$=‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">
		/* 匹配所有有class属性的div    */
		.con div[class]{
			background-color:gold;
			margin-bottom:10px;
		}
		 /* 匹配class属性值是ok的div  */
		.con div[class="ok"]{
			background-color:pink
		}

		/* 匹配class属性值是“ok”开头的div  */
		.con div[class^="ok"]{
			text-indent:30px;
		}

		/* 匹配class属性值是“ok”结尾的div  */
		.con div[class$="ok"]{
			font-size:30px;
		}

		/* 匹配class属性值含有“ok”的div  */
		.con div[class*="ok"]{
			border-bottom:2px solid #000;
		}
		
	style>
head>
<body>
	<div class="con">
		<div class="ok">1div>
		<div class="okabc">2div>
		<div class="abcok">3div>
		<div class="abcok123">4div>
		<div>5div>
	div>
body>
html>

你可能感兴趣的:(CSS,Html)