CSS selector

2016-07-28 本文已影响0人老虎爱吃母鸡

CSS选择器常见的有几种?
- 元素选择器，p {}
- 后代选择器，p a {}
- id选择器，#header {}
- 类选择器，.clearfix {}
- 子选择器，p>a {}
- 同胞选择器
  - 相邻同胞选择器，p+p {}
  - 一般同胞选择器，p~p {}
    .p1+p {
    color: red;
    }
    .p2~p {
    color: blue;
    }
    同胞选择器
- 通配符选择器，* {}
- 属性选择器
  - [attr]，属性名attr的元素
  - [attr=value]，属性名为attr，属性值为"value"的元素
  - [attr~=value]，以空格做分隔符，其中一个值为"value"的元素
  - [attr|=value]，以"value"-开头的元素("-"为连字符)，常用于zh-CN,zh-TW
  - [attr^=value]，以"value"开头的元素
  - [attr$=value]，以"value"结尾的元素
  - [attr*=value]，含有"value"的元素
  - [attr operator value i]，忽略属性值大小写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [lang~="en-us"] {
            color: red;
        }
        [lang|="zh"] {
            color: blue;
        }
    </style>
</head>
<body>
        <a href="#">English:</a>
        <span lang="en-us en-gb en-au en-nz">Hello World!</span><br>
        <a href="#">Portuguese:</a>
        <span lang="pt">Olá Mundo!</span><br>
        <a href="#">Chinese (Simplified):</a>
        <span lang="zh-CN">世界您好！</span><br>
        <a href="#">Chinese (Traditional):</a>
        <span lang="zh-TW">世界您好！</span><br>
</body>
</html>

属性选择器

- 伪类选择器，`a:hover {}`
  伪类选择器表示的是原本存在的元素，相当于给这些元素加上一个类，在CSS3中用":"和 "::"区分伪类和伪元素，但是一般浏览器两种方式都兼容
- 伪元素选择器，`p::first-letter {}`
  伪元素选择器表示的是原本不存在的元素，相当于加上一个元素，注意：`::after`和`::before`中的content的属性，该属性的值有：
    - <string>，文本内容
    - <uri> url()，外部资源（比如图片），如果该资源不能显示，它就会被忽略或显示一些占位
    - attr(x)，将元素的X属性以字符串形式返回
    - open-quote|close-quote，引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .bd::before {
           content: "（我是前面的字符串）";
        }

        .bd::after {
            content: "(" attr(href) ")";
        }

        .jrg::before {
            content: url(https://img.haomeiwen.com/i2348761/f10b477e82e5ac19.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);
        }
        
        q::before {
            content: open-quote;
        }

        q::after {
            content: close-quote;
        }
    </style>
</head>
<body>
    <a href="http://baidu.com" class="bd">百度</a><br>
    <a href="http//jirengu.com" class="jrg">饥人谷</a><br>
    <q>我是引用</q>
</body>
</html>

content属性

选择器的优先级是怎样的?
- 整体遵循下列三条规则
  - 选择器越精确，优先级越高
  - 优先级相同的情况下，后面的样式会覆盖前面的样式
  - !important的优先级最高
- 选择器权重
  选择器权重
  理解起来就是一个内联元素的权重是1000，一个id选择器的权重是100，类选择器、伪类选择器和属性选择器是10，元素选择器和伪元素选择器是1，最后通配符选择器是0，所以最后一样选择器权重的值就是按照这个公式计算value=a*1000+b*100+c*10+d*1
  参考：Specificity Calculator
class 和 id 的使用场景?
id表示的是页面上独一无二的，是不可重复的，而class表示的是一类。
- 当我们需要为一类元素指定样式时就使用class
- 当我们需要为元素做出单独的标记的时候就是用id
使用CSS选择器时为什么要划定适当的命名空间？
- 为了代码的可读性
- 为了代码的易维护性
以下选择器分别是什么意思?
/id为header的元素/
#header{
}
/class为header的元素/
.header{
}
/class为header后代中的class为logo的元素/
.header .logo{
}
/class为header和mobile的元素/
.header.mobile{
}
/class为header后代中的p元素和class为header后代的h3元素
.header p, .header h3{
}
/id为header后代中class为nav子代中的li元素
#header .nav>li{
}
/*id为header后代中的a元素的伪类hover
#header a:hover{
}
列出你知道的伪类选择器
- :link，默认状态下的链接
- :visited，点击过的链接
- :hover，鼠标悬浮上去的链接
- :focus，tab焦距上去的链接
- :active，鼠标按下去的链接
- :first-child，first-child代表了某个元素，这个元素是它父元素的的第一个子元素.
- :first-of-type，匹配元素的所有子元素类型中第一个出现的元素
:first-child和:first-of-type的作用和区别
- 两种用法
  - 第一种和后代选择器组合起来，div :first-child或div :first-of-stype,注意父元素和伪类之间加了空格，表示的是父元素的后代中的第一个子元素或者子元素中某个类型的第一个第一个
  - 第二种和元素选择器一起使用，p:first-child和p:first-of-stype，分别表示的是p元素而且他父元素下的第一个的那个元素和所有p类型的第一个
- 区别是，如果只和元素选择器配合起来用，p:first-child必须是父元素下的第一个，而p:first-ot-type则不需要，只要是p标签中的第一个就可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div :first-of-type {
            background-color: lime;
        }
    </style>
</head>
<body>
    <div>
        <span>This span is first!</span>
        <span>This span is not. :(</span>
        <span>what about this <em>nested element</em>?</span>
        <strike>This is another type</strike>
        <span>Sadly, this one is not...</span>
    </body>
</html>

:first-of-type

运行如下代码，解析下输出样式的原因。

<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style> 
<div class="ct"> 
<p class="item1">aa</p>
<h3 class="item1">bb</h3> 
<h3 class="item1">ccc</h3> 
</div>

1. `<p class="item1">aa</p>`是其父元素下的第一个子元素，所以`.item1:first-child{ color: red;}`生效了。
2. `.item1:first-child{ color: red;}`和`<h3 class="item1">bb</h3> `分别是父元素下其类型元素的第一个，所以`.item1:first-of-type{ background: blue;}`生效了。

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.---MDN

text-align: center的作用在块级元素上，他的作用是让行内元素相对与他的父元素居中显示

如果遇到一个属性想知道兼容性，在哪查看?
caniuse或者MDN

CSS selector

猜你喜欢

热点阅读