css基础_位置样式和选择器

✻只影为谁去

已于 2023-04-13 16:50:12 修改

阅读量221

点赞数 1

分类专栏： css-study 文章标签： css 前端

于 2023-03-22 16:19:52 首次发布

原文链接：https://b23.tv/1J5MRYB

版权

css-study 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css全称
层叠样式表（Cascading Style Sheets）
css位置_行内样式

  <div style="color:red;font-size:20px;">行内样式</div>

css位置_内部样式

  <head>
    <meta charset="UTF-8">
    <title>css内部样式</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
    </style>
  </head>

css位置_外部样式

  <head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="./xx.css">
  </head>
  //rel是relation(关系)简称

css位置_样式表优先级
行内样式 > 内部样式 = 外部样式
内部样式和外部样式出现样式重复，后引入的会覆盖前面的，同一个样式表中样式重复，后者覆盖前者
css语法规范
选择器和声明块之间最好有空格；
属性名和属性值之间最好有空格；
css中的注释/**/
css代码风格_展开风格
开发时使用

  h1 {
    width: 200px;
    height: 100px;
  }

css代码风格_紧凑风格
上线时使用，一般通过打包工具生成，减小体积，打开网页更快

  h1{width:200px;height:100px;}

css基本选择器_通配选择器
选中页面所有html原素，一般清除原素默认样式使用

  * {}

css基本选择器_原素选择器
选中页面所有这一类原素设置样式

  标签名 {}

css基本选择器_类选择器
根据class值，选择某些原素

  <style>   
    .a {}
    .b {}
  </style>
    
  <div class="a b"></div>
  //一个标签内class属性不能写多个

css基本选择器_id选择器
根据id值，选中某个原素

  <style>
    #x {}
  </style>
    
  <div id="x"></div>

css组合选择器_交集选择器

  <style>
    div.d {}
  </style>
    
  <div class="d"></div>

css组合选择器_并集选择器

  <style>
    .class1,
    .class2 {}
  </style>
    
  <div class="class1"></div>
  <div class="class2"></div>

css元素关系

表1:

关系类型	含义
父元素	直接包含某个元素的元素，就是该元素父原素
子原素	被父原素直接包含的元素
祖先原素	父亲的父亲……，一直向外找，都是祖先，父原素算祖先原素一种
后代原素	儿子的儿子……，一直向内找，都是后代，子原素算后代原素一种
兄弟原素	具有相同父原素的原素互为兄弟原素

css组合选择器_后代选择器

  <style>
    .class1 .class2 h1{}
  </style>  
    
  <div class="class1">
    <div class="class2">
      <h1></h1>
    </div>
  </div>

css组合选择器_子代选择器

    <style>
      div.class1 > h1{}  
    </style> 
       
    <div class="class1">    
      <h1></h1>  
    </div>

css组合选择器_相邻兄弟选择器

    <style>
      div+p {}
      /*选中与div紧紧相邻p原素，div下面的第一个p原素*/
    </style>
    
    <p></p>
    <div>相邻兄弟选择器</div>
    <p></p>
    <p></p>

css组合选择器_通用兄弟选择器

    <style>
      div～p {}      
      /*选中与div同级所有p原素*/       
    </style> 
       
    <p></p>    
    <div>通用兄弟选择器</div>    
    <p></p>    
    <p></p>

css组合选择器_属性选择器

    <style>
      [title] {}            
      /*选中包含title属性所有原素*/
      [title="abc"] {}            
      /*选中包含title属性，且title属性为abc所有原素*/
      [title^="a"] {}            
      /*选中包含title属性，且title属性以a开头所有原素*/
      [title$="c"] {}            
      /*选中包含title属性，且title属性以c结尾所有原素*/
      [title*="ab"] {}            
      /*选中包含title属性，且title属性包含ab所有原素*/
    </style>
               
    <div title="abc"></div>

css组合选择器_伪类选择器概念
是原素特殊状态一种描述
css组合选择器_动态伪类选择器

    <style>
      a:link {}
      /*选中没有激活a原素，a原素独有*/
      a:visited {}
      /*选中激活过的a原素*，a原素独有*/
      a:hover {}
      /*选中鼠标悬浮时的a原素*，所有原素都有*/
      a:active {}
      /*选中鼠标点击过的a原素*，所有原素都有*/
      input:focus,select:focus {}
      /*获取焦点时的input,select原素，表单类原素使用*/
    </style>
    
    <a href="">
    <input type="text">
    <select>
      <option vale="a">A</option>
      <option value="b">B</option>
    </select>

css组合选择器_结构伪类选择器(常用)

    <style>
      div>p:first-child {}
      /*选中div子元素中的p原素，且是div第一
      个子元素
      如structure1中的p1所在元素，
      反之structure2中p2所在原素不会选中*/
      div p:first-child {}
      /*选中div后代中p原素，且是第一个子元素，
      父集无所谓
      如structure2中p1所在原素，
      structure1中p1所在原素*/
      p:first-child {}
      /*选中p原素，且是第一个子元素，父集无所谓
      如structure3中p1,p2,p3*/
      div>p:last-child {}
      /*选中div子原素中p原素，并且这个p原素
      是最后的子元素，用法和first-child一样*/
      div>p:nth-child(n) {}
      /*nth:child()表示是选取哪个或哪些子元素，
      n取值看下面表1*/
      div>p:first-of-type {}
      /*选取div子原素中p元素，且是div下第一个p原素
      如structure2中p2所在原素*/
      div>p:last-of-type {}
      div>p:nth-of-type(){}
    </style>

    <div title="structure1">
      <p>p1</p>      
      <p>p2</p>      
      <p>p3</p>    
    </div>

    <div title="structure2">
      <marquee>
        <p>p1</p>
      </marquee>
      <p>p2</p>
      <p>p3</p>
    </div>

    <p>p1</p>
    <div title="structure3">
      <p>p2</p>
      <marquee>
        <p>p3</p>
        <p>p4</p>
      </marquee>
      <p>p5</p>
    </div>

表2:

n的值	含义
2n+1或odd	奇数
2n或even	偶数
-n+3	选中前三个
大于1正整数	选中第几个子原素
n	选中所有子元素，几乎不用
0或不写	什么都不选，几乎不用

css组合选择器_结构伪类选择器(不常用)

    <style>
      div>p:nth-last-child() {}
      /*div子原素中p原素，且是div倒数第几个子原素*/
      div>p:nth-last-of-type() {}
      /*div子原素中p原素，且是div倒数第几个p原素*/
      span:only-child {}
      /*选取是唯一子原素的span原素*/
      span:only-of-type {}
      /*选取是唯一span类型子原素的原素*/
      :root {}
      /*选中html根原素*/
      div:empty {}
      /*选取空的div原素*/
    </style>

css组合选择器_否定伪类选择器

    <style>
      div>p:not(:nth-child(2)) {}
      /*选取div子元素下p原素，除了第二个子元素*/
    </style>
    
    <div>
      <p></p>
      <p></p>
      <p></p>
    </div>

css组合选择器_UI伪类选择器

     <style>
       input:checked {}
       /*选中被勾选复选框或单选按钮*/
       input:disabled {}
       /*选中被禁用输入框*/
       input:enabled {}
       /*选中未被禁用输入框*/
     </style>
     
     <input type="checkbox">
     <input type="radio">
     <input type="text" disabled>
     <input type="text">

css组合选择器_目标伪类选择器

    <style>
      div:targent {}
      /*选中锚点指向原素*/
    </style>
    
    <a href="#class1">
    <div id="class1"></div>

css组合选择器_语言伪类选择器

    <style>
      div:lang(en) {}
      /*选取div语言为en原素*/
      :lang(en) {}
      /*选取所有语言为en原素*/
    </style>
    
    <div lang="en">abc</div>

css组合选择器_伪原素选择器
选中原素中的一些特殊位置，css3中规范伪原素要用::

    <style>
      div::first-letter {}
      /*选中div原素中第一个文字*/
      div::first-line {}
      /*选中div原素中第一行文字*/
      div::selection {}
      /*div原素中的鼠标选中的文字*/
      input::placeholder {}
      /*选中输入框提示文字*/
      p::before {
        content:"¥";
      }
      /*p的内容之前加上¥，before必须配合
      content加上指定内容，无法被鼠标选中*/
      p::after {
        content:"¥";      
      }      
      /*p的内容之后加上¥*，无法被选中*/
    </style>

css简单选择器优先级
!important > 行内样式 > id选择器 > 类选择器 > 原素选择器 >通配选择器 > 继承的样式
css复杂选择器优先级
权重计算格式:（a，b，c）
a : id选择器个数；
b : 类、伪类、属性选择器个数；
c : 原素、伪原素选择器个数；
两个复杂选择器a、b、c顺次比较，哪个个数多，哪个权重大。
css选择器权重查看
在开发工具中，鼠标放到选择器上看Specificity属性
css三大特性

特性	含义
层叠性	如果发生样式冲突，根据选择器权重，进行样式覆盖
继承性	原素会自动拥有其父原素或祖先原素的某些样式，浏览器控制台`Inherited from xx`可以看继承信息
优先级	!important > 行内样式 > id选择器 > 类选择器 > 原素选择器 >通配选择器 > 继承的样式`