标签：元素 attribute h1 red 选择器 css 属性
CSS基础选择器一共4种：
元素选择器 h1,h2,p,button等原HTML具有的样式
h1 {font-family: sans-serif;}
ID选择器 #container #thumb等自定义样式（HTML中只会生效一次）
#contain{width:400px;height:400px;background:white;}
类选择器 .container .header等自定义样式（HTML中可重复生效）
.container{width:300px;height:300px;background:red;}
属性选择器 img[alt] {border: 5px solid red;}对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像。
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}指向w3school的about_us.asp的所有超链接变成红色
img[title~="Figure"] {border: 1px solid gray;} 对title 文本包含 "Figure" 的所有图像施加样式。没有 title 属性或 者 title 属性中不包含 "Figure" 的图像都不会。
a[href*="w3school.com.cn"] {color: red;}对指向 W3School 的所有链接应用样式。
[attribute] 用于选取带有指定属性的元素。
CSS写法：
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
html引用方法：
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
CSS高级（选择器组合）选择器：
选择器组合： h1,h2,h3{fong-size:13px;} 标题h1,h2,h3的字体大小均为13px。
h1, h2, h3, h4, h5, h6 {color:gray;background: white;padding: 10px;
border: 1px solid black;font-family: Verdana;}
带有白色背景的灰色文本，其内边距是 10 像素，并带有 1 像素的实心边框，文本字体是 Verdana。
后代选择器：
h1 em {color:red;} h1元素内的em元素的文本变为红色。只要是<h1>里边的<em>元素颜色都是红色。
子元素选择器：
h1 > strong {color:red;}；第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
相邻兄弟选择器：h1 + p {margin-top:50px;}。在h1 和 p 元素拥有共同的父元素情况下，选择紧接在 h1 元素后出现的段落。
示例：html > body table + ul {margin-top:20px;}选择紧接在 table 元素后出现的所有兄弟 ul 元素，
该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
子元素选择器实例：
标签：元素,attribute,h1,red,选择器,css,属性 来源： https://blog.csdn.net/mahone1989/article/details/104745665
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。