CSS样式代码语法、CSS选择器.md

CSS样式代码语法、CSS选择器

---

一、HTML中应用CSS的三种常用方式

1.文档内样式

2.元素行内样式（代码可复用性低）

3.外部样式表

• 编写单独的样式表
• 在头文件中引入<link rel="stylesheet" type="text/css" href="common.css"/>

二、CSS基本语法

1.元素选择器

<style>
			body {
				width: 1000px;
				margin: 0 auto;
				text-align: center;
			}
			
			table {
				margin: 0 auto;
			}
			
			ul,	ol {
				list-style: none;
			}
    		a{
        		text-decoration:none;
                color:red;
    		}
</style>

• body、table、a都是单个选择器
• ul,ol是组选择器

2.属性选择器

a[target="_blank"]{    
		text-decoration:none;
         color:red;
}

• 选择器本身出问题，后面的规则不执行。

• 选择器组其中的一个出问题,则整个选择器本身出问题。

三、CSS选择器

https://www.w3c.org/TR/selectors/#selectors

1.简单选择器（TYPE id CLASS）

h3{
    border:1px solid red;
}

#work-records{
    border:1px solid blue;
}

.outline{
    color:red;
    font-weight:bold;
    font-style:italic;
    text-decoration:underline;
}
.outline.abc{
    background-color:yellow;
}

2.属性选择器（7种）

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
• [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
• [attr^="bar"]：该选择器选择包含 attr 属性的值开头是bar的元素。
• [attr$="bar"]：该选择器仅选择 attr 属性的值末尾是bar的元素。
• [attr|="en"]：该选择器仅选择具有 attr 属性的值为en、en_US等的元素。
• [attr*=“bar”]：该选择器选择attr属性值中含有bar的元素。

/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
[data-vegetable] {
  color: green
}

/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，
即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */
[data-vegetable~="spicy"] {
  color: red;
}

3.上下文选择器

e1 e2

e1>e2