程序博客网 > 悬案 知乎

【Web 前端】CSS选择器

来源：互联网 发布：悬案 知乎 编辑：程序博客网 时间：2024/05/03 15:58

选择器

选择器{

样式；

}


标签选择器是html中的标签 如：p{font-size:12px;line-height:1.6em;}

类选择器     .类选择器{CSS样式代码

                       }

注意：1、英文原点开头   类选择器名称可以任意取

    2、用合适的标签将要修饰的内容标记起来 比如：<span>hello Volcano</span>

    3、用class=“类选择器名称”为标签设置一个类<span class="greeting">hello Volcano</span>

            4、设置类选择器的样式 .greeting{color:red}


（转）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
    color:red;
}
.setGreen{
    color:green;
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时，我们班上了一节<span class="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>


ID选择器

前面是#

id=“id名称”  


ID选择器和类选择器的区别

ID选择器只能在文档中使用一次，类选择器可以使用多次；

词列表方式为一个元素设置多个样式


例子（转）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类和ID选择器的区别</title>
<style type="text/css">
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
     <p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    
</body>
</html>


子选择器

用大于号选择指定标签元素的第一代子元素


例子（转）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
        <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
    <ul>
        <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>


包含（后代）选择器

加入空格，选择指定标签下的后背元素 例如：. first span{color:red}


>>与自选择器的区别：子选择器作用于它的直接后代，即是子元素的第一后代

后代选择器作用于所有的后代元素，后代选择器用空格来选择，子选择器用空格来选择


例子（转）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}


.food>li{
    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
</head>
<body>
 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
    <li>水果
        <ul>
        <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
    <ul>
        <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>


</body>
</html>
 

显示：

三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。

  • 水果
    • 香蕉
    • 苹果
    • 梨
  • 蔬菜
    • 白菜
    • 油菜
    • 卷心菜
food>li  改为food li 显示

  • 水果
    • 香蕉
    • 苹果
    • 梨
  • 蔬菜
    • 白菜
    • 油菜
    • 卷心菜


通用选择器

匹配html中所有标签    如 *{ color ：red}


伪类选择器

a:hover{color:red}   当鼠标滑过这个字的时候会变为红色


分组选择符

，

h1,span{color:red}

相当于hi{color:red;}

   span{color:red;}


例子（转）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1,span{color:red;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>


0 0
悬案 知乎 悬案 知乎
原创粉丝点击
热门IT博客
调查问卷统计分析软件调查问卷统计分析软件
黑苹果安装ubuntu黑苹果安装ubuntu
微信支付没网络能用吗
playclub脸部数据
sae域名备案
javascript index
电子板报软件
2012总决赛球员数据
python统计字母个数
微信加友软件免费下载
电脑美工都学什么
淘宝爱疯声海
中国人民大学网络教育
软件人才外派
淘宝分销衣服赚钱吗
怎样让淘宝号快速升心
库里2k17数据
网络安全法出台
代理软件下载
google浏览器恶意软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 权路通途 权路通途全文兔费阅读 陆渐红权路通途 陆浙红权路通途 权路通途 冬虫 权路通途txt下载 权谋升迁有道全文阅读 金权道韩式自助烤肉 权谋升迁有道全文免费阅读 权谋有道朱立诚 权谋有道朱立诚免费阅读 权谋有道 锦猪 升迁有道权谋 权阉在上 朋友圈权限 访问权限 管理员权限 应用权限 权限 英文 手机权限 权限设置 权限英文 oa权限系统 文件夹权限 权限控制 koot权限 rott权限 无网络访问权限 网络访问权限 ipv6无访问权限 设置朋友圈权限 破解朋友圈权限 朋友圈权限怎么设置 朋友圈设置权限 朋友圈权限设置 win管理员权限 手机麦克风权限设置在哪里 麦克风权限在哪里开启 手机权限管理 权限是什么意思 权限管理系统

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里