css应用

css

css规则

css代码有一个一个的规则组成

每个规则决定了，对那些元素应用什么样式

选择器

选择器｛声明块｝

选择器：选择页面上的某些元素（选择0-1个）

命名规则适用范围（ID、类）

• 不要以数字开头
• 可以包含字符（字母、数字、下划线、连字符）
• 区分大小写（大小写敏感）

大括号之前的内容是选中的元素，在这之前全都是元素的条件

1、元素选择器

p{color:red}

书写格式：元素名｛声明块｝

伪元素选择器

<article>
<section></section>
<section></section>    
</article>

2、通配符选择器

*{color:red}

3、ID选择器

<div id="orange">  ID选择器  </div>

#orange{color:red}

注：ID名是匹配html中ID的值

一个页面ID值不可以重复

4、组合选择器

h1,h2,h3,.box,#f75{color:red}

5、层次选择器

• 后代选择器

  article section{color:red}
  

  格式：祖先元素+空格+后代元素｛声明块｝

• 兄弟选择器

  p+p{color:red}
  

  格式：兄弟元素a+“+”+兄弟元素b｛声明块｝

  功能：选中元素a后面的第一个兄弟元素

  p~p｛color:red｝
  

  格式：兄弟元素a+“~”+兄弟元素b｛声明块｝

  功能：选中元素a后面所有兄弟元素b

6、伪类选择器

• 选中第一个元素

p:first-child{color:red}

格式：元素：first-child

p：nth-child（n）｛color:red｝

• 选中第n个元素

格式：元素：nth-child（n）

注：若所有兄弟元素的名字不相同，可能无法相中元素

p：nth-of-type｛color:red｝

格式：元素：nth-of-type（n）

注：所有兄弟的名字可以不相同

• 选中偶数项元素

p：nth-child（odd）｛color:red｝

格式：元素：nth-child（odd）

p：nth-child（2n）｛color:red｝

格式：元素：nth-chid（2n）

• 选中基数项元素

p：nth-child（even）｛color:red｝

格式：元素：nth-child（even）

p：nth-child（2n+1）｛color:red｝

格式：元素：nth-child（2n+1）

• 选中前m个元素

P：nth-child（-n+m）｛color：red｝

格式：元素：nth-child（-n+m）

• 否定元素选择器

P：not（：nth-child（3））｛color：red｝

格式：元素：p:not（：nth-child（3））

• 动态伪类选择器

a标签4种状态

1.已访问

a：visited｛color：red｝

2.未访问

a：link｛color：red｝

3.鼠标悬停（移入）

a：hover｛color:red｝

4.鼠标悬停时

a：active｛color：red｝

5.焦点框

a：focus｛color：red｝