css选择器

1.css选择器常见的有几种?

css选择器常见的有5种。
1.基础选择器
基础选择器有id选择器、类选择器、通用元素选择器、标签选择器。

  • id选择器,匹配特定的id元素。
    写法举例:
   #header { 
            font-size: 16px;
            }```
 * 类选择器,匹配特定的class元素。
写法举例:
```css
.nav {
         font-size: 20px;
 }
  • 通用元素选择器,匹配页面任何元素,很少使用。
    写法举例:
    * {
      font-family: "微软雅黑";
}
  • 标签选择器,匹配对应的标签。
    写法举例:
  p {
      color: red;
}

2.组合选择器

选择器 含义
E,F 多元素选择器,用,分隔符,同时匹配E和F
E>F 直接子元素选择器,匹配E元素的所有直接子元素F
E F 后代选择器,选择E的所有后代元素F(包括子元素,子元素的后代等等)
E+F 直接相邻选择器,匹配E元素之后的同级的相邻的子元素F
E~F 普通相邻选择器,匹配E元素之后的所有同级的子元素
E.element 匹配class名是element的E元素
E#element 匹配id名是element的E元素

组合选择器可以避免给标签加上过多的属性值,利用现有标签和属性为目的标签定义样式。
举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        h1,p {
            color: red;
        }
        div p {
            font-size: 20px;
        }
        div>p {
            background-color: #ccc;
        }
        h1+p {
            font-weight: bold;
        }
        h1~p {
            font-style: italic;
        }
        p.pa {
            border:1px solid red;
        }
        p#content {
            border:1px solid #333;
        }
    </style>
</head>
<body>
    <p>段落</p>
    <div id="header">
    <h1>这是一级标题</h1>
    <div class="box">
    <h1>这也是一级标题</h1>
    <p>段落1</p>
    <p class="pa">段落2</p>
    <p id="content">段落3</p>
    <p>段落4</p>
    </div>
    </div>
</body>
</html>

效果:



3.属性选择器

选择器 含义
E[attr] 匹配所有具有属性attr的元素,div[id]就可以取到所有有id属性的div
E[attr=value] 匹配属性attr值为value的元素,div[id=test],匹配id=test的div
E[attr~=value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr^=value] 匹配属性attr的值以value开头的元素
E[attr$=value] 匹配属性attr的值以value结尾的元素
E[attr*=value] 匹配属性attr的值包含value的元素

属性选择器把标签的属性值取出来做匹配。title,type,alt,src等属性都能匹配得到。可以用到的是E[attr=value],可以用于<input>标签,设置type类型相同的表单元素有相同的样式。也可以用于统一设置<img>,<a>标签,或者当需要特别设置一个<img>或者<a>标签时,取它们的地址属性,不用再单独设置class或者id名。
举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        input[type="text"] {
            border: 1px solid blue;
        }
        *[rel] {
            text-decoration: none;
        }
        img[src="1.jpg"] {
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    <form action="a.php">
        姓名:<input type="text" name="name"><br/>
        生日:<input type="text" name="birthday"><br/>
    </form>
    <img src="eg_submit.jpg" alt="图片1">
    <a href="#" rel="链接">这是超链接
    </a>
    <div>
        <img src="1.jpg" alt="图片2">
        <a href="#">链接</a>
    </div>
</body>
</html>

效果:


如上所示,img[src="1.jpg"]可以单独把1.jpg图像拿出来设置属性。
4.伪类选择器

选择器 含义
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素,文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素

关于伪类选择器,E:hover可以用于所有的元素,使它们在鼠标滑过时有动态的效果。
5.伪元素选择器

选择器 含义
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

E::before/E::after设置在对象前/后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性。IE8以下不支持这两个选择器。
CSS3将伪元素选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效。即E:after可转化为E::after。

参考css选择器

2.选择器的优先级是怎样的?

选择器优先级,从高到低:

  1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义

一般如果由多个选择器组成,可以按id选择器的权值为1000,class选择器为100,标签选择器为10,做一下运算。如果算出来权值一样,看哪个选择器作用的更具体,就用哪个。还有一种情况

div { 
     font-size:12px;
}
p {
  color: red;
}
div {
font-size:18px;
}

像上面这样设置了两次同样的选择器,后面的样式会覆盖前面的。


3.class 和 id 的使用场景?

class用于设置一类有相同样式的标签时,可以给它们加上同样的class名,用class选择器设置样式。这样在以后添加类似样式的标签时,直接给标签添加一个应用过的class名就可以解决。而且一个标签可以用class="xxx xxx xxx"的方式加多个class名,有助于简化代码。
id主要用于主要外结构,如一个页面的导航区,内容区,页脚等。还可以应用在页面中有独一无二的样式的标签上。因为同样的id名在一个页面中只能出现一次,所以一般编写内容时按照页面的样式展现规律,使用class,更方便。

4.使用CSS选择器时为什么要划定适当的命名空间?

实现页面时,不同的css文件如果一起加载,这样就会有命名冲突。比如a.css和b.css中都有.memu,.content这两种class选择器,这样它们一起加载时就会产生命名冲突。为了避免冲突,要划定适当的命名空间。

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

#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
  1. 设置id属性为header的元素的样式。
#header{
}```

2. 设置class属性为header的元素的样式。
```css
.header{
}```
3. class属性是header的元素的子元素中,class属性是logo的元素的样式设置。
```css
.header .logo{
}```
4. class属性既是headr又是mobile的元素的样式设置。
```css
.header.mobile{
}
  1. class属性是header的元素的子元素中,标签p和h3的样式设置。
.header p, .header h3{
}
  1. id属性是head的元素的子元素中,class属性是nav的元素的直接子元素为li的元素的样式设置
#header .nav>li{
}
  1. id属性是header的元素的子元素中,鼠标悬停在a链接上时的样式设置。
#header a:hover{
}

6.列出你知道的伪类选择器

  • 我知道的伪类选择器
    • :hover, :active, :link. :visited
    • :first-child, :last-child
    • :first-of-type, :last-of-type

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

E:first-child匹配的是E是它的父元素的第一个子元素的情况。
E:first-of-type匹配的是E作为子元素第一次出现的情况。
区别在于E:first-child如果E这个子元素不是第一个出现的就匹配不到,而E:first-of-type只要出现E元素就可以匹配得到。
举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        p:first-child {
            border: 1px solid red;
        }
        p:first-of-type {
            color: red;
        }
    </style>
</head>
<body>
    <div id="header">
        <p class="content" href="#">段落1</p>
        <div class="nav">
            <h3>三级标题2</h3>
            <p>段落2</p>
            <p>段落3</p>
            <p>段落4</p>
        </div>
    </div>
</body>
</html>

效果图:



p元素是id为header的元素的第一个子元素,所以

p:first-child {
            border: 1px solid red;
        }

设置对段落1是有效的,而作为class是nav的div元素的子元素,p并不是第一个,所以上面的设置无效。段落2没有边框。

p:first-of-type {
            color: red;
        }

对两个div中的第一次出现的p元素都有效,段落1、段落2字体变为红色。

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

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

输出结果:


由输出结果看,class属性是item1的p元素作为div的子元素,是同级元素中的第一个,所以.item1:first-child有效,匹配到p,所以aa字体颜色变为红色。
class属性是item1的元素有p、h3。.item1:first-of-type匹配到的分别是同级的第一个p元素和同级的第一个h3元素。这两个元素的背景色设为蓝色。
对于class属性而言,.class:first-childE:first-child类似,只看父元素的第一个子元素是否匹配。而.class:first-of-type则匹配属性相同的不同元素中的第一个元素。

9.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

text-align的作用是让行内元素水平居中,作用在块级元素上,使块级元素内的行内元素(如文本和图片)水平居中。

10.如果遇到一个属性想知道兼容性,在哪查看?

can i use网站查看。

本文版权归作者和饥人谷所有,转载请注明出处

推荐阅读更多精彩内容

  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 924评论 0 0
  • 1.class 和 id 的使用场景?#### class是类选择器,选择的是同一个类的元素;id选择器选择的是有...
    zhaonu阅读 111评论 0 0
  • class 和 id 的使用场景?class指定标签的类名, 把需要相同样式的元素归类于一个name下,需要此样式...
    饥人谷_CCCLARITY阅读 116评论 0 0
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 644评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 128,941评论 18 137
  • 切切实实落了一场雨 窗上还挂着泪滴 天亮还没有落到底 香烟缭绕的散去 找不到你来的痕迹 生活原来如此诗意 虚虚幻幻...
    青山如黛1阅读 99评论 1 3
  • 周六晚上,俞白准时坐在电视机前收看《歌手》。 “白......”身边响起熟悉的哈萨克语。 “怎么了?”俞白搂住躺在...
    戒月阅读 459评论 1 1
  • 相信很多胖纸们刚开始减肥时都是激情百倍,可是,没过多久就鬼哭狼嚎!因为实在是太难坚持啦!其实,想要顺利度过减肥期也...
    喜欢雅文的文阅读 482评论 0 1
  • 在Some points 1中对四大组件做了概览,这里详细记录一下官方文档上对Service做出的说明。 serv...
    Jinjins1129阅读 157评论 0 1