HTML（八）_html上下文选择符-CSDN博客

本文链接：https://blog.csdn.net/mhfaaa/article/details/115297744

知识点总结

表格标签
常见选择器
浮动布局
伪类选择器
- 链接伪类
- 其它常见伪类
结构化伪类
css hack

表格标签

为什么不建议用table进行布局

1、table比其它html标记占更多的字节。
(造成下载时间延迟，占用服务器更多流量资源)
2、table会阻挡浏览器渲染引擎的渲染顺序。会延迟页面的生成速度，让用户等待更久的时间
3、table里显示图片时需要把单个、有逻辑性的图片切
成多个图。(增加设计的复杂度，增加页面加载时间，增加http会话数)
4、table会影响其内部的某些布局属性的生效（比如里的元素
的height:100%）限制页面设计的自由性
一旦学了CSS的知识后使用table做页面布局会变得更麻烦
1、table对于页面布局来说从语义上看是不正确的。(它描述的是表现，
而不是内容)
2、table代码会让阅读者抓狂。(不但无法利用CSS，而且会不知所云，
尤其在进行页面改版或内容抽取的时候）
3、table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌

常见选择器

   <p>
    <h3>标签选择器，例如p</h3>
    <h3>上下文选择器，也叫做后代选择器，例如标签1 标签2 {声明}</h3>
    <h3>类型选择器，例如.class</h3>
    <h3>ID选择器#，例如#id</h3>
    <h3>子选择符 >，例如标签1 > 标签2 标签2必须是标签1的子元素。与其他常规的上下文选择符
        不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素</h3>
    <h3>紧邻同胞选择器+，例如标签1 + 标签2 标签2必须紧跟在其同胞标签1的后面</h3>
    <h3>一般同胞选择器~，例如标签1 ~ 标签2 标签2必须在（不一定紧挨着）其同胞标签1后面</h3>
    <h3>通用选择器*，匹配任何元素</h3>
    <h3>属性选择器：标签名[属性名]，例如a[href$=".com"]</h3>
    <h3>属性值选择器：标签名[属性名=“属性值”]</h3>
    </p>

浮动布局

浮动布局让水平的排列处理更加简单方便

<body>
    <h2>浮動佈局</h2>
    <p>
        浮动布局让水平的排列处理更加简单方便
    </p>
    <style>
        .wrap{
                width:500px;
                height:500px;
                border:1px solid red;
        }
        .wrap>div{
                width :200px;
                height:200px;
                background-color:blue;
                float : right;
                /*  會有間隙的問題,解決方案是font-fize:0
                display: inline-block;
                */
        }
     </style>
     <!-- 此时我们会发现，两个盒子快速同行排列，
        并且呈现出顶对齐效果,且之间没有间隙，此
        时我们能可以自由的设置margin -->
     <div class="wrap">
         <div class="box1">1<br>2</div>
         <div class="box2">2</div>
         <div class="box3">3</div>
     </div>
     <hr/>

     <h3>浮动布局的原理</h3>
     <p>
        浮动布局，就是给盒子设置float属性，这个属性的值只有两个left或者right,设
        置后，盒子先会浮起来从当前行脱离默认文本流，进入到新的一层，我们将这层称
        为浮动层，然后按照设定的方向接着移动，直到遇到父级块的边缘，或者其他浮动
        块的边缘停止，与margin这种移动盒子方式不同，浮动只能设置移动的方向，但不
        能设置具体浮动多少距离
     </p>
   </body>

伪类选择器

伪类会为特定HTML的状态定义应用样式

链接伪类

  <p>
        <ol>
            <li>a:link向未被访问的链接添加样式</li>
            <li>a:visited向已被访问的链接添加样式</li>
                <li>a:hover当鼠标悬浮在元素上方时，向元素添加样式</li>
                    <li>a:active向被激活的元素添加样式</li>
            </ol>
            <b>在 CSS 定义中，a:hover必须被置于a:link和a:visited 之后才是有效的；a:active必须被置于a:hover之后才是有效的。伪类名称对大小写不敏感，注意顺序lvha。</b>
    </p>

其它常见伪类

    <div class="tablist"> 
        <ul class="tabmenu"> 
           <li><a href="#tab1">标签一</a></li> 
           <li><a href="#tab2">标签二</a></li> 
           <li><a href="#tab3">标签三</a></li> 
        </ul> 
        <div id="tab1">tab1 content</div> 
        <div id="tab2">tab2 content</div> 
        <div id="tab3">tab3 content</div> 
     </div>

     #tab1:target, #tab2:target, #tab3:target {
         color: blue;
     }