CSS选择器用于选择你想要的样式作用于哪些元素
CSS选择器分为：
1、类别选择器
根据类名来选择，以 . 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
.fontstyle {
color: white;
background: black;
font-size: 50px;
}
</style>
</head>
<body>
<p>hello</p>
<p class="fontstyle">hello</p>
</body>
</html>
结果：
2、标签选择器
根据标签来选择，以标签为开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
p {
margin-top: 10px;
color: red;
}
</style>
</head>
<body> hello
<p>hello</p>
</body>
</html>
结果：
3、id选择器
标识特定的ID，具有唯一性，以 # 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
#p1 {
margin-top: 10px;
color: white;
background: black;
}
</style>
</head>
<body>
<p>hello</p>
<p id="p1">hello</p>
</body>
</html>
结果：
4、后代选择器
也称为包含选择器，用来选择特定元素的后代，以 父元素 子元素 开头（祖代关系可以用多个空格隔开）
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: black;
}
div p {
position: absolute;
margin-top: 40px;
margin-left: 30px;
color: red;
}
</style>
</head>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
结果：
5、子代选择器
与后代选择器不同，子代选择器只作用于子代元素的第一个后代，后代选择器作用于所有后代元素，以 > 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: black;
}
div>p {
color: red;
}
span {
color: white;
}
</style>
</head>
<body>
<div>
<p>hello</p>
<span>hello world</span>
</div>
</body>
</html>
结果：
6、伪类选择器
需要其他条件来应用元素的样式，以 标签:link/visited/hover/focus 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
background: black;
font-size: 50px;
}
a:visited {
color: red;
}
a:link {
color: green;
}
a:hover {
color: blue;
}
a:focus {
color: white;
}
</style>
</head>
<body>
<a href="www.baidu.com">enter</a>
</body>
</html>a:link表示链接还没有被点击时的样式
a:hover表示鼠标放在链接上的样式
a:focus表示鼠标按住链接不放的样式
a:visited表示戍边点击链接后的样式
注意：
a:visited一定要写在a:hover前面，放在下面的会覆盖掉上面的属性，如果a:visited放在后面，无论鼠标有没有访问过链接，都是a:hover的样式作为表现形式
结果：
7、通用选择器
表示所有的都应用这个样式，以 * 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p * {
color: white;
background: black;
}
</style>
</head>
<body>
<p>
hello
<span>world</span>
<b>goodbye</b>
</p>
</body>
</html>
结果：
8、群组选择器
当几个元素的属性一致时，可以共用一个样式，以 ，分割开
例：
结果：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p,span,b {
color: white;
background: black;
}
</style>
</head>
<body>
<p>hello</p>
<span>world</span>
<b>goodbye</b>
</body>
</html>
9、相邻同胞选择器
若同代中，假设我为哥哥，我们想找最大的弟弟，而不是全部的弟弟，以 + 分割
若想找其他的弟弟，则以 ~ 分割
例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
span+p {
color: white;
background: black;
}
span~b {
color: red;
}
</style>
</head>
<body>
<span>world</span>
<p>hello</p>
<p>wang</p>
<b>hong</b>
</body>
</html>
结果：
10、属性选择器
根据标签属性来定义样式，标签属性可以自定义，该选择器以 标签[属性] 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 30px;
}
div[title] {
/*选中div中所有含有title属性的元素*/
margin-top: 5px;
border: 1px solid black;
}
div[title="two"] {
/*选中div中title属性等于two的元素*/
color: red;
}
div[title^="on"] {
/*选中div中title属性以on开头的元素*/
color: blue;
}
div[title$="ee"] {
/*选中div中title属性以ee结尾的元素*/
color: purple;
}
div[title*="our"] {
/*选中div中title属性中含有our的元素*/
color: white;
background: gray;
}
</style>
</head>
<body>
<div>other</div>
<div title="one">one</div>
<div title="two">two</div>
<div title="once">once</div>
<div title="three">three</div>
<div title="four">four</div>
<div title="fourone">fourone</div>
<div title="fourtwo">fourtwo</div>
</body>
</html>
结果：
11、伪元素选择器
必须放在该选择器的最后面，以 标签：first-letter/first-line/before/after 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div p:first-letter {
/*设置块元素的首字母样式*/
color: red;
}
div:first-line {
/*设置第一个文本行样式，但只有部分属性允许first-line,font、、color、background、word-spacing、 text-decoration、vertical-align、text-transform、line-height*/
font-size: 50px;
}
body:before {
/*设置之前的样式，可以插入生成的内容*/
content: 'start';
display: block;
}
body:after {
/*设置之后的样式，可以插入生成的内容*/
content: 'end';
display: block;
}
</style>
</head>
<body>
<div>
<p>hello</p>
<p>world</p>
</div>
</body>
</html>
结果：
12、结构性伪类选择器
可以同时匹配子元素和孙子元素，其中带括号的选择器中，里面一定要有参数，以 标签：first-of-type/last-of-type/only-of-type/only-child/nth-child(n/odd/even/表达式)/nth-last-child(n)/nth-of-type(n)/first-child/last-child/root/empty/target/not(selector) 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.one {
font-size: 20px;
}
.one :first-of-type {
/*选择父元素中子元素的第一个*/
color: red;
}
.one :last-of-type {
/*选择父元素中子元素的最后一个*/
color: pink;
}
.two {
margin-top: 5px;
width: 100px;
background: black;
color: white;
}
.two :only-of-type {
/*选择父元素中只出现一次的子元素*/
color: red;
}
.three {
margin-top: 5px;
width: 100px;
background: black;
}
.three :only-child {
/*选择父元素中唯一的子元素，父元素中只能有一个子元素*/
color: white;
}
.four {
margin-top: 5px;
width: 100px;
background: black;
color: white;
}
.four :nth-child(2) {
/*从头开始，选择第二个子元素*/
color: red;
}
.four :nth-last-child(2) {
/*从后开始往前，选择第二个子元素*/
color: red;
}
.four :first-child {
/*选择父元素里 的第一个子元素*/
color: blue;
}
.four :last-child {
/*选择父元素里的最后一个子元素*/
color: blue;
}
.five {
margin-top: 5px;
width: 100px;
background: black;
color: white;
}
.five :nth-of-type(2) {
/*从头开始，选择父元素中第二个或多个子元素*/
color: red;
}
.six {
margin-top: 5px;
width: 100px;
background: pink;
}
.six p:empty {
/*选择标签内没有任何内容的元素*/
width: 50px;
height: 20px;
background: green;
}
.seven {
margin-top: 5px;
width: 100px;
background: black;
color: white;
}
.seven :target {
/*选择当前活动的元素，指锚点点击后跳转的那个元素*/
border: 1px solid green;
background: #66ff33;
}
.eight {
margin-top: 5px;
width: 100px;
background: black;
color: white;
}
.eight *:not(span) {
/*选择除span以外的其他标签*/
color: red;
}
:root {
/*用于选择文档的根元素*/
background: #ccffff;
}
</style>
</head>
<body>
<div class="one">
<p>one</p>
<p>one</p>
<p>one</p>
</div>
<div class="two">
<p>two</p>
<p>two</p> <span>two</span> </div>
<div class="three">
<p>three</p>
</div>
<div class="four">
<p>four</p>
<p>four</p>
<p>four</p>
<p>four</p>
<p>four</p>
<p>four</p>
</div>
<div class="five">
<p>five</p>
<p>five</p>
<p>five</p>
</div>
<div class="six">
<p>six</p>
<p></p>
</div>
<div class="seven">
<a href="#new">To Seven</a>
<p id="new">seven</p>
</div>
<div class="eight">
<p>eight</p>
<span>eight</span>
<p>eight</p>
</div>
</body>
</html>
结果：
13、UI元素状态伪类选择器
用于一些标签特殊状态时的样式，该选择器以 标签:enabled/:disabled/:read-only/:read-write/:checked/:default
/:indeterminate/::selection/::moz-selection 开头
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.one{
margin-bottom:5px;
width:200px;
background:black;
color:white;
}
.one input:enabled{ /*指定元素处于可用状态时的样式，一般用于input、select和textarea*/
background:yellow;
}
.one input:disabled{ /*指定元素处于不可用状态时的样式，一般用于input、select和textarea*/
background:gray;
margin-bottom:10px;
}
.two{
margin-bottom:5px;
width:200px;
background:black;
color:white;
}
.two input[type="text"]:read-write{ /*指定元素只可写状态时的样式，一般用于input和textarea*/
background:yellow;
}
.two input[type="text"]:read-only{ /*指定元素只可读状态时的样式，一般用于input和textarea*/
background:green;
margin-bottom:10px;
}
.two input[type="checkbox"]:checked{ /*指定元素被选中状态时的样式，一般用于checkbox和radio*/
width:40px;
height:40px;
margin-bottom:10px;
}
.two input[type="checkbox"]:default{ /*指定元素默认选中状态时的样式，一般用于checkbox和radio*/
width:30px;
height:30px;
margin-bottom:10px;
}
.two input[type="radio"]:indeterminate{ /*指定默认一组单选或复选都没有选中状态时的样式，一般用于checkbox和radio*/
width:30px;
height:30px;
}
.three{
margin-bottom:5px;
width:200px;
background:black;
color:white;
}
.three p::selection{ /*指定元素被选中状态时的样式，可用于所有元素*/
color:red;
background:yellow;
}
</style>
</head>
<body>
<div class="one">
one<input type="text" value="name"></input>
<br/>
name<input type="text" disabled="disabled" value="name"></input>
</div>
<div class="two">
two<input type="text" value="name"></input>
<br/>
name<input type="text" readonly value="name"></input>
check1<input type="checkbox" checked="checked"></input>
check2<input type="checkbox"></input>
check3<input type="checkbox"></input>
<br/>
radio1<input type="radio" name="two" value="radio1"></input>
radio2<input type="radio" name="two" value="radio2"></input>
</div>
<div class="three">
<p>three</p>
</div>
</body>
</html>结果：
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
