u1jodi1q 发表于 2024-6-30 06:52:13

你必要记住的30个css选取器


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">你<span style="color: black;">亦</span>许<span style="color: black;">已然</span><span style="color: black;">把握</span>了id、class、后台<span style="color: black;">选取</span>器这些基本的css<span style="color: black;">选取</span>器。但这远远不是css的<span style="color: black;">所有</span>。下面向<span style="color: black;">大众</span>系统的解析css中30个最常用的<span style="color: black;">选取</span>器，<span style="color: black;">包含</span><span style="color: black;">咱们</span>最头痛的浏览器兼容性问题。<span style="color: black;">把握</span>了它们，<span style="color: black;">才可</span>真正领略css的巨大灵活性。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-2c89bffbca69c0e79ae6e461953ba8dc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>*<div style="color: black; text-align: left; margin-bottom: 10px;">* {
      margin: 0;
      padding: 0;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">星状<span style="color: black;">选取</span>符会在页面上的每一个元素上起<span style="color: black;">功效</span>。web设计者经常用它将页面中所有元素的margin和padding设置为0。*<span style="color: black;">选取</span>符<span style="color: black;">亦</span><span style="color: black;">能够</span>在子<span style="color: black;">选取</span>器中<span style="color: black;">运用</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">#container * {
      border: 1px solid black;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面的代码中会应用于id为container元素的所有子元素中。除非必要，我不<span style="color: black;">意见</span>在页面中过的的<span style="color: black;">运用</span>星状<span style="color: black;">选取</span>符，<span style="color: black;">由于</span>他的<span style="color: black;">功效</span>域太大，相当耗浏览器资源。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera</p>#X<div style="color: black; text-align: left; margin-bottom: 10px;">#container {
      width: 960px;
      margin: auto;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">井号<span style="color: black;">功效</span>域有相应id的元素。id是<span style="color: black;">咱们</span>最常用的css<span style="color: black;">选取</span>器之一。id<span style="color: black;">选取</span>器的<span style="color: black;">优良</span>是<span style="color: black;">精细</span>，高优先级（优先级基数为100，远高于class的10）， <span style="color: black;">做为</span>javascript脚本钩子的不二<span style="color: black;">选取</span>，<span style="color: black;">一样</span>缺点<span style="color: black;">亦</span>很<span style="color: black;">显著</span>优先级过高，重用性差。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>在<span style="color: black;">运用</span>id<span style="color: black;">选取</span>器前，<span style="color: black;">咱们</span>最好问下自己，真的到了非用id<span style="color: black;">选取</span> 器的地步？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera</p>.X<div style="color: black; text-align: left; margin-bottom: 10px;">.error {
      color: red;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这是一个class(类)<span style="color: black;">选取</span>器。class<span style="color: black;">选取</span>器与id<span style="color: black;">选取</span>器的<span style="color: black;">区别</span>是class<span style="color: black;">选取</span>器能作用于期望样式化的一组元素。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera</p>X Y<div style="color: black; text-align: left; margin-bottom: 10px;">li a {
      text-decoration: none;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这<span style="color: black;">亦</span>是<span style="color: black;">咱们</span>最常用的一种<span style="color: black;">选取</span>器——后代<span style="color: black;">选取</span>器。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用于<span style="color: black;">选择</span>X元素下子元素Y，要留意的点是，这种方式的<span style="color: black;">选取</span>器将<span style="color: black;">选择</span>其下所有匹配的子元素，<span style="color: black;">没</span>视层级，<span style="color: black;">因此</span>有的<span style="color: black;">状况</span>是不宜<span style="color: black;">运用</span>的，<span style="color: black;">例如</span><span style="color: black;">以上</span>的代码去掉li下的所有a的下划线，但li里面还有个ul，我不<span style="color: black;">期盼</span>ul下的li的a去掉下划线。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>此后代<span style="color: black;">选取</span>器的时候要 <span style="color: black;">思虑</span><span style="color: black;">是不是</span><span style="color: black;">期盼</span>某样式对所有子孙元素都起<span style="color: black;">功效</span>。这种后代<span style="color: black;">选取</span>器还有个<span style="color: black;">功效</span>，<span style="color: black;">便是</span>创建类似命名空间的<span style="color: black;">功效</span>。<span style="color: black;">例如</span><span style="color: black;">以上</span>代码样式的<span style="color: black;">功效</span>域<span style="color: black;">显著</span>为li。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera</p>X<div style="color: black; text-align: left; margin-bottom: 10px;">a { color: red; }
      ul { margin-left: 0; }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签<span style="color: black;">选取</span>器。<span style="color: black;">运用</span>标签<span style="color: black;">选取</span>器<span style="color: black;">功效</span>于<span style="color: black;">功效</span>域范围内的所有对应标签。优先级仅仅比*高。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera</p>X:visited和X:link<div style="color: black; text-align: left; margin-bottom: 10px;">a:link { color: red; }
      a:visted { color: purple; }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>:link伪类<span style="color: black;">功效</span>于未点击过的链接标签。:hover伪类<span style="color: black;">功效</span>于点击过的链接。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera</p>X+Y<div style="color: black; text-align: left; margin-bottom: 10px;">ul + p {
      color: red;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">相邻<span style="color: black;">选取</span>器，<span style="color: black;">以上</span>代码</p>




啊呀呀 发表于 2024-9-10 12:36:46

你的话语如春风拂面，温暖了我的心房，真的很感谢。

wrjc1hod 发表于 2024-9-26 01:57:33

论坛是一个舞台，让我们在这里尽情的释放自己。

4lqedz 发表于 2024-10-8 18:49:24

你的见解独到，让我受益匪浅，期待更多交流。
页: [1]
查看完整版本: 你必要记住的30个css选取器