CSS权威指南1:选择器_html/css_WEB-ITnose

通配选择器

可以与任何元素匹配，就像是一个通配符

/*每一个元素的字体都设置为红色*/* {    color: red;}

元素选择器

指示文档元素的选择器。

/*为body的字体设置为红色*/body {    color: red；}

分组

选择器分组

h1, h2, h3 {    color: red;}

声明分组

h1 {    font: 18px Helvetica;    color: purple;    background: aqua;}

结合选择器和声明分组

h1, h2, h3 {    font: 18px Helvetica;    color: purple;    background: aqua;}

类选择器和ID选择器

独立于文档元素的方式来指定样式

类选择器

.warning {    font-weight: bold}/*包含warning元素的p标签会apply下面的style*/p.warning {    font-weight: bold}/*同时包含urgent和warning类名的元素会apply下面的style，类名顺序不限*/.urgent.warning {    font-weight: bold}/*同时包含urgent和warning类名的元素P会apply下面的style*/p.urgent.warning {    font-weight: bold}

ID选择器

#content {    margin: 0;}

ID选择器和类选择器的不同之处：

在一个HTML文档中，ID选择器会使用一次，而且仅一次。因此，如果有一个元素的id值为lead-para,那么该文档中所有其他元素的id值都不能是lead-para。(注: 浏览器通常并不检查HTML中ID的唯一性，这意味着如果你在HTML文档中设罝了多个有相同ID属性值的元素，就可能为这些元素应用相同的样式。) ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。

类选择器和ID选择器可能是区分大小写的，这取决于文档语言。HTML和 XHTML将类和ID值定义为区分大小写，所以类和ID值的大小写必须与文档中的相应值匹配。

属性选择器

简单属性选择器

如果希望选择有某个属性的元素，而不论该属性的值是什么，可以使用一个简单属性选择器。

/*选择有class属性（值不限）的所有h1元素，设置其字体颜色为红色 */h1[class] {    color: red;}/*将同时有href和title属性的HTML超链接的文本置为粗体*/a[href][title] {    font-weight: bold;}

根据具体属性值选择

/*设置具有href属性，并且属性值为http://www.w3.org/的a标签的font-size为200%*/a[href="http://www.w3.org/"] {    font-size: 200%;}/*同时满足*/a[href="http://www.w3.org/"][title="W3C Home"]{    font-size: 200%;}

这种格式要求必须与属性值完全匹配

根据部分属性值选择

如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择。

 Mercury  Venus  Earth /*为了把class属性中有barren的所有元素变为斜体，可以写作：*/span[class~="barren"] { font-style: italic;}

p.warning和p[class~="warning"]应用到HTML文档时是等价的

类型描述 [foo^="bar"] 选择foo属性值以"bar"开头的所有元素 [foo$="bar"] 选择foo属性值以"bar"结尾的所有元素 [foo~="bar"] 选择foo属性值包含"bar"的所有元素(属性的值根据空格分隔，其中任意一个词能完全匹配bar) [foo*="bar"] 选择foo属性值包含"bar"的所有元素(只要包含就可以了，任意位置都可以，不必是一个完整的单词) 特定属性选择类型

用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

Hello!

Greetings!

G’day!

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111952

更新时间：2022-11-17 阅读：29次