CSS样式表及选择器的学习

CSS规则是由一条选择器一条或者多条声明构成

声明有属性和值构成

例如下面的例子
h1 {color:blue;font-size:12px;}
选择器属性值属性值

样式表的种类可以大致分为四类

1.行内样式表

<p style="color:red">csdn博客</p>

写在一行里面

2.内部样式表

<head> 
<style>  
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>
<body>
<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>
<p>这个段落的左外边距为 50 像素：50px</p> 
</body>

写在HEAD中用到style标签

3.链接样式表:

用到link标签 link标签出现在head中

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

4.输入样式表:

(导入方式)(写在标签style内)
@import url(mystyle.css)

在这里样式表的优先级是:

行内样式表>内部样式表>外部样式表(链接样式表;输入样式表)

基本选择器:

标签选择器

ID选择器

类选择器

1.标签选择器:

p{background:red}

2.ID选择器:

<head>
<style>
#para
{
	text-align:center;
	color:red;
} 
</style>
</head>
<body>
<p id="para">Hello World!</p>

3.类选择器:

<head>
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>

"."不能省略

基本选择器的优先级

ID选择器>类选择器>标签选择器

高级选择器:

层次选择器

结构伪类选择器

属性选择器

1.层次选择器:

后代选择器 body p{ background: red;} body里面的所有p
子选择器: body>p{ background: pink;} body里面的直接联系的p
相邻兄弟选择器: .active+p { background: green; } 用active后面的一个p
通用兄弟选择亲 .active~p{ background: yellow; } 用active后面的一个p

E F{background:red}

<html>
<head>
<style>
body p{background:red}
</style> 
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
</ul>
</body>
</html>

页面显示结果如下:

后代有元素p的都会受到影响

E>F{background:red}

<html>
<head>
<style>
body>p{background:red}
</style> 
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
</ul>
</body>
</html>

body的直接子类元素才会受到影响

#pral~p{background:red}

<html>
<head>
<style>
#pral~p
{
background:red
}
</style> 
</head>
<body>
<p id="pral">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
</ul>
</body>
</html>

<p id="pral">p1</p>

p1后面所有的p都会受到影响(p1;p2) (p4)则不会因为不属于同一级

#pral+p{background:red}

<html>
<head>
<style>
#pral+p
{
background:red
}
</style> 
</head>
<body>
<p id="pral">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
</ul>
</body>
</html>

<p id="pral">p1</p>

紧挨着p1的才会受到影响

2.结构伪类选择器:

E:first-child
E:last-child
E F:nth-child(n)
E:first-of-type
E:last-of-type
E F:nth-of-type(n)

p:first-child{background:red}

<html>
<head>
<style>
p:first-child{background:red}
</style> 
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
</ul>
</body>
</html>

p:first-child{background:red}

所有p元素第一个p元素会受到影响

p:last-child{background:red}

<html>
<head>
<style>
p:last-child{background:red}
</style> 
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
</ul>
</body>
</html>

所有p元素的最后一个p元素

body p:nth-child(n){background:red}

<html>
<head>
<style>
p:nth-child(2){background:red}
</style> 
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
</ul>
</body>
</html>

nth-child(n)

n可以选择是第几个元素受到影响(n 可以是1 2 3 4)

body p:first-of-type{background:red}

<html>
<head>
<style>
p:first-of-type{background:red}
</style> 
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
  <ul>
   <p>p4</p>
   <p>p4</p>
   <p>p4</p>
  </ul>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
 <p>p4</p>
 <p>p4</p>
</ul>
</body>
</html>

每一个具有p元素的父元素的第一个p

body p:last-of-style{background:red}

<html>
<head>
<style>
p:last-of-type{background:red}
</style> 
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
  <ul>
   <p>p4</p>
   <p>p4</p>
   <p>p4</p>
  </ul>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
 <p>p4</p>
 <p>p4</p>
</ul>
</body>
</html>

last-of-type

每一个具有p元素的父级元素的最后一个p

body p:nth-of-type{background:red}

<html>
<head>
<style>
p:nth-of-type(2){background:red}
</style> 
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
  <ul>
   <p>p4</p>
   <p>p4</p>
   <p>p4</p>
  </ul>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
 <p>p4</p>
 <p>p4</p>
</ul>
</body>
</html>

每一个具有p元素的父级元素的第n个p(这里n可以自己指定)

(写个伪类选择器的时候差点把LZ自己绕进去还是自己学艺不精)

3.属性选择器:

E[attr]
E[attr=val]
E[attr^=val]
E[attr$=val]
E[attr*=val]

E[attre]

<html>
<head>
<style>
p[id]{background:red}
</style> 
</head>
<body>
<p id="pral1">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
  <ul>
   <p id="pral2">p4</p>
   <p>p4</p>
   <p>p4</p>
  </ul>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
 <p>p4</p>
 <p>p4</p>
</ul>
</body>
</html>

有Id这个属性的p都会受到影响

E[atter=val]

<html>
<head>
<style>
p[id=pral1]{background:red}
</style> 
</head>
<body>
<p id="pral1">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
  <ul>
   <p id="pral2">p4</p>
   <p>p4</p>
   <p>p4</p>
  </ul>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
 <p>p4</p>
 <p>p4</p>
</ul>
</body>
</html>

只有属性和值都符合条件的p才会受到影响

E[atter^=val]

<html>
<head>
<style>
p[id^=pral1]{background:red}
</style> 
</head>
<body>
<p id="pral122222222222">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
  <ul>
   <p id="pral1111111111">p4</p>
   <p>p4</p>
   <p>p4</p>
  </ul>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
 <p>p4</p>
 <p>p4</p>
</ul>
</body>
</html>

E[atter^=val]

所有元素的对应的属性的值以val开头的元素

E[atter$=val]

<html>
<head>
<style>
p[id$=pral1]{background:red}
</style> 
</head>
<body>
<p id="pral122222222222pral1">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
  <ul>
   <p id="pral1111111111">p4</p>
   <p>p4</p>
   <p>p4</p>
  </ul>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
 <p>p4</p>
 <p>p4</p>
</ul>
</body>
</html>

所有元素的对应的属性的值以val结尾的元素

E[atter*=val]

<html>
<head>
<style>
p[id*=pral1]{background:red}
</style> 
</head>
<body>
<p id="22222222222pral112313">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
  <ul>
   <p id="234pral1111111111">p4</p>
   <p>p4</p>
   <p>p4</p>
  </ul>
 <li>l1</li>
 <li>l1</li>
 <p>p4</p>
 <p>p4</p>
 <p>p4</p>
</ul>
</body>
</html>

所有元素对应的属性的值包含val的p元素

终于总结的差不多了

总结的过程中自己又重新理解了各种选择器也算是收获满满

努力努力再努力