|
1、元素选取器
2、类选取器
3、ID选取器
4、属性选取器
5、派生选取器
1、元素选取器
最平常的css选取器当属元素选取器了，在HTML文档中该选取器一般指的是某种HTML元素，例如：p,h2,span,a,div乃至html。
用法非常简单，例如：
以下css代码会对全部文档添加黑色背景；将所有p元素字体体积设置为30像素同期添加灰色背景；对文档中所有h2元素添加红色背景。
1 html {bac公斤round-color: black;}
2 p {font-size: 30px; bac公斤roud-color: gray;}
3 h2 {bac公斤round-color: red;}
另外，咱们亦能够同期对多个html元素进行声明。例如：
以下css代码会对文档中所有的h1~h6以及p元素字体设置为”黑体”。
1 h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}
经过上面的例子亦能够看出css的基本规则结构：由选取器和声明块构成，每一个声明块中包括一个或多个声明。其语法格式为：选取器{属性名:属性值;}
2、ID选取器
ID选取器和类选取器有些类似，然则差别又非常明显。
首要一个元素不可像类属性同样持有多个类，一个元素只能持有一个独一的ID属性。其次一个ID值在一个HTML文档中只能显现一次，亦便是一个ID只能独一标识一个元素(不是一类元素，而是一个元素)。
类似类属性，在运用ID选取器前首要要在元素中添加ID属性，例如：
1 1 <p id="top-para">...</p>
2 2 <p id="foot-para">...</p>
运用ID选取器的办法为井号”#”后面跟id值。此刻咱们运用id选取器选取以上2个p元素如下：
1 #top-para {}
2 #foot-para {}
这般咱们就能够对以上2个段落进行必须的操作了。正由于ID选取器的独一性，亦使其用法变得相对简单。
3、类选取器
(1)单类选取器
单纯的元素选取器似乎还过于粗糙了，例如咱们期盼在文档中明显加粗表示某种要紧的内容，例如稿件的截止日期。问题在于咱们不可确定稿件的截止日期将会出此刻哪种元素中，或它可能出此刻多种区别的元素中。这个时候，咱们能够思虑运用类选取器(class selector)。
要运用类选取器咱们必须首要对文件元素添加一个class属性，例如截止日期可能会出此刻以下元素中:
1 <p class="deadline">...</p>
2 <h2 class="deadline">...</h2>
这般咱们就能够用以下方式运用类选取器了：
1 p.deadline { color: red;}
2 h2.deadline { color: red;}
点号”.”加上类名就构成了一个类选取器。以上2个选取器会选取所有包括”deadline”类的p元素和h2元素。而其余包括该属性的元素则不会被选中。
倘若咱们省略.deadline前面的元素名，那样所有包括该类的元素都将被选中：
1 .deadline { color: red;}
一般状况下，咱们会组合运用以上2者得到更加有趣的样式：
1 .deadline { color: red;}
2 span.deadline { font-style: italic;}
以上代码首要会对所有的包括deadline的元素字体设置为红色，同期会对span元素中的文本添加额外的斜体效果。这般，倘若你期盼某处文本持有额外的斜体效果将它们放在<span></span>中就能够了。
(2)多类选取器
在实践的做法中，元素的class属性可能不止包括一个单词，而是一串单词，各个单词之间用空格隔开。
例如某些元素包括一个”warning”类，某些元素包括一个”important”类，某些元素同期包括”warning important”类。属性名显现的次序无关系：
1 class = "warning important"
2 cl
| 
发表于 2024-6-30 06:55:53