首页 > 其他分享> 文章详细

CSS

2019-04-08 11:50:36 阅读：141 来源： 互联网

标签：title color 选择器 CSS div hello red

CSS语法

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

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

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

CSS选择器

基本选择器：

元素选择器
```
p {color:red;}
```
ID选择器
```
#p1 {
  background-color: red;
}
```

类选择器

.c1 {font-size: 14px;}

p.c1 {color: red;}

# 样式类名不要用数字开头（有的浏览器不认）
# 标签中的class属性如果有多个，要用空格分隔。

4.通用选择器

* {color ： white；}

组合选择器：

后代选择器

div p {color : green;}

# div后代为p标签的都设为green

儿子选择器

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

毗邻选择器

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

弟弟选择器

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

标签：title,color,选择器,CSS,div,hello,red
来源： https://www.cnblogs.com/Chen-char/p/10669577.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS