【css】选择器

w3c要求html和css是分离的。html和css的分离,css不再影响html的代码阅读,css的复用性高。html和css分离以后,需要通过css选择器进行选择上的关联。

一些选择器:

id选择器:#ID名称

例:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选择器的使用</title>
    <style>
        /*id选择器:#ID名称*/
        #first{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li id="first">烟台大学</li>    
</ul>
</body>
</html>

类选择器:  . 类名称

通过类添加的样式要比通过元素添加的样式优先级高

例:

<head>
    <style>
        .odd{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li class="odd">烟台大学</li>
    <li class="odd">工商学院</li>
    <li>文经学院</li>
    <li class="odd">泉城学院</li>
</ul>
</body>
</html>

 元素选择器:直接写元素名称

  元素选择器会选中当前页面的所有匹配元素。

例:

<html lang="en">
<head>
    <style>
        li{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>烟台大学</li>
    <li>工商学院</li>
    <li>鲁东大学</li>
</ul>
</body>
</html>

 后代选择器: 空格  范围大

 子代选择器: >    范围小

某些css样式会被子代甚至后代继承。有些属性不会,比如height属性。

并集选择器:用,分隔

#earal,#eara2,#eara3{}

通配符选择器:匹配当前页面的所有元素

伪类选择器:: 来使用伪类选择器

<style>

    li:nth-child(1){

        color:gold;

}

</style>

<style>

        li:nth-child(2n-1){

            color: red;

        }

    </style>

<style>

/*hover:浮动*/

        td:hover{

            background-color: red;

        }

    </style>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值