CSS选择器[下]

最新推荐文章于 2024-07-22 20:38:06 发布

fxy流年无悔

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量227

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/a716121/article/details/52104518

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

效果：

index.html

<!DOTTYPE html>
<html lang ="zh-cn">
<head>
   <meta charset="utf-8">
   <title>CSS选择器[下]</title>
   <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<ul>
  <li>我是儿子</li>
  <li>我是儿子</li>
  <li>我是儿子</li>
  <li>我是儿子</li>
  <li>我是儿子</li>
</ul>


<ul>
  <li>我是儿子</li>
</ul>




<form>
//文本
<input type="text" required>
<input type="email" required>



//复选框
<input type="checkbox">
<input type="checkbox" checked>

<button>提交</button>
</form>


<a href="http://www.baidu.com">百度</a>

<a href="http://www.sougou.com">搜狗</a>

<a href="http://www.haosou.com">好搜</a>


<b>加粗</b>

<p lang="en-us">HTML5</p>

<b >加粗</b>

</body>
</html>

style.css

@charset "utf-8";
///根选择器一般不用
:root{
border:1px solid red;
}


///伪类都需要加入前置选择器来限制范围
///子元素选择器
ul>li{
color:red;
}


///
ul>li:first-child{
color:red;
}





///
ul>li:last-child{
color:red;
}



///
ul>li:only-child{
color:red;
}



<div>
 <p>我是段落</p>
 <span>我不是段落</span>
</div>


<div>
 <p>我是段落</p>
 <p>我是段落</p>
</div>


div>p:only-of-type{
color:red;
}


ul>li:nth-last-child(2){
color:red;
}


div>p:nth-pf-type(2){
color:red;
}



div>p:nth-last-pf-type(2){
color:red;
}



UI伪类选择器对表单进行选择
input:enabled{
border:1px solid red;
}

input:disabled{
border:1px solid blue;
}



input:checked{
display:none;
}



input:default{
display:none;
}



input:valid{
border:1px solid green;
}
input :invalid{
border:1px solid red;
}



input:required{
color:red;
}

input:optional{
color:blue;
}




对超链接四种状态
a:link{
color:red;
}
a:visited{
color:blue;
}
a:hover{///悬停
color:orange;
}
a:active{
color:green;
}





input:focus{
color:red;
}



a:not*([href*="baidu"]){
color:red;
}


p:empty{
display:none;
}


p:lang(en){
color:red;
}

b:target{
color:red;
}


::selection{
color:red;
}

ppt: