day042 css 选择器

  css(Cascading Style Sheet) 层叠样式表,定义了如何显示HTML元素,给HTML设置样式,让它看起来更好

一、css语法

  css样式包括两部门,选择器(给谁的样式)和声明(什么样)

 

css注释格式:  /*注释内容*/

 

二、css引入的三种方式

1、行内引入

style属性写在目标标签内

如: <p style=" color:red; ">hello world</p>

 

2、内部引入

style属性写在<head></head>标签内

 1 <head>
 2     <meta charset="utf8" >
 3     <title>标题</title>
 4     <style>
 5            p{background-color:red;}
 6     </style> 
 7 </head>
 8 
 9 <body>
10     <p>hello world</p>
11 </body>   
内部样式

 

3、外部引入(推荐)

外部引入是将css样式写在一个单独的文件中,然后在页面中引入

<link  href=''css样式文件路径'' rel=''stylesheet''  type="text/css"  />

 

三、css选择器

1、基本选择器

元素选择器    通过标签名来找

eg:  p { color : "red" ; }

ID选择器 通过设置id值来找

eg:  #p1 { color : "red" ; }

  <p id='p1'>hello word</p>

类选择器   通过设置class值来找

eg:  .c1 { color : "red" ; }

  <p class="c1" >hello word</p>

  注意:类名不要用数字开头,有的浏览器不认

通用选择器  *号表示所有的标签

eg:  * { color : "red"; }

 

2、组合选择器

后代选择器  

  格式: 基本选择器 (空格)目标标签名 {  这里放css样式 }

  找基本选择器下的所有目标标签

儿子选择器

  格式 : 基本选择器>目标标签名 { 这里放css样式    }

  只找基本选择器下的第一层目标标签

毗邻选择器

  格式 : 基本选择器+目标标签名 {   这里放css样式  }

  找挨着基本选择器的下面的目标标签

弟弟选择器

  格式 : 基本选择器~目标标签名 {  这里放css样式   }

  找与基本选择器同一级的兄弟标签中的目标标签

3、属性选择器

格式 : 标签名[属性] {   这里放css样式    }

   或  标签名[属性=值] {   这里放css样式    }

给标签设置自定义的属性,通过自己自定义的方式来找。

还可以用正则来匹配自定义的属性。

 

4、分组和嵌套

#、分组

多个选择器之间用逗号隔开

eg:    div, p { color:" red " ; }

#、嵌套

多个选择器可以混合起来使用,如c1类内的p标签,组合选择器就属于嵌套使用。

eg:   .c1>p { color : " red " ; }

 

5、伪类选择器(css3新特性)

可以根据标签的不同状态再进行进一步的区分,比如一个a标签,点击前,点击时,点击后有不同的三个状态。

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */  这个用的比较多
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间,可以让它变颜色
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {   #input默认的有个样式,鼠标点进去的时候,input框会变浅蓝色的那么个感觉
  #outline: none;
  background-color: blue; #框里面的背景色
伪类选择器

 

6、伪元素选择器

<p>你好哇,小可爱</p>

#first-leter 用来给首字母设置格式
p:first-letter{ font-size:32px; color:red}

#before  在标签前插入内容
p:before {content:"内容"; color:"red";}

#after   在标签后插入内容
p:after {content:"内容"; color:"red";}
伪元素选择器

 注意:通过这个选择器添加的文本内容是无法选中的

 

7、选择器的优先级

  浏览器是从上往下加载文件的,当选择器相同时,按照先后顺序来决定样式,谁最后就按照谁渲染。当选择器不同是,由选择器的优先级,渲染优先级高的。

css继承:

  后代标签会继承父类标签的某些样式。如在body定义了字体的颜色,此页面上所有的标签都会继承body的字体颜色,但是这个权重是最低的,很容易被覆盖。

选择器优先级有不同选择器的权重决定:

  行内样式权重1000  >  id选择器100  >  类选择器10   >  元素选择器1 > css继承 权重0

 

posted @ 2018-12-14 20:55  南辕北辙的天空  阅读(151)  评论(0编辑  收藏  举报