CSS

标签：sla   ide   通过   yellow   嵌套   没有   相同   style   eve   

CSS语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

选择器h1：{ color:red； font-size:14px }

注释： /* ....... */

CSS选择器

基本选择器：

1. 元素选择器

   p {color:red;}

2. ID选择器

   #p1 {
     background-color: red;
   }

3. 类选择器

   .c1 {font-size: 14px;}
   
   p.c1 {color: red;}
   
   # 样式类名不要用数字开头（有的浏览器不认）
   # 标签中的class属性如果有多个，要用空格分隔。

   4.通用选择器

   * {color ： white；}

组合选择器：

1. 后代选择器

   div p {color : green;}
   
   # div后代为p标签的都设为green

2. 儿子选择器

   div>p {font-size : 14px;}                 # 选择父级是<div>元素的<p>元素

3. 毗邻选择器

   div+p {color : green;}              # 选择紧接着<div>后面的<p>

4. 弟弟选择器

   div~p {color : green}          # div 后面的所有 p

    

属性选择器（不怎么常用）

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

不怎么常用的属性选择器

View Code

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

div，p {color : yellow;}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色

.c1 p {
  color: red;
}

CSS

标签：sla   ide   通过   yellow   嵌套   没有   相同   style   eve   

原文地址：https://www.cnblogs.com/Chen-char/p/10669577.html