美文网首页
css选择器

css选择器

作者: 疯小儿 | 来源:发表于2017-07-12 21:33 被阅读0次

一、选择器的种类

  • 元素选择器 :p{},div{};
  • 类选择器:.header{}
    HTML:
<div class="header">Css选择器<div>

CSS:

.header{ color: red;}
结果:
  • ID选择器:#header{}
    HTML:
<div id="header">Css选择器<div>

CSS:

#header{ color: red;}

结果:Css选择器也是红色的。

  • 通配符选择器:*{}匹配所有的标签。
    通配符选择器
  • 后代选择器:div p{}只要p标签的祖先是div标签,p标签的内容就会显示。例如:
    后代选择器
  • 子代选择器:div>p{}。当p标签的父亲是div标签的时候,p标签的内容才会显示。例如:
    子代选择器
  • 同胞选择器:
  • 相邻同胞选择器:A+B{},A和B有相同的父节点,并且B是A紧跟的下一个节点。
  • 一般同胞选择器:A~B {},AB有相同的父节点,B在A之后,但不一定是紧挨着A。
  • 属性选择器:
  • [attr] 该选择器选择包含 attr 属性的所有元素。
  • [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  • [attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素。
  • [attr|=val] : 选择attr属性的值以val(包括val)或val-开头的元素。(“-”连字符,表示用来处理语言编码)
  • [attr^=val] : 选择attr属性的值以val开头(包括val)的元素
  • [attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
  • [attr*=val] : 选择attr属性的值中包含字符串val的元素。
    代码与效果
    参考:属性选择器
  • 伪类选择器:a:hover{}
  • 伪元素选择器:clearfix:affter{}
    伪类、伪元素选择器种类及作用:
    参考1参考2

二、选择器优先级

  • 选择器越精确,优先级越高。
  • 优先级同等的情况下:后面的优先级会高于前面的。
  • 标注有!important的优先级最高。
  • 选择器的权重(权重越高,优先级越高)
    内联样式,加1,0,0,0.
    ID选择器的特殊性值,加0,1,0,0。
    类选择器、属性选择器或伪类,加0,0,1,0。
    元素和伪元素,加0,0,0,1。
    通配选择器*对特殊性没有贡献,即0,0,0,0。
    计算公式:value=a*1000+b*100+c*10+d*1
    例如:
h1.title{color:blue} /* specificity = 0,0,1,1 */
.title{color:red;} /* specificity = 0,0,1,0 */
<h1 class="title">hello world</h1>/*结果是蓝色的*/

参考:css3-selectors

3.其他的问题:

  • first-childfirst-of-type的作用和区别
    HTML:
<div>
  <span>This span is limed!</span>
  <span>This span is not. </span>
  <span>This span is <em>red!</em></span>
 <strike>This is another type</strike>
  </div>```
如果css的代码:
 - `span:first-child{ color: lime;}`或`span:first-of-type {color: lime;}`则这时候显示的结果:`this span is limed!` 是黄绿色(lime的颜色)。
 - `span :first-child{ color: lime;}`或`span :first-of-type {color: lime;}`则`red!`是黄绿色。
 - `div:first-child{ color: lime;}`或`div:first-of-type {color: lime;}`则全部为黄绿色。
`first-child`和`first-of-type`的区别:
 - `div :first-child{ color: lime;}`则`This span is limed!`和`red!`是黄绿色。
 - `div :first-of-type { color: lime;}`则`This span is limed!、red!`和`This is another type`是黄绿色。
![](https://img.haomeiwen.com/i6494572/abefeba6ba1b422c.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

* 运行如下代码,解析下输出样式的原因
![](https://img.haomeiwen.com/i6494572/ba59db9f7609c66b.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
原因如下:
`<p class="item1">aaa</p>`是父元素div下的第一个子元素,伪类生效,所以aaa变成了红色。
`<p class="item1">aaa</p>`和`<h3 class="item1">bb</h3>`是其父元素div下的类型元素的第一个,aaa和bb的背景都变成了蓝色了。

* `text-align:center`的作用是什么,作用在什么元素上?能让什么元素水平居中?
`text-align:center`作用是行内元素相对于父元素水平居中。作用在块级元素上。
居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右`margin`设为`auto`。

相关文章

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • CSS选择器

    CSS选择器的作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素。 CSS选择器的类型 CSS选择器大...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS-选择器1-概述

    CSS选择器-系列文章 CSS选择器-系列文章下一节 CSS选择器2-类选择器CSS3参考手册

  • CSS选择器、优先级以及!important知识总结

    一、CSS选择器 关于CSS选择器,首先请看这里:CSS 选择器参考手册 通过以上,我们可以将CSS选择器分为以下...

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

网友评论

      本文标题:css选择器

      本文链接:https://www.haomeiwen.com/subject/qtvvhxtx.html