css基础-选择器_h1,p.one,#food{color:red;}-CSDN博客

本文链接：https://blog.csdn.net/yeyang123_fy/article/details/41724065

1、定义样式

嵌入式，标签需对应，注释用/* */

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS代码语法</title>
<style type="text/css">
p{
   font-size:12px;
   color:red;
   font-weight:bold;
}
</style>
</head>
<body>
<p>服务及时</p>
</body>
</html>

内联式写法

<p style="color:red;font-size:12px">这里文字是红色。</p>

外部css引用，在<head>内使用<link>标签将css样式文件链接到HTML文件内

rel="stylesheet" type="text/css" 是固定写法不可修改。

引用css：

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

stylesheet.css：

p {
	color: red;
}

span {
	color:blue;
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">  </span>

优先级：内联式 > 嵌入式 > 外部式，嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

设置边框颜色

selector {
    border: 2px solid red;
}

td{
    height:50px;
    border:1px dashed blue;   //虚线
}
table{
    border:1px solid black;  //实线
}

border-radius:5px;       //圆角

div{
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    background-color: #BCD2EE;
    border-radius:5px;
    margin:auto;
    text-align:center;
}

仅改变在三个div里面的h2

div div div h2{}

所有元素增加样式

<span style="font-family:Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;font-size:12px;color:#1f2426;">* {
    border: 2px solid black;
}</span>

2、使用类选择器、ID选择器、子选择器、包含选择器、通用选择器、伪类选择器、分组选择器

.类选器名称{css样式代码;}

与class配合使用

<!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;
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
</body>
</html>

可同时使用两个样式

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

ID选择器，前加#配合使用，一个html中，ID选择器只可使用一次

<!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;
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
</body>
</html>

子选择器> 会使子元素（如li，span）加入红色实线边框，作用于第一个直接后代

例

.food>li{border:1px solid red;}

<!DOCTYPE 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;}

通用选择器，匹配html中所有标签元素

* {color:red;}

伪类选择器，设置鼠标滑过的样式

a:hover{color:red;}

a:link，a:visited也是

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪类选择符</title>
<style type="text/css">
a:hover{
    color:red;
    
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩</p>
</body>
</html>

分组选择器，同样样式的写在一起，如first所有，seconed下的span

.first,#second span{color:green;}

h1,span{color:red;}

选择第一个p的元素

p:first-child {
    color: red;
}

选择第二个元素

p:nth-child(2){
    font-family:Tahoma;
}