css所有选择器的详解_html/css_WEB-ITnose
Jun 24, 2016 am 11:31 AM
----------------------------------------
css 选择器
----------------------------------------
1,组合选择器:
1)e>f :直接后代选择器。
2) e+f : 兄弟元素选择器,匹配紧随e元素之后的同级元素f。
3) e~f :匹配任何在e元素之后的同级f元素。
4) e f : 后代选择器。
5) e,f : 群组选择器。
cation:+ 和 ~ 区别,+只能匹配一个紧随其后的同级元素;~匹配所有紧随其后的同级元素
2,属性选择器:
1) e[att] 匹配所有具有att属性的e元素;
2) e[att=val] 匹配所有att=val的e元素;
3) e[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素;
case:
sssssssssss
p[data~='vic']{background-color: maroon;}
4) e[att|=val] 匹配所有att属性具有多个连字号分隔(hyphenseparated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等;
case:
bbbbbbbbbbb
p[lang|='en']{background-color: yellow;}
5) e[att^=val] 属性att的值以”val”开头的元素;
case:
bbbbbbbbbbb
p[data^='vic']{background-color: blue};
6) e[att$=val] 属性att的值以”val”结尾的元素;
case:
aaaaaaaaaaa
p[data$='vic']{background-color: red};
7) e[att*=val]
case:
aaaaaaaaaaa
bbbbbbbbbbb
cccccccccc
sssssssssss
p[data*='vic']{background-color: red};
3,伪类选择器:
- find
- mars
- selena
- victor
- pink
1) first-child:匹配父元素的第一个子元素;
ul li:first-child{color:red;}
2) link:匹配所有未被点击的链接;
3)visited:匹配所有已被点击的链接
4)active:匹配鼠标已经其上按下、还没有释放的E元素
5)hover:匹配鼠标悬停其上的E元素;
a{text-decoration: none}
a:link{color: green;}
a:visited{color: maroon;}
a:active{color: red;}
a:hover{color: blue;}
6)focus:匹配获得当前焦点的E元素;
input[type='text']:focus{outline:1px solid yellow;}
------------------------------------------------------------------------
7)lang():匹配lang属性等于c的E元素;
This is a quote quoting Steve Jobs sayingDesign is not just what it looks like and feels like. Design is how it works.for inspiration.
q:before {
content: open-quote;
}
q:after {
content: close-quote;
/* English quotes */
:lang(en) q {
quotes: '\201C' '\201D' '\2018' '\2019'; /* Unicode values are used to specify special quote characters. */
}
/* French quotes */
:lang(fr) q {
quotes: '«' '»' '‹' '›';
}
/* German quotes */
:lang(de) q {
quotes: '»' '«' '‹' '›';
}
---------------------------------------------------------------------------
4,为元素:
1) first-line: 匹配元素的第一行;
2) first-letter: 匹配元素的第一个字母;
3) before: 在E元素之前插入生成的内容;
4) after: 在E元素之后插入生成的内容;
5,与用户界面有关的伪类;
1)enabled:匹配表单中激活的元素
2)disabled:匹配表单中禁用的元素
3)checked:匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
4)selection:匹配用户当前选中的元素:此伪元素可应用于 color , background-color ,background(background-color 部分) 和text-shadow。
case:
p::selection{color:yellow;}
6,css3中的结构性伪类;
1)root:匹配文档的根元素,对于HTML文档,就是HTML元素;
2)nth-child(n):匹配其父元素的第n个子元素,第一个编号为1;
3)nth-last-child(n):与: nth-child()作用类似,但是仅匹配使用同种标签的元素;
4)nth-of-type(n): 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
5)nth-last-of-type(n): 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
6)last-child
7)first-of-type
8)last-of-type
9)only-child
10)only-of-type
11)empty

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소?
