第四章 CSS选择器

时间 2019-11-12

标签第四 css 选择器栏目 CSS 繁體版

原文原文链接

全部HTML语言中的标记都是经过不一样的CSS选择器进行控制的。用户只须要经过选择器对不一样的HTML标签进行控制，并赋予各类样式声明，便可实现各类效果。css

一、标记选择器html

一个HTML页面有不少不一样的标记组成，而CSS标记选择器就是声明哪些标记采用哪一种CSS样式。例如P选择器，就是用于声明页面中全部<p>标记的样式风格。浏览器

CSS代码声明了HTML页面中全部的<h1>标记，文字的颜色都采用红色，大小都为25px。编辑器

<style>
h1{
    color:red;
    font-size:25px;
}
</style>

每个CSS选择器都包含了选择器自己、属性和值，其中属性和值能够设置多个，从而实现对同一个标记，声明多种样式风格。
函数

CSS语言对于全部属性和值都有相对严格的要求，若是声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。一般状况下能够直接利用CSS编辑器的语法提示功能避免，但某些时候还须要查阅CSS手册或者直接登陆W3C的官方网站（http://www.w3.org/）来查阅CSS的详细规格说明。网站

二、类别选择器spa

类别选择器的名称能够由用户自定义，属性和值跟标记选择器同样，也必须符合CSS规范。code

当页面中同时出现3个<p>标记，而且但愿它们的颜色各不相同，就能够经过设置不一样的class选择器来实现。htm

<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.one{
    color:red;      /*红色*/
    font-size:18px;     /* 文字大小*/
}
.two{
    color:green;
    font-size:20px;
}
.three{
    color:cyan;
    font-size:22px;
}
-->
</style>
</head>
<body>
    <p class="one">class选择器1</p>
    <p class="two">class选择器2</p>
    <p class="three">class选择器3</p>
    <h3 class="two">h3一样适用</h3>
</body>
</html>

不少时候页面中几乎全部的<p>标记都使用相同的样式风格，只有1~2个特殊的<p>标记须要使用不一样的风格来突出，这时能够经过class选择器与标记选择器配合使用，大大提升了代码的编写效率。blog

<html>
<head>
<title>选择器与标记选择器</title>

<style type="text/css">
<!--
p{
    color:blue;              /*标记选择器*/
    font-size:18px;
}
.special{                 /*类别选择器*/
    color:red;
    font-size:23px;
}
-->
</style>
</head>
<body>
<p>class选择器与标记选择器1</p>
<p>class选择器与标记选择器2</p>
<p>class选择器与标记选择器3</p>
<p class="special">class选择器与标记选择器4</p>
<p>class选择器与标记选择器5</p>
<p>class选择器与标记选择器6</p>
</body>
</html>

类别选择器还有一种很直观的使用方法，就是直接在标记声明后接类别名称，以此来区别该标记
h3.special用于特殊的控制，仅仅只适用于<h3 class="special">标记，而不会影响单独的.special选择器。

在HTML的标记中，还能够同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中
这在实际制做网站时每每会颇有用，能够适当减小代码的长度。

<html>
<head>
<title>标记选择器.class</title>
<style type="text/css">
<!--
h3{                   /*标记选择器*/
    color:blue;
    font-size:18px;
}
h3.special{            /*标记.类别选择器*/
    color:red;
    font-size:23px;
}
.special{          /*类别选择器*/
    color:green;
}
.one{         /*类别选择器*/
    color:blue;
}
.two{        /*类别选择器*/
    font-size:22px;
}
-->
</style>
</head>
<body>
<h3>标记选择器.class1</h3>
<h3>标记选择器.class2</h3>
<h3 class="special">标记选择器.class3</h3>
<h3>标记选择器.class4</h3>
<h3>标记选择器.class5</h3>
<p class="special">使用于别的标记</p>


<h4>一种都不使用</h4>
<h4 class="one">同时使用两种class，只使用第一种</h4>
<h4 class="two">同时使用两种class，只使用第二种</h4>
<h4 class="one two">同时使用两种class，同时使用</h4>
<h4>一种都不使用</h4>
</body>
</html>

三、ID选择器

ID选择器的使用方法跟class选择器基本相同，不一样之处在于ID选择器只能在HTML页面中使用一次，所以其针对性更强。

在HTML的标记中只须要利用id属性，就能够直接调用CSS中的ID选择器。

<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
    font-weight:bold;
}
#two{
    font-size:30px;
    color:#009900;
}
-->
</style>
</head>
<body>
<p id="one"> ID选择器1 </p>
<p id="two"> ID选择器2 </p>
<p id="two"> ID选择器3 </p>
<p id="one two"> ID选择器4 </p>
</body>
</html>

在不少浏览器下，ID选择器也能够用于多个标记，但这里须要指出的是，将ID选择器用于多个标记是错误的，由于每一个标记定义的id不仅是CSS能够调用，JavaScript等其余脚本语言一样也能够调用。
若是一个HTML中有两个相同的id标记，那么将会致使JavaScript在查找id是出错，如函数getElementById()

网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记

ID选择器不支持想class选择器那样的多风格同时使用，相似id=“one two” 是彻底错误的语法。