CSS选择器

**关键字: **
** 1.css选择器使用场景; **
** 2.css选择器优先级; **
3. first-child和:first-of-type

1.class 和 id 的使用场景?

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中

<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

<style>
p.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":

实例
<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
   <p id="para1">Hello World!</p>
</body>

CSS选择器常见的有几种?

重点说下div标签
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素

以上CSS选择器参考地址

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

CSS优先级从高到低分别是
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

复杂情况

Snip20170313_202.png

以上讲解:
1.权重由大到小a >b>c>d, 在最大权重相同情况下,再比下一级,谁的权重大就依照它的样式

实例:

Snip20170313_200.png

Paste_Image.png

以上参考地址

a:link, a:hover, a:active, a:visited 的顺序是怎样的？为什么？

Paste_Image.png

正确顺序为:

<style>
a:link    {color:green;}
a:visited {color:black;}
a:hover   {color:red;}
a:active  {color:yellow;}
</style>

原因:a:visited必须不能放最后,必须放第二个,因为放后面会覆盖它所有前面的属性.
必须按这个顺序,如果没有a:hover和a:active其中一个,a:visited也必须在他们两之前.
而a:hover和 a:active,不会覆盖别的属性,而a:link, a:hover, a:active的顺序是符合用户的习惯
未点击-鼠标覆盖-点击时

以下选择器分别是什么意思?

#header{
}
解释 : id选择器,匹配id="header"的所有元素


.header{
}
解释:匹配class=headed的所有元素

.header .logo{
}
解释:匹配class=header的元素里后代中class=logo的所有元素


.header.mobile{
}
解释:就是匹配这个class="header,mobile"这两个值的元素


.header p, .header h3{
}
解释:匹配class=header的后代里所有p元素和class=header后代里所有h3元素


#header .nav>li{
}
解释:匹配id=header的所有后代里,class=nav里找子代为li的标签


#header a:hover{
}
解释:匹配id=header后代里其中a标签里hover属性的元素

#header .logo~p{
}
解释:匹配id=header后代里,其中class=logo的标签之后并且同级的p标签,同级=两者是同一个父元素.


#header input[type="text"]{
}
解释:匹配id=header后代里,其中input标签里type=text的所有元素

html:
<ul class="navbar">
            <li><a href="#">首页</a></li>
            <li><a href="#">作品</a></li>
            <li>
                <a href="#">更多</a>
                <div class="child">
                    <a href="#">Github</a>
                    <a href="#">博客</a>
                    <a href="#">知乎</a>
                </div>
            </li>
        </ul>
.css样式:
.navbar>li:hover .child{
    display: block;
}
解释:在class=navbar里,直接子代为li的标签在鼠标悬浮下,给li的子代里有class=child的创建一个display: block的样式.

上述疑惑:后代(空格隔开的)包括子代孙代曾孙代,而子代(>隔开的)就是第一代

列出你知道的伪类选择器

Paste_Image.png

div:first-child和div:first-of-type的作用和区别

div:first-child作用:
匹配:这个div在所有父元素中:必须是第一个出现的子元素并且这第一个子元素必须是div元素
举例如下:

Paste_Image.png

div:first-of-type的作用:
匹配:属于其父元素中里面是div标签的,且在同种标签中的第一个出现的div.

等同于 :nth-of-type(1)
举例如下:

Paste_Image.png

区别:上图红色字体有说明

以上参考地址

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

<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>

输出样式:

Paste_Image.png

上图解释:

.item1:first-child
class为item的父元素即div，div下第一个子元素为p，且p的class为item，所以仅对p元素生效-字体变红。
.item1:first-of-type
class为item的父元素即div，div下class为item1子元素有1个p元素和2个h3元素，所有对第1个p元素（也是唯一一个）和第1个h3元素生效-背景变蓝色。

CSS选择器

1.class 和 id 的使用场景?

CSS选择器常见的有几种?

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

以下选择器分别是什么意思?

列出你知道的伪类选择器

Paste_Image.png

div:first-child和div:first-of-type的作用和区别

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

推荐阅读更多精彩内容

a:link, a:hover, a:active, a:visited 的顺序是怎样的？为什么？