CSS 选择器的多种应用(更新包含CSS1/2/3/4…)

当前位置: 首页 » 记录 » css » CSS 选择器的多种应用(更新包含CSS1/2/3/4…)

分类: css 545阅读阅读模式

序:CSS 选择器在不断进化中,说不定某一天能飞上天。

 

 

CSS 1 :

Element 选择器

对于 Element「标签」选择器最为熟悉不过了。

如 div 标签

  1. <div>
  2. ...
  3. </div>

 

例:div{ ... }

注:不建议这样直接使用标签选择器,范围杀伤力太大了。

 

class 选择器

同样,class「类」是日常必写的。

如 my 类

  1. <div class="my">
  2. ...
  3. </div>

例:.my{ ... }

对于类,是一个美好的标签,但不建议嵌套 5 个及以上的类,对页面响应非常不友好,例:.my1 .my2 .my3 .my4 .my5 { ... }

 

ID 选择器

ID 选择器能少用就少用。

所用之处只建议以下几个方向:

如登录名、地址选择、购物车等等具有特殊性的需调用的

  1. <!-- javascript 调用时用,如登录名 -->
  2. <input type="text" id="loginName">

例:#loginName{ ... }

如关于页面、联系页面、登录页面、首页等等单页面

  1. <!-- 单页面归类用,如关于页面命名 -->
  2. <div id="about"></div>

例:#about{ ... }

如页面侧边栏、页面主内容、页面头部、页面底部等等大框架

  1. <!-- 页面大框架用,如侧边栏命名 -->
  2. <div id="sidebar"></div>

例:#sidebar{ ... }

注:ID 选择器慎用、少用、精用。

 

:link、:visited 伪类选择器

:link 伪类是表示超链接原始的状态「a 标签专属」。

如超链接初始字体颜色为红,例:a:link{ color:red; }

:visited 伪类是表示超链接访问后的状态「a 标签专属」。

如超链接访问后背景颜色为蓝色,例:a:visited{ background:blue; }

 

:active 伪类选择器

:active 伪类是表示元素的激活状态,如按钮按下时的背景颜色为黑色,例:button:active{ background:black; }

 

 

CSS 2:

* 选择器

* 「全局」选择器在 CSS 2 中被定义不见得出奇,毕竟当时一个全局「*」搞掂全局「Global」。

同样的现在使用的也被经常提起,一个 *{margin:0; padding:0;} 搞定各种浏览器水土不服。

注:不建议通过 * 的来重定义浏览器差异,通过标签重定义是恰好的办法。

 

[] Attribute 选择器

Attribute 「属性」选择器很美妙,这个美妙体现在后面的 CSS 3 中,在 CSS 3 中大量拓展了属性选择器。

如每个具有 alt 属性的图片,例:img[alt]:{ ... }

属性选择器和类选择器具有相同的优先值。标签中必不可少的属性,在写样式时,恰好的运用属性选择器,能减轻代码量。

对于行内样式,我是深恶痛绝的。通过人工排查行内样式? javascript 快速排查行内样式?no no no 。

如图:一个 *[style]{border: 2px solid red;}简单 CSS 代码,就能快速圈出所有行内样式。

 

[~=] 选择器

[~=] 属性选择器是 CSS2 的属性选择器其中的一个进阶尝试,对属性选择器的值作了一个模糊筛选功能,该筛选功能通过词语间的空格进行划分。

如属性值中具有 darlang 词语

  1. <!-- 能匹配 -->
  2. <a title="hi darlang"></a>
  3. <!-- 不能匹配 -->
  4. <a title="hi darlang.com"></a>
  5. <!-- 不能匹配 -->
  6. <a title="hi Darlang"></a>

例:a[title~=darlang]{ ... }

 

[|=] 选择器

[|=] 属性选择器是 CSS2 的属性选择器其中的一个进阶尝试,对于属性选择器的值作了一个简单的判断,判断筛选所有以指定词语开头的属性选择器。

注:[|=] 属性选择器对于指定词语开头的需在词语后面加中横线「 - 」连接。

如属性值中具有 darlang 的词语

  1. <!-- 能匹配 -->
  2. <a title="darlang-everying"></a>
  3. <!-- 不能匹配 -->
  4. <a title="darlangeverying"></a>
  5. <!-- 不能匹配 -->
  6. <a title="hi darlang.com"></a>
  7. <!-- 不能匹配 -->
  8. <a title="Darlang-everying"></a>

例:a[title|=darlang]{ ... }

 

:hover、:focus 伪类选择器

:hover 估计是CSS书写中最常见的鼠标动作了,意为鼠标悬浮时执行的动作。如鼠标悬浮 div 时执行的样式,例:div:hover{ ... }

当然,拓展一下该动作的额外用法,如

  1. <!-- 当悬浮大 div 时,里面的小 div 背景变成红色 -->
  2. <div class="big-div">
  3. <div class="inside-div"> ... </div>

例:.big-div:hover .inside-div { ... }

:focus 多用于输入框,选择框等鼠标焦点动作。如当点击输入框时进行书写时<input type="text">,例:input:focus { ... }

注:在手机端,:focus 的应用往往比 :hover 有更佳的实用性。

 

:first-child 伪类选择器

:first-child 伪类指定了父元素下的第一个子元素。

如作用于 div 的子元素 span ,那么类名 first 是第一个,表示作用于它

  1. <div class="parent">
  2. <span class="first"> ... </span>
  3. <span class="middle"> ... </span>
  4. <span class="last"> ... </span>
  5. </div>

例:.parent span:first-child{ ... }

 

+ 选择器

+ 选择器的目的很单纯,即指定与当前元素紧挨于后边的同级元素。

如.first + div 表示指第二个类 middle,所以只对类 middle 起作用,而再往后的类last 的 div 则波及不到

  1. <div class="first"> ... </div>
  2. <div class="middle"> ... </div>
  3. <div class="last"> ... </div>

例:.first + div { ... }

 

> 选择器

> 选择器是对下级子元素的一个操作,表示对当前元素指定的下级元素进行作用,下下级不受影响。

如.e1 > .c2 表示类 e1 所有下级子元素 c2 ,但对于下下级的 c2 不受影响

  1. <div class="e1"> <!-- 父元素 -->
  2. <div class="c2"> <!-- 子元素 -->
  3. <div class="c2"> <!-- 孙子元素 -->
  4. ...
  5. </div>
  6. </div>
  7. <div class="c3">
  8. ...
  9. </div>
  10. <div class="c2">
  11. ...
  12. </div>
  13. </div>

例:.e1 > .c2 { ... }

 

:lang() 选择器

:lang() 选择器地位有点尴尬,可有,用处几乎为无,可无,但搁在那儿。括号里面填写的是地区语言识别码。

相对 HTML 作用来说,是对文字语言作甄别,:lang() 所支持的语言版本种类相对比较少,CSS 中控制的话,需要完整填写语言代码。

CSS 4 进阶

:lang(,,,) 可填写多个地区代码,也支持简单的通配符, :lang(en,cn) 或者 :lang(*-CH) 也是可以的。

 

 

CSS 3:

~ 选择器

~ 选择器恰好的是 + 选择器的一个范围放大,对指定元素后面的所有相符合的元素进行一窝端(前面的不受牵连)。

如 .first ~ div 那么它的作用范围将会是类 middle 及所有同级以后的 div

  1. <div class="first"> ... </div>
  2. <div class="middle"> ... </div>
  3. <div class="last"> ... </div>
  4. <div> ... </div>
  5. <div> ... </div>
  6. <div> ... </div>
  7. ...

例:.first ~ div { ... }

 

:not() 选择器

:not() 选择器指定某个排除的元素,该元素将不在样式展示。

如:not(div) ,表示样式中将会不影响所有 div ,当然也可以指定标签属性或类或ID等。

  1. <div> div </div>
  2. <div> div </div>
  3. <a href="#"> a </a>
  4. <a href="#"> a </a>
  5. <div> div </div>
  6. <p> p </p>
  7. <p> p </p>
  8. <span> span </span>
  9. <span> span </span>
  10. <p> p </p>

例:body > :not(div){ ... }

拓展的,当遇到文档中标签属性书写不规范的时候,为了快速排除,可以这样巧写排错。

 

  1. /* 排查 a 标签无 href : */
  2. a:not([href]){ ... }
  3. /* 排查 a 标签 href 值不为javascript 或 # : */
  4. a[href]:not(javascript):not(#){ ... }
  5. /* 排查表单属性没有赋予 name 和 id : */
  6. form:not([name]):not([id]),
  7. input:not([name]):not([id]),
  8. button:not([name]):not([id]),
  9. select:not([name]):not([id]),
  10. textarea:not([name]):not([id]),{ ... }
  11. /* 排查 label 标签没有 for 属性: */
  12. label:not([for]){ ... }

CSS 4 进阶

在CSS4中,:not(,,,) 可定义多个排除,各值用逗号分割,简化了原有中的多个排除值的臃肿写法。

原有也可以多个值排除,写法::not(div):not(span):not(a){ ... }

CSS 4 写法::not(div,span,a){ ... }

在 CSS 4 中,:not() 可以配合 :matches() 使用。

 

[^=] 选择器

[^=] 选择器定义了以指定属性开头的标签,[|=] 同样有这种效果,与 [|=] 不同的是,[^=] 可以指定任意开头的字母或数字而 [|=] 则需要指定值后面具有中横线「-」分割。

如匹配 darlang 开头的值:

  1. <!-- 能匹配 -->
  2. <a title="darlang-everying"></a>
  3. <!-- 能匹配 -->
  4. <a title="darlangeverying"></a>
  5. <!-- 不能匹配 -->
  6. <a title="hi darlang.com"></a>
  7. <!-- 不能匹配 -->
  8. <a title="Darlang-everying"></a>

注意大小写敏感。

例:a[title^="darlang"]{ ... }

拓展的:快速排查所有不具有 http 开头的超链接

  1. a:not([href^='http']) { ... }

 

[$=] 选择器

与 [^=] 相反, [$=] 选择器表示指定结尾的属性值,作用效果一样。

如指定 darlang 结尾

  1. <!-- 能匹配 -->
  2. <a title="everyingdarlang"></a>
  3. <!-- 不能能匹配 -->
  4. <a title="darlangeverying"></a>
  5. <!-- 不能匹配 -->
  6. <a title="hi darlang.com"></a>
  7. <!-- 不能匹配 -->
  8. <a title="everyingDarlang"></a>

例:a[title$=darlang] { ... }

拓展一下,快速找出具有 .html 后缀的超链接

  1. a[href$=".html"] { ... }

 

[*=] 选择器

匹配当前所有字符串中包含的内容,内容位置不限制。

如指定包含 darlang 单词的都起作用。

  1. <!-- 能匹配 -->
  2. <a title="everyingdarlang"></a>
  3. <!-- 能匹配 -->
  4. <a title="darlangeverying"></a>
  5. <!-- 能匹配 -->
  6. <a title="hi darlang.com"></a>
  7. <!-- 不能匹配 -->
  8. <a title="everyingdarl-ang"></a>
  9. <!-- 不能匹配 -->
  10. <a title="everyingDarlang"></a>

例:div[class*=darlang] { ... }

拓展,通过 CSS 去广告,如百度推广的 id 为bd_xxx的、友盟的广告位xxxuuidxxx,那么通过display:none方式去掉。

  1. *[id*=]{ ... }
  2. *[id=uuid]{ ... }

 

:target 选择器

:target 的作用比较专一,只对当前href的目标描点作用。

注:只有点击后,链接目标的样式才起作用。

如突出当前链接到的页面描点,当点击链接时,链接目标的样式起作用。

  1. <a href="#dse">dse 链接</a>
  2. <p id="dse">dse 链接描点目标</p>

例: p:target { ... }

 

:enabled、:disabled 选择器

:enabled 多用于表单,作用于当前启用状态的表单,而 :disabledd 则恰好相反,对当前为禁用状态的表单起作用。

如启用状态的为蓝色,禁用状态的为红色

  1. <input type="text" value="en" >
  2. <input type="text" value="en" >
  3. <input type="text" value="dis" disabled="disabled">
  4. <select name="" id="" disabled="disabled">select</select>

例::enabled { color:blue; ... } :disabled { color:red; ... }

 

:checked 选择器

:checked 对选中部分起作用,但目前主流浏览器还是不起作用。

 

:root 选择器

:root 选择器仅作用于页面根元素,即 html 元素。:root { ... } ,对 HTML 标签。

 

:empty 选择器

:empty 选择器匹配子元素节点或文本为空,意外是,对于 input 类似的单标签,也是能够匹配的。

如匹配空的标签

  1. <!-- 不能 -->
  2. <div>something</div>
  3. <!-- 能 -->
  4. <p></p>
  5. <!-- 能 -->
  6. <input type="text" value="some">
  7. <!-- 不能 -->
  8. <textarea name="" id="" cols="30" rows="10">something</textarea>

例: *:empty { ... }

 

:nth-child(n) 选择器

:nth-child(n) 伪类中的 「n」 为常数或者为变量,即指定了父元素下的位置为 n 的子元素。

在常数中用的是1,2,3,4... ,变量的则可以 1n,3n+1,3n,2n+2... 变量 n 即为倍数。

3n 的作用为 3n => 3/6/9/12/15...,那么只要是3的累加数,就能作用到。

如 p 标签的 3n ,则 p 标签累加数为3的倍数,则能作用到,下方标签为 6 的不是 p 标签则不能作用到,但却是累计入后方的数量。

  1. <p>darlang</p>
  2. <p>darlang</p>
  3. <p>darlang</p>
  4. <p>darlang</p>
  5. <p>darlang</p>
  6. <div>darlang - div</div> <!-- 别以为这不是 p 标签就不算是第六位 -->
  7. <p>darlang</p>
  8. <p>darlang</p>
  9. <p>darlang</p>
  10. <p>darlang</p>

例: p:nth-child(3n){ ... }

 

:nth-last-child(n) 伪类选择器

:nth-last-child(n) 与 :nth-child(n) 作用效果一样,不过 :nth-last-child(n) 是从后往前数,为倒数计数。

1 表示倒数第一,2 表示倒数第二 ...

 

:last-child() 伪类选择器

:last-child() 与 first-child() 效果类似,:last-child() 作用于同级元素的最后一个。

如作用于 div 的子元素 span ,那么类名 last 是最后一个,表示作用于它

  1. <div class="parent">
  2. <span class="first"> ... </span>
  3. <span class="middle"> ... </span>
  4. <span class="last"> ... </span>
  5. </div>

例:.parent span:last-child{ ... }

 

:only-child 伪类选择器

:only-child 伪类选择器只对字元素或节点只有一个的起作用。

如子节点(包括元素)存在2个及以上的,则无效。

  1. <!-- 能匹配 -->
  2. <div class="parents">
  3. <div class="onlyChild">haha</div>
  4. </div>
  5. <!-- 不能匹配 -->
  6. <div class="parents">
  7. <div class="bigChild">lala</div>
  8. <div class="smallChild">ohoh</div>
  9. </div>

例:.parents :only-child{ ... }

 

:first-of-type 选择器

:first-of-type 选择器对于类型的匹配颇为挑剔,只对同级所有元素的同类型的第一个起作用。

如匹配到第一个 p 标签及第一个 div 标签

  1. <div class="parent">
  2. <p>p</p><!-- 能匹配 -->
  3. <p>p</p>
  4. <div>div</div><!-- 能匹配 -->
  5. <div>div</div>
  6. <div>div</div>
  7. <p>p</p>
  8. <p>p</p>
  9. <div>div</div>
  10. <p>p</p>
  11. <p>p</p>
  12. </div>

例: .parent :first-of-type { ... }

 

:nth-of-type(n) 选择器

:nth-of-type(n) 选择器是 :nth-child(n) 选择器的一个细分,:nth-child(n) 对同级元素第一个开始计算,包括任意类型的标签。而 :nth-of-type(n) 选择器则对指定标签进行计数,不同标签忽略,不计收入顺序。

如对类型的 p 标签第六个进行操作

  1. <p>darlang</p>
  2. <p>darlang</p>
  3. <p>darlang</p>
  4. <p>darlang</p>
  5. <p>darlang</p>
  6. <div>darlang - div</div><!-- 计数会忽略该标签 -->
  7. <p>darlang</p><!-- 这是第六个同类型元素计数 -->
  8. <p>darlang</p>
  9. <p>darlang</p>
  10. <p>darlang</p>

例: p:nth-of-type(6) { ... }

 

:nth-last-of-type(n) 选择器

:nth-last-of-type(n) 选择器是 :nth-of-type(n) 选择器的作用效果相同、顺序相反。在倒数计数中,它对指定位置元素进行操作,计数时忽略不同类型的元素。

如对类型的 p 标签倒数第六个进行操作

  1. <p>darlang</p>
  2. <p>darlang</p>
  3. <p>darlang</p>
  4. <p>darlang</p> <!-- 这是第六个同类型元素计数 -->
  5. <p>darlang</p>
  6. <div>darlang - div</div><!-- 计数时忽略该标签 -->
  7. <p>darlang</p>
  8. <p>darlang</p>
  9. <p>darlang</p>
  10. <p>darlang</p>

例: p:nth-of-type(6) { ... }

 

:last-of-type 选择器

:last-of-type 选择器与 :first-of-type 选择器效果相同、顺序相反,它是只对同级所有元素的同类型的最后一个起作用。

如匹配到最后一个 p 标签及最后一个 div 标签

  1. <div class="parent">
  2. <p>p</p>
  3. <p>p</p>
  4. <div>div</div>
  5. <div>div</div>
  6. <div>div</div>
  7. <p>p</p>
  8. <p>p</p>
  9. <div>div</div><!-- 能匹配 -->
  10. <p>p</p>
  11. <p>p</p><!-- 能匹配 -->
  12. </div>

例: .parent :last-of-type { ... }

 

:only-of-type 选择器

:only-of-type 选择器比较有意思,在同级元素中,该类型中,只有它一个,它才起作用。

如同级元素中的 p 标签,只有一个则起作用,有一个以上的同类型,都不行。对于其他类型的标签,多少个都与 p 标签无关

  1. <!-- 能匹配 -->
  2. <div class="parent">
  3. <p>p</p>
  4. <div>div</div>
  5. <div>div</div>
  6. <div>div</div>
  7. </div>
  8. <!-- 不能匹配 -->
  9. <div class="parent">
  10. <p>p</p>
  11. <p>p</p>
  12. <div>div</div>
  13. </div>

例: .parent p:only-of-type{ ... }

 

 

CSS 4:

截至目前20171120,支持 CSS 4 的浏览器还是一片飘红。以下仅供参考

输入密码查看加密内容:

 

相关文章