CSS 语法一:权重、选择器

1. CSS层叠样式

命名规则:使用字母、数字或下划线构成,不要以数字开头

2. CSS语法

格式: 选择器{属性:值;属性:值;属性:值;….}

3. HTML中嵌入CSS的方式

  1. 内联方式(行内样式)
    在HTML的标签中使用style属性来设置css样式
    格式: 被修饰的内容
    <p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>

特点:仅作用于本标签

  1. 内部方式(内嵌样式)
    在head标签中使用<style type="text/css">....</style>标签来设置css样式
    <style type="text/css">
    ....css样式代码
    </style>
    
    特点:作用于当前整个页面
  2. 外部导入方式(外部链入)
    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. 行内选择器

  3. ID选择器
    定义: #id名{样式…..}
    使用:
    注意:id选择符只在网页中使用一次
    #ys1 {color:red;}
    <p id='ys1'>也许永远都不会跟她说出那句话</p>
    
  4. class类选择器(使用点.将自定义名(类名)来定义的选择符)
    定义: .类名{样式….} 匿名类
    其他选择符名.类名{样式….}
    使用:<html标签 class="类名">...</html标签>
    .mc{color:blue;} //凡是class属性值为mc的都采用此样式
    p.ps{color:green;}//只有p标签中class属性值为ps的才采用此样式
    注意:类选择符可以在网页中重复使用
    .book {color:greenyellow;}
    <p class='book'>月亮与六便士</p>
    
  5. 标签选择器(html选择器)
    把html标签作为选择符使用
    如 p{….} 网页中所有p标签采用此样式
    h2{….} 网页中所有h2标签采用此样式
    li {color:gray;} 
    <ul>
     <li>第一项</li>
     <li>第二项</li>
     <li>第三项</li>
     <li>第四项</li>
    </ul>
    
    ==选择符的优先级: !important => 行内选择器 => ID选择符 => class选择符 => html选择器 => html属性(标签)==

    5. 选择器

  6. 关联选择器
    格式: 选择符1 选择符2 选择符3 …{样式….}
    例如: table a{….} //table标签里的a标签才采用此样式
    h1 p{color:red} //只有h1标签中的p标签才采用此样式
    #ys1 #ys3{color:red;}
    #ys3{color:green;}
    
  7. 组合选择器
    格式:选择符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;} 类型中的唯一一个