8.CSS选择器

2016-07-30 本文已影响48人鸿鹄飞天

一、CSS选择器常见的有几种?

1.选择器类型
①基础选择器
②组合选择器
③属性选择器
④伪类选择器
⑤伪元素选择器

2.基础选择器

选择器	含义
*	通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
#id	id选择器，id选择器，用来匹配特定id的元素。应为id具有唯一性，所以它是用于页面的布局或者在一些特殊唯一的元素上面，但尽量少用
.class	类选择器，匹配class包含(不是等于)特定类的元素。它具有普遍性，可以重复使用
element	标签选择器。因为设置它之后影响范围大，使用它的场景是在确定整个页面的基本样式，而且不会对其他元素照成影响，比方说body上的字体，行高，去掉a链接的下划线等。通常使用后代选择器

举例说明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css">
    *{
        margin:0px;
        padding: 0px;
    }
    body{
        font: 14px/1.5 'Microsoft yahei';
    }
    a{
        text-decoration: none;
    }
    li{
        list-style: none;
    }
    #header,#content,#footer{
        margin-top: 10px
    }
    .nav{
        border: 1px solid;
    }
    .nav li{
        display: inline-block;
        padding: 15px
    }
    .main li,a{
        margin-left: 20px;
    }
    p{
        color: red;
    }
</style>
<body>
    <div id="header">
        <ul class="nav">
            <li>主页</li>
            <li>在饥人谷</li>
            <li>进击的群魔(任务班)</li>
            <li>通关任务</li>
            <li>任务8</li>
            <li>任务8-css选择器</li>
        </ul>
    </div>
    <div id="content">
        <p>课程目标</p>
        <ul class="main">
            <li>掌握常见 CSS 选择器的用法</li>
            <li>对选择器优先级有一定认识</li>
        </ul>
        <p>预习视频</p>
        <a href="javascript:void(0)">课程视频-CSS-常见选择器</a>
    </div>
    <div id="footer">
        从学 CSS 开始，课程视频里的代码需要边听、边暂停、边跟着写
    </div>
</body>
</html>

Paste_Image.png

3.组合选择器

Paste_Image.png
举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    h2{
        color:green;
    }
    .box h2{
        border:1px solid;
    }
    /*设置后代元素选择器，样式作用.box里所有的h2，不仅仅是直接子元素*/

    .box>h2{
        background-color: #ccc;
    }
    /*设置直接子元素选择器，样式作用.box里面最外层的元素,不包括最外层元素里面嵌套的元素*/

    .box .first,.content h2{
        font-size: 40px;
    }
    /*设置多元选择器，样式作用仅仅作用于这两个元素*/

    .content+h2{
        background-color: red;
    }
/*设置直接相邻选择器，样式作用于.content同级且向下相邻的h2.first-“测试1”，
没有选择不是同级的h2-“还用于测试”，
以及是同级且向上相邻h2-“也用于测试”和同级不是相邻的h2-“测试3和测试4”
*/

    .box .first~h2{
        text-align: center;
    }
    /*设置普通相邻选择器，样式作用于.first同级且向下所有h2-“测试2/3/4”*/

    h2.first{
        height: 80px;
    }
</style>
</head>
<body>
  <h2>我是用于测试</h2>
  <div class="box">
    <h2>我也是用于测试</h2>
    <div class="content">
        <h2>我还是用于测试</h2>
    </div>
    <h2 class="first">我是测试1</h2>
    <h2>我是测试2</h2>
    <h2>我是测试3</h2>
    <h2>我是测试4</h2>
  </div>
</body>
</html>

Paste_Image.png

4.属性选择器

属性选择器就是根据元素的属性及属性值来选择元素

Paste_Image.png
1.在属性选择器中，自定义的属性也是可以用的，当然这是不推荐的,但是说明它非常灵活，任何属性都可以使用这些选择器。

Paste_Image.png
2.在属性选择器中经常使用[attribute=value]用于选取带有指定属性和值的元素。它可以应用在表单上，这样就不需再设置class，直接选择需要的元素。

Paste_Image.png
参考：
w3cschool

5.伪类选择器

伪类是一种动态，是用户于html文档进行交互时，是一个元素失去或获得一种状态的特点状态属性，它的状态不是固定的，比方说鼠标经过或离开a链接发生的几种状态。
也可以说用于向某些选择器添加特殊的效果。
伪类选择器和一般的DOM中的元素样式不一样，它并不会改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说却是不可见的。

Paste_Image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    .button{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: orange;
        padding: 0px 20px;
        color: #fff;
        border-radius: 3px;
        cursor: pointer;
    }
    .button:hover{
        background-color:green;
        opacity:0.5;
    }
    .button:active{
        background-color: blue;
        opacity: 0.5;
    }
    input[type]:focus{
        outline:none;
        background-color: yellow;
    }
    .test>p:first-child{
        font-size: 40px;
    }
    .test>p:nth-child(3){
        font-size: 40px;
    }
    /*这里如果不加">"的话，它会在不同层级的子元素里找*/
    .test p:nth-child(3){
        color:green;
    }
    .wrap>p:first-of-type{
        color: red;
    }
    .wrap>p:nth-of-type(1){
        border: 1px solid purple;
    }
    /*这里如果不加">"的话,跟上面一样的*/
    .wrap p:nth-of-type(1){
        font-size:30px;
    }
</style>
</head>
<body>
    <p>这是一个伪类选择器的测试</p>
    <div class="button">ok</div>
    <form>
        用户名:<input type="text" name="username"/>
    </form>
    <div class="test">
        <p>孩子测试</p>
        <div class="wrap">
            <div>
                <p>孩子测试1</p>
            </div>
            <p>孩子测试2</p>
            <p>孩子测试3</p>
        </div>
        <p>孩子测试4</p>
        <p>孩子测试5</p>
    </div>
</body>
</html>

Paste_Image.png

参考：
原创曹婷婷，写的通俗易懂，内容丰富，好用心呀！

6.伪元素选择器

①CSS 伪元素用于向某些选择器设置特殊效果。伪元素为了让某个元素达到特殊的效果，那么需要添加新的元素，然后再设置样式。而伪类只需要在既有元素上添加类别，然后设置样式。

Paste_Image.png
②E::before和E::after它们特有的属性content，这个必须使用，可以在css渲染中向元素逻辑上的头部和尾部添加内容，不会出现在DOM当中，不可复制，仅仅是在 CSS 样式中加入。
③比较常用的方法如下
"string" 使用引号包括一段字符串，将会向元素内容中添加字符串

a::after { content: "↗"; }

attr() 调用当前元素的属性值，比如可以将图片 Alt的提示文字或者链接的 href 地址显示出来

a::after { content:"(" attr(href) ")"; }

url() / uri()用于引用媒体文件

h1::before { content: url(logo.png); }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    a::before{
        content:url(https://img.alicdn.com/tps
/TB12fthLXXXXXXtXFXXXXXXXXXX-520-280.jpg);
    }
    a::after{
        content: "("attr(href)")"
    }
    h2::after{
        content: "↘";
    }
    h2::first-line{
        color:red;
    }
    p::first-letter{
        font-size:40px;
    }
</style>
</head>
<body>
    <a href="https://www.taobao.com/">淘宝</a>
    <h2>天猫超市</h2>
    <p>主题市场</p>
</body>
</html>

Paste_Image.png

参考：
伪类和伪元素的区别
 伪元素

二、选择器的优先级是怎样的

从高到低分别是
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
就是可以做一个直观感受，定位越精确，越快，那它的权重就越高，优先级也就越高。优先级高的样式会覆盖优先级低的，还有选择器权重一样的时候，后面的覆盖前面的。

三、class 和 id 的使用场景

class具有普遍性，它可以重复使用。它可以给不同的元素赋予同一样式，也可以给相同元素设置不同的样式，所以它在结构内部使用。

id具有唯一性，它只能够使用一次，所以它用于页面布局，还可使用在独一无二的样式的标签。

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

使用语义化的命名可以使代码容易读懂

便于代码管理和多人协作

浏览器可能会因为不规范的命名产生不同的样式

提高页面渲染速度

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


    #header{
        /*这是id选择器，选择id名叫header的元素*/
    }
    .header{
        /*这是class选择器，选择class名叫header的元素*/
    }
    .header .logo{
        /*这是后代选择器，表示选择class名叫header的元素里面所有叫选择class名叫logo的元素*/
    }
    .header.mobile{
        /*这是类选择器，选择class类同时具有header和mobile的元素*/
    }
    .header p,.header h3{
        /*这是多元素元素选择器，选择.header中的p,h3元素*/
    }
    #header .nav>li{
        /*这是后代选择器，选择id为header的后代元素里class名为nav里的直接子元素li*/
    }
    #header a:hover{
        /*这是后代选择，选择id为header的后代中所有a链接是悬停状态的伪类选择器*/
    }

六、列出你知道的伪类选择器

:link :visited :hover :active :focus

:first-child :nth-child() :first-of-type :nth-of-type()

:disabled :checked :selection :enabled

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

:first-child选择某父元素下第一个子元素，也可以说是结构上的第一个子元素，这个子元素可以是同种类型或不同类型的。
:first-of-type选择某父元素下所有相同类型的子元素，其中排第一的那个子元素，也可以说是是父元素下相同类型子元素中的第一个。

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

Paste_Image.png

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

text-align作用于块级元素上，只能作用于块级元素，比如说一个div或者段落上面，对内部行内元素（比如文字或者图片）生效。

Paste_Image.png

十、如果遇到一个属性想知道兼容性，在哪查看?

可以在can i use上查看

Paste_Image.png

大部分参考：
曹婷婷
 课件

next:9-1.盒模型
pre:7.HTML4

8.CSS选择器

一、CSS选择器常见的有几种?

二、选择器的优先级是怎样的

三、class 和 id 的使用场景

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

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

六、列出你知道的伪类选择器

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

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

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

十、如果遇到一个属性想知道兼容性，在哪查看?

猜你喜欢

热点阅读