css的选择符有:1、通配选择符;2、类型选择符;3、属性选择符;4、子对象选择符;5、ID选择符;6、类选择符;7、选择符分组;8、伪类及伪对象选择符。其中,通配选择符选定文档目录树(DOM)中的所有类型的单一对象。
1、通配选择符
语法:{ sRules }
说明:通配选择符。选定文档目录树(DOM)中的所有类型的单一对象;假如通配选择符不是单一选择符中的少数组成,“*”可以省略。
示例:
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }
2、类型选择符
语法:E { sRules }
说明:类型选择符。以文档语言对象(Element)类型作为选择符。
示例:
td { font-size:14px; width:120px; }
a { text-decoration:none; }
3、属性选择符
- E [ attr ] { sRules }:选择具有 attr 属性的 E;
- E [ attr = value ] { sRules }:选择具有 attr 属性且属性值等于 value 的 E;
- E [ attr ~= value ] { sRules }:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”必须的;
- E [ attr |= value ] { sRules }:指定了属性名,并且属性值仅是value或者以“value-”开头的值(比如说left-con)。
4、子对象选择符
语法:E1 > E2 { sRules }
说明:子对象选择符。选择所有作为 E1 子对象的 E2 。
示例:
body > p { font-size:14px; }
/* 所有作为body的子对象的p对象字体尺寸为14px */
div ul>li p { font-size:14px; }
5、ID选择符
语法:#ID { sRules }
说明:ID选择符。以文档目录树(DOM)中作为对象的少数标识符的 ID 作为选择符。
示例:
#note { font-size:14px; width:120px;}
6、类选择符
语法:E.className { sRules }
说明:类选择符。在HTML中可以使用此种选择符。其效果等同于E [ class ~= className ] 。在IE5+,可以为对象的 class 属性(特性)指定多于一个值( className ),其方法是指定用空格隔开的一组样式表的类名。
示例:
div.note { font-size:14px; }
/* 所有class属性值等于(包含)"note"的div对象字体尺寸为14px */
.dream { font-size:14px; }
/* 所有class属性值等于(包含)"note"的对象字体尺寸为14px */
7、选择符分组
语法:E1 , E2 , E3 { sRules }
说明:选择符分组。将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。
示例:
.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }
8、伪类及伪对象选择符
语法:
- E : Pseudo-Classes { sRules }
- E : Pseudo-Elements { sRules }
说明:伪类及伪对象选择符。
- 伪类选择符。伪类( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。
- 伪对象选择符。伪对象( Pseudo-Elements )[:first-letter :first-line :before :after]。
示例:
div:first-letter { font-size:14px; }
a.fly :hover { font-size:14px; color:red; }
延伸阅读
基本选择器的优先级
通常我们用四位数字表示优先级,一位一位的进行比较。如,一种选择器的优先级是 0 1 1 0,另一种选择器的优先级是 0 1 0 2,那么就从名列前茅位开始比较,两者均是0,此时看第二位,都是1,第三位,前者为1,后者为0,1自然是比0大的,所以,前者的优先级级别更高。
- id选择器。用四位数字表示id选择器的优先级就是:0 1 0 0。如:#con {}
- 类名选择器。用四位数字表示类名选择器的优先级就是:0 0 1 0。如:.h5course {}
- 标签名选择器。用四位数字表示标签名选择器的优先级就是:0 0 0 1。如:div {}
- 伪类选择器(如:hover等a标签常见的四种伪类)。用四位数字表示伪类选择器的优先级就是:0 0 1 0
- 通配符选择器(*)。当通配符单独出现的时候,其优先级为:0 0 0 0。如果它存在于后代选择器当中,涉及到优先级叠加运算的时候,其优先级为:0 0 0 1。
文章标题:css的选择符有哪些,发布者:Z, ZLW,转载请注明出处:https://worktile.com/kb/p/34388