CSS中的各种选择符介绍
本篇内容介绍了“CSS中的各种选择符介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联专注于平果网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供平果营销型网站建设，平果网站制作、平果网页设计、平果网站官网定制、小程序开发服务，打造平果网络公司原创品牌,更为您提供平果网站排名全网营销落地服务。
类型，类和ID选择器
带有空格的字体名称要用''引起来
对选择器分组可使同一规则适用于多个选择器，例子如下
CSS Code复制内容到剪贴板
th,td {
padding:0 10px 00;
}
选项的优先级
CSS Code复制内容到剪贴板
h2 {
font-family:'Times New Roman',serif;
}
//先选用前者，没有前者，再使用后者
类型名与类名中间不应有空格 div.btn-success
通用选择器*，适用于文档所有元素
CSS Code复制内容到剪贴板
* {
font-family:Arial;
}
后代选择器
CSS Code复制内容到剪贴板
div.planet table td {
padding:0 10px 0 0;
}
//是类为planet的div元素的后代table的后代的td样式
万万牢记，上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符，不要弄混。
子选择符>
CSS Code复制内容到剪贴板
section > p{
font-style:Italic;
}
//section的子元素p
同胞选择符～和+
section ~ p {
font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必须紧跟section
非子选择符
CSS Code复制内容到剪贴板
selection * a {
***;
}
//所有是selection元素孙子的a元素
ID选择器
属性选择器
标签名[属性="属性值"]
CSS Code复制内容到剪贴板
img[title="hh jj"]{...}
伪类选择器：动态事件，状态改变
CSS Code复制内容到剪贴板
a:visited {
color:mangenta;
}
//被访问过的链接
UI伪类
链接伪类
Link。此时，链接就在那儿等着用户点击。
Visited。用户此前点击过这个链接。
Hover。鼠标指针正悬停在链接上。
Active。链接正在被点击（鼠标在元素上按下，还没有释放）。
focus伪类——鼠标放在上面
CSS Code复制内容到剪贴板
input:focus {border:1px solid blue;}
target伪类
CSS Code复制内容到剪贴板
//位于页面其他地方、ID 为 more_info 的那个元素就是目标。该元素可能是这样的：
//那么，如下 CSS 规则
#more_info:target {background:#eee;}
结构化伪类
first-child 一组同胞元素的第一个
last-child
nth-child(3) 一组同胞元素的第三个
伪元素——似有实无的元素
first-letter
first-line
before 和 after
CSS Code复制内容到剪贴板
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
//在类为age的p元素前面增加一段Age：
p::first-letter {font-size:300%;}
//放大p的第一个字母
继承和层叠
浏览器默认样式表
用户样式表
作者链接样式表（按照它们链接到页面的先后顺序）
作者嵌入样式
作者行内样式
越后面优先级越高
规则一：包含 ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。
规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会胜出。
规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。下面简单解释一下规则三。比如下面的标记
Inheritance is weak in the Cascade
和下面的规则
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2（高特指度）
会导致单词“weak”变成蓝色，因为它从父元素 p 那里继承了这个颜色值。
但是，只要我们再给 em 添加一条规则
em {color:red;}
0 - 0 - 1 （低特指度）
em 就会变成红色。因为，虽然它的特指度低（0-0-1），但 em 继承的颜色值，会被为它明确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也没有用。
“CSS中的各种选择符介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
标题名称：CSS中的各种选择符介绍
分享网址：http://scjbc.cn/article/iijcgd.html
