css选择符第二部分(基础用法)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS  focus选择器</title>
<style>
input:focus{
background:yellow;
color:red;
border:1px solid aqua;
outline:none;}
</style>
</head>
<body>
  <input value="input01"/>
  <input value="input02"/>
</form>
</body>
</html>

3，:lang(fr)（匹配使用特殊语言）

写法：css ==> 元素:lang（语言）{属性：值} ==> (:lang(fr)匹配使用特殊语言)

html ==> <元素 lang="语言"></元素>

代码及效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS lang(fr)选择器</title>
<style>
p:lang(zh-cn){color:red;}
p:lang(en){color:aqua;}
</style>
</head>
<body>
<p lang="zh-cn">中文文字</p>
<p lang="en">english</p>
</body>
</html>

4，:not(selector)(匹配非指定元素/选择器的每个元素)

写法：元素:not（指定元素/选择器）{属性：值} ==> (:not(selector)匹配非指定元素/选择器的每个元素)

代码及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS not(s)选择器</title>
<style>
p:not(.abc){color:red;}
</style>
</head>
<body>
<p class="abc"> p1</p>
<p id="abc">p2</p>
<p class="abcd">p3</p>
<p>p4</p>
</body>
</html>

5，:root(匹配文档根元素)

写法：元素:root{属性：值} ==> (:root匹配文档根元素)

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS root选择器</title>
<style>
html:root{color:red;}
</style>
</head>
<body>
<p>p1</p>
<span>s1</span>
<div>
	<p>p2</p>
    <span>s2</span>
</div>
</body>
</html>

注：在 HTML 中，根元素始终是 html 元素

6，:first-child，:last-child，:only-child，:nth-child(n)，:nth-last-child(n)

（

E:first-child选择属于其父元素的首个子元素的每个 E 元素，

E:last-child选择属于其父元素的最后一个子元素的 E 元素，

E:only-child选择属于其父元素的唯一子元素的每个 E 元素，

E:nth-child(n)选择属于其父元素的第 n 个子元素的每个 E 元素，

E:nth-last-child(n)选择属于其父元素的第 n 个子元素的每个 E 元素，从最后一个子元素开始计数，

）

6-1(:first-child)

写法：元素E:first-child{属性：值 } ==> (E:first-child选择属于其父元素的首个子元素的每个 E 元素)

代码块及效果图：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS first-child选择器</title>
<style>
p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>

<p>p1</p>

<h1>h1</h1>
<p>p2</p>

<div>
<p>p3</p>
<p>p4</p>
</div>


</body>
</html>

注：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>

6-2(:last-child)

写法：元素E:last-child{属性：值 } ==> (E:last-child选择属于其父元素的最后一个子元素的 E 元素)

代码块及效果图：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS last-child选择器</title>
<style>
p:last-child
{
background:red;
}
</style>
</head>
<body>

<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<div>
  <p>p3</p>
  <p>p4</p>
  <p>p5</p>
</div>

</body>
</html>