CSS 语法一:权重、选择器

2016-08-18 10:55:41 Albin Wong 1698

#### 1. CSS层叠样式  
命名规则：使用字母、数字或下划线构成，不要以数字开头
#### 2. CSS语法  
格式： 选择器{属性:值;属性:值;属性:值;....}
#### 3. HTML中嵌入CSS的方式
1. 内联方式(行内样式)  
在HTML的标签中使用style属性来设置css样式  
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>  
`<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>`

特点:仅作用于本标签  
2. 内部方式(内嵌样式)
在head标签中使用`<style type="text/css">....</style>`标签来设置css样式  
```css
<style type="text/css">
  ....css样式代码
</style>
```	  
特点：作用于当前整个页面  
3. 外部导入方式(外部链入)  
    1. (推荐)就是在head标签中使用`<link/>`标签导入一个CSS文件,在作用于本页面,实现css样式设置  
	格式：`<link href="文件名.css" type="text/css" rel="stylesheet"/>`  
    2. 还可以使用import在style标签中导入css文件  
	```
    <style type="text/css">
		@import "style.css";
	</style>
	```	
特点：作用于整个网站  
优先级：当样式冲突时,就是采用就近原则,是值css属性离被修饰的内容最近的为主.若没有样式冲突则采用叠加效果  
html标签中的属性低于CSS样式  
#### 4. 行内选择器  
1. ID选择器  
定义： #id名{样式.....}  
使用：<html标签 id="id名">...</html标签>  
注意：id选择符只在网页中使用一次  
```css
#ys1 {color:red;}
<p id='ys1'>也许永远都不会跟她说出那句话</p>
```
2. class类选择器(使用点.将自定义名（类名）来定义的选择符)  
定义： .类名{样式....}  匿名类  
	  其他选择符名.类名{样式....}  
使用：`<html标签 class="类名">...</html标签>`  
`.mc{color:blue;}` //凡是class属性值为mc的都采用此样式  
`p.ps{color:green;}`//只有p标签中class属性值为ps的才采用此样式  
注意：类选择符可以在网页中重复使用
```css
.book {color:greenyellow;}
<p class='book'>月亮与六便士</p>
```
3. 标签选择器(html选择器)  
把html标签作为选择符使用  
如 p{....}  网页中所有p标签采用此样式  
   h2{....}  网页中所有h2标签采用此样式  
```css
li {color:gray;} 
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>
```
==选择符的优先级: !important => 行内选择器 => ID选择符 => class选择符 => html选择器 => html属性(标签)==
#### 5. 选择器  
1. 关联选择器  
格式： 选择符1 选择符2 选择符3 ...{样式....}  
	例如： table a{....} //table标签里的a标签才采用此样式  
	h1 p{color:red} //只有h1标签中的p标签才采用此样式  
```
#ys1 #ys3{color:red;}
#ys3{color:green;}
```
2. 组合选择器  
格式：选择符1,选择符2,选择符3 ...{样式....}  
	h3,h4,h5{color:green;} //h3、h4和h5都采用此样式  
`h1,h2,h3,h4{color:yellow}`

#### 6. 权重问题  
1. 标签选择器   1
2. 类选择器  10
3. ID选择器  100
4. 行内选择器  1000
5. 伪类选择器 10
6. 属性选择器  10
7. 关系选择器拆开来相加着分
* ==注==:1. 数值越大,权重越高; 2. 权重值相同的情况下最后一个样式胜出

#### 7. 关系选择器  
- ul li{color:red;}  /* 后代选择器  ul 中 所有的 li */  
- ul>li{color:green;}  /*父子选择器  ul 下一层的 li */
- ol+li{color:blue;}   /*相邻选择器  与ol同级的下一个 li */
- ol~li{color:deeppink;}  /*弟弟选择器 在ol之后的同级的 li */  
div>p 选择所有作为div元素的子元素p  
div+p 选择紧贴在div元素之后p元素  
div~p 选择div元素后面的所有兄弟元素p

#### 8. 伪类选择器  
- a:link{color:red;} /* 默认情况 */
- a:visited{color:yellow;} /* 访问过的样子 */
- a:hover{color:green;} /* 鼠标悬停时  important */
- a:active{color:blue;} /* 鼠标点击的那一刻 */  
如果四个同时写,应该有一个顺序,爱恨原则==lvha== 
---

##### 结构性伪类选择器：
::first-letter设置对象内的第一个字符的样式  
::first-line设置对象内的第一行的样式  
:before设置在对象前（依据对象树的逻辑结构）发生的内容  
:after设置在对象后（依据对象树的逻辑结构）发生的内容  
:lang(language)匹配使用特殊语言的E元素   
:first-of-type匹配同类型中的第一个同级兄弟元素  
:last-of-type匹配同类型中的最后一个同级兄弟元素  
:only-of-type匹配同类型中的唯一的一个同级兄弟元素  
:only-child匹配父元素仅有的一个子元素  
:nth-child(n)匹配父元素的第n个子元素  
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素  
:last-child()匹配父元素的最后一个子元素  
:root匹配元素在文档的根元素.在HTML中,根元素永远是HTML   
:empty匹配没有任何子元素(包括text节点)的元素    
---
##### 状态伪类选择器
:link 设置超链接a在未被访问前的样式  
:visited 设置超链接a在其链接地址已被访问过时的样式  
:active	 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式  
*:hover	设置元素在其鼠标悬停时的样式  
*:focus	设置元素在其鼠标悬停时的样式  
:target	匹配相关URL指向的E元素  
:enabled   匹配用户界面上处于可用状态的元素  
:disabled   匹配用户界面上处于禁用状态的元素  
:checked   匹配用户界面上处于选中状态的元素  
:not(selector)匹配不含有selector选择符的元素  
::selection  设置对象被选择时的样式  
---
##### 其他伪类选择器
E:not(s) ： {attribute}  
匹配所有不匹配简单选择符s的元素E  
p:not(.bg) {background-color:#00FF00;}

#### 9. 伪对象选择器  
- div::first-letter{color:red;}  /* 第一个字符 */
- div::first-line{color:blue;}   /* 第一行 */
- div::selection{color:deeppink;}   /* 被选择 */

#### 10. 属性选择器
- input[type]{color:red;} /* 选择input标签中,具有type属性的 */
- input[type='text']{color:blue;} /* 选择 input标签中具有type属性并且值为'text' */
- input[type='text']{color:blue;} /* 选择 input标签中具有type属性并且值为'text' */
- .c2{font-size:36px;}
- div[class~='c1']{color:deeppink;}
- input[name^='un']{color:gray;} /*有name属性且以un开头*/
- input[name$='wd']{color:purple;} /* 有name属性且以wd结尾 */
- input[type\*='ex']{color:pink;} /* 有type属性属性值包含'ex' */
---
- [attribute]选择具有attribute属性的元素
- [attribute=value]选择具有attribute属性且属性值等于value的元素
- [attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素  
- [attribute|=value]选择具有att属性且属性值为以value开头并用连接符"-"分隔的字符串的E元素
- [attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
- [attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
- [attribute*=value]匹配具有attribute属性、且值中含有value的E元素

#### 11. 十个基本选择器  
- ul>li:first-child{color:red;}第一个
- ul>li:last-child{color:green;}最一个
- ul>li:nth-child(5){color:blue;}正数第5个
- ul>li:nth-last-child(2){color:yellow;}倒数第二个
- ul>li:only-child{color:pink;}单独的唯一一个 
---
- ul>p:first-of-type{color:deeppink;}类型中的第一个
- ul>p:last-of-type{color:orange;}类型中的最后一个
- ul>p:nth-of-type(2){color:white;}类型中的第二个
- ul>p:nth-last-of-type(2){color:gray;}类型中的倒数第二个
- ul>li:only-of-type{color:lightblue;} 类型中的唯一一个

(3) Comments

John Doe- Reply

February 26, 2013 at 1:18 pm
- saqib sarwar- Reply
  
  February 26, 2013 at 1:20 pm
  
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
John Doe- Reply

February 26, 2013 at 1:27 pm

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSS 语法一:权重、选择器

(3) Comments

John Doe- Reply

saqib sarwar- Reply

John Doe- Reply

Leave a Reply