CSS选择器有多少种类型?

2024-11-28 23:34:17
推荐回答(3个)
回答1:


class 选择器 .inner{ width:100px;}
id 选择器 #demo{ width:100px;}
标签 选择器 p{ width:100px;}
后代选择器 p a{ color: #f60;}
伪类选择器 a:hover{ color: #f00;}
伪元素选择器 a:after{ clear: both;}
属性选择器 input[type=checkbox]{ margin-left: 10px;}
css3选择器
由于ie的问题,比较常用的是前4种选择器。

回答2:

n元素选择器:
html {color:black;}
h1 {color:blue;}
div {color:silver;}
n 选择器分组:
body, h2, p, table, th, td, pre, strong, em { color:gray; }
n 通配符选择器:
* {color:red; margin:0px;padding:0px;}
n 类选择器:类选择器允许以一种独立于文档元素的方式来指定样式
*.imp { color:red; } //可省略*

重要的提示语


n 子串匹配属性选择器
p.important {color:red;} <==> p[class="important"]
h1.important {color:blue;}
n 多类选择器
多类选择器

nID选择器:区分大小写
#user {color:black;}
n 属性选择器:
*[title] {color:red;}
a[href][title] {color:red;}
n 具体属性值选择:
a[href="www.w3school.com.cn"][title="W3School"] {color: red;}
n 属性与属性值必须完全匹配:

完全匹配


p[class="important warning"] {color: red;}
n 部分属性值选择
p[class~="important"] {color: red;}
n 子串匹配属性选择器
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
*[lang|="en"] {color: red;}
选择 lang 属性等于 en 或以 en- 开头的所有元素
n选择子元素:
h1 > strong {color:red;}
n相邻兄弟选择器:
h1 + p {margin-top:50px;}
li + li {font-weight:bold;}

  • List item 1

  • List item 2

  • List item 3

回答3:

3种