집 > 기사 > 웹 프론트엔드 > CSS 선택기에 관한 것

CSS 선택기에 관한 것

高洛峰원래의: 2016-11-24 13:19:471615검색

이에 대해서는 다음에서 다루겠습니다. .

1. CSS의 특징

HTML 조판의 단점 :

설정이 번거롭고 수정이 번거롭고 기능이 심각하게 부족함 　　

장점 CSS 스타일 조판 : 　

조판 속성 기능이 완성되어 조판 파일이 독립적으로 존재할 수 있으며, 조판 파일을 공유할 수 있다

CSS 스타일 조판 분류 : 　

인라인 조판 스타일, 삽입 조판 스타일, 외부 링크 조판

2. CSS 조판 스타일

인라인 조판 스타일:

형식: 3545480325f1042fa8b5f985d68b0861…8d919448e249f6b3a62c794321c28972

예:c9729b80a1b971001392bd7257217334조판 스타일< ;/p>

인라인 조판 스타일:

인라인 조판의 모든 스타일 정의는 c9ccee2e6ea535a969eb3f532ad9fe89..531ac245ce3e4fe3d50054a55f265927과 6c1d9d1c5e7690ed0ad94b24a12b6eb7 사이에 있어야 합니다. ..531ac245ce3e4fe3d50054a55f265927은 93f0f5c25f18dab9d176bd4f6de5d30e..9c3bca370b5104690d9ef395f2c5f8d1 사이에 있어야 하며

의 기능은

세 가지 유형으로 나눌 수 있습니다. 🎜>

2. 클래스 정의 유형

3.id 정의 유형

태그 정의 유형 형식:

이후 CSS 레이아웃 스타일 소개를 마칩니다. . . . 다음으로 CSS의 강력한 선택자를 살펴보겠습니다.

<head>
 
　　<style type=”text/css”> 　　
 
　　　　标记名称{属性 1:属性值 1;属性 2:属性值 2;} 　　
 
　　　　标记名称{属性 1:属性值 2;属性 2:属性值 2;}
 
　　</style>
 
</head>
 
<body>
 
　　<标记名称>…</标记名称>
 
</body>
 
class 定义型格式:
 
<head>
 
　　<style type=”text/css”> 　　
 
　　　　.定义名称{属性 1:属性值 1;属性 2:属性值 2;} 　　
 
　　　　.定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
 
　　</style>
 
</head>
 
<body> 　　
 
　　<标记名称 class=”定义名称”>…</标记名称>
 
</body>
 
id 定义型格式:
 
<head>
 
　　<style> 　　
 
　　　　#定义名称{属性 1:属性值 1;属性 2:属性值 2;} 　　
 
　　　　#定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
 
　　</style>
 
</head>
 
<body> 　　
 
　　<标记名称 id=”定义名称”>…</标记名称>
 
</body>
 
外部排版样式定义:
 
独立的样式排版: 　　
 
标记名称{属性 1:属性值 1;属性 2:属性值 2;} 　　
 
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
 
在<head>…</head>之间使用<link> 格式:
 
<head> 　　
 
　　<link rel=”stylesheet” type=”text/css” href="http://www.php1.cn/">
 
</head>
 
在<head>…</head>之间使用 import 格式：
 
<head>
 
　　<style type="text/css">
 
　　　　@import "style.css"
 
　　</style>
 
</head>

1. 전역 선택자라고도 불리는 와일드카드 선택자 - (전체 웹페이지에서 작동)

2. 요소 선택자

*{
 
font-size:13px;
 
font-family:"微软雅黑","华文楷体";
 
}

3. ID 및 클래스

p,h1,h2,h3,a{
 
font-size:13px;
 
}

선택자는 ID 선택기와 클래스 선택기가 포함되어 있습니다. 오랫동안 많은 개발자가 ID를 클래스와 혼동하거나 이 두 선택기를 올바르게 사용할 수 없거나 단순히 서로 동일하다고 생각했습니다.

(1). 애플리케이션 ID

각 ID는 한 페이지에 있으며 고유 식별자로 한 번만 사용할 수 있습니다. 일반적으로 ID는 헤더, 기본 탐색 모음, 레이아웃 블록 등과 같은 페이지의 고유 요소에만 사용됩니다.

예:a1926d7db1d226bc346d21774732604f이 단락에는 빨간색 텍스트가 있습니다.94b3e26ee717c64999d7867364b1b4a3

해당 CSS 코드:

#hightlight{ color:#FFFFFF ; }

(2) ID와 선택기 결합

/* 모든 h2 타이틀에 적합*/

h2{ color:#333; 글꼴 크기:16px; }

/*제목 h2 제목에만 적합*/

h2#title { color:#eee; }

해당 HTML 코드:

(3). ID

<h2>Title Of My Article</h2>
 
<h2 id=”title”>Title Of My Article</h2>

각 ID에 대해 각 페이지에서 하나의 요소만 이 스타일을 사용할 수 있으므로 ID는 페이지에 고유하고 한 번만 사용되는 각 요소에 대한 것이어야 합니다. ,

(4) 동일한 CSS 규칙을 여러 곳에서 사용해야 하는 경우에는 ID를 사용하지 마세요.

(5) 애플리케이션 클래스는 무제한으로 사용할 수 있으므로 CSS를 적용하는 매우 유연한 방법입니다.

< ;p class=”hightlight”> ;그 단락에는 빨간색 텍스트가 있습니다.94b3e26ee717c64999d7867364b1b4a3

관련 CSS 코드:

(6). 및 ID 예:

.hightlight {color:FFFFFF; }

해당 CSS 코드:

<ul id=”drinks”>
 
　　<li class=”mix”>Beer</li>
 
　　<li class=”mix”>Spirtis</li>
 
　　<li class=”hot”>Cola</li>
 
　　<li class=”hot”>Lemonade</li>
 
</ul>

해당 HTML 코드:

ul#drinks { color:FF6600; }
 
.mix { Color:#999999; }
 
.hot { Color:#333333; }
 
(7).利用类改写基本样式:
 
p{Color:#ff6600; }
 
.bleached {Color:#ccc; }

(8) 클래스를

<p>This paragraph has red text.</p>
 
<p class=”bleached”>This paragraph has red text.</p>

p.bleached {color:red }

해당 HTML 코드:

(9) 클래스의 경우 여러 번 재사용되거나 하위 클래스 선택기를 사용하는 경우 고유한 마크인 경우 클래스를 선택합니다. 레이아웃과 같은 경우 ID를 사용하십시오.

<p class=”bleached”>This paragraph has red text.</p>

4. 계단식 연결

(1) 외부 링크의 계단식 구현

6dc64a8ede33c8387f23752fc7fc69ab

aa99794041c68cb18c24f3b682cce686

98349952b935a93b35aeaf8c2b5a0ffe

(2) 계단식을 구현하기 위한 스타일 가져오기

@import url( "one.css")

@import url("two.css")

@import url("3.css ")

참고: 한 가지 규칙을 명심해야 합니다. 규칙이 늦게 주어질수록 중요해집니다.

5 . 그룹화

6. 상속

h1{
 
　　Font-family:隶书,宋体,楷体; 　　
 
　　Line-height: 140%; 　　
 
　　Color:#333;
 
}
 
h2{ 　　
 
　　Font-family:隶书,宋体,楷体; 　　
 
　　Line-height: 140%; 　　
 
　　Color:#333;
 
}
 
h3{ 　　
 
　　Font-family:隶书,宋体,楷体; 　　
 
　　Line-height: 140%; 　　
 
　　Color:#333;
 
}
 
/*分组后*/
 
h1,h2.h3{ 　　
 
　　Font-family:隶书,宋体,楷体; 　　
 
　　Line-height: 140%; 　　
 
　　Color:#333;
 
}
 
/*分组例外*/
 
h1{ 　　
 
　　Font-style:italic;
 
}

7. >

h1 { Color:#333; }
 
<h1>This is thegreatest heading <i>in the world</i></h1>
 
从 BODY 继承
 
Body { 　　
 
　　Margin:10px; 　　
 
　　Font-family:隶书; 　　
 
　　Background:#000; 　　
 
　　Color:#fff;
 
}

8. 하위 클래스 선택자

h1{ 　　
 
　　Color: #ccc;
 
}
 
I { 　　
 
　　Color:#000;
 
}
 
/*使用上下文选择器*/
 
h1 I {
 
　　Color:#000;
 
}

9. 기타 선택자

(1). >

.box {
 
　　color:red;
 
}
 
.box1 {
 
　　font-weight:bold;
 
}
 
.box2 { 　　
 
　　font-style:italic;
 
}
 
<div class="box">Box</div>
 
<div class="box box1">Box1</div>
 
<div class="box box2">Box2</div>

p{색상:검정색;}

a{텍스트 장식:밑줄;}

h1{글꼴 -weight:bold ;}

(2). 하위 선택자

h2 i{color:red }

리아{텍스트 장식:없음;}

#main h1{Color:red;}

(3).伪类

a:link{color:blue;}

a:visited{color:green;}

a:hover,a:active{color:red;}

input:focus{background-color:yellow;}

(4).高级选择器

高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避免使用这些高级选择器.

10、子选择器和相邻同胞选择器

子选择器

#nav > li {
 
background:url(bg.gif) no-repeat left top;
 
}
 
<ul id="nav"> 　　
 
　　<li>Home</li> 　　
 
　　<li>
 
　　　　<ul> 　　　　　　
 
　　　　　　<li>Development</li> 　　　　　　
 
　　　　　　<li>Consultancy</li> 　　　　
 
　　　　</ul> 　　
 
　　</li>
 
　　<li>Contact Us</li>
 
</ul>

相邻同胞选择器:

h1+p{font-weight:bold;}
 
<h1>Main Heading</h1>
 
<p>First Paragraph</p>
 
<p>Second Paragraph</p>

11、属性选择器

<strong title=”Cascading Style Sheets”>CSS</strong>
 
strong[title] {border-bottom: 1px dotted #999;}
 
strong[title]:hover {cursor:help;background:#ccc}
 
12、针对列表项特别好用的两个伪类选择器：
 
ol li:first-child{
 
　　/*选中ol下面的第一个li*/
 
}
 
ol li:last-child{
 
　　/*选中ol下面的一最后一个li*/
 
}
 
CSS3选择器新特性
 
a[href$=&#39;.jsp&#39;]{
 
　　/*所有a标签中href属性为.jsp结尾的被选中*/
 
}
 
a[href^=&#39;asd]{
 
　　/*所有a标签中href属性为asd开头的被选中*/
 
}
 
a[href*=&#39;asd]{
 
　　/*所有a标签中href属性中包含asd的被选中*/
 
}

选择表中的行：

tr:nth-of-type(even){
 
　　background-color:red;
 
　　/*选中偶数行*/
 
}
 
tr:nth-of-type(odd){
 
　　background-color:red;
 
　　/*选中奇数行*/
 
}
 
tr:nth-of-child(n){
 
　　background-color:red;
 
　　/*选中所有行*/
 
}

성명：

이전 기사：CSS3의 콘텐츠 문자 인코딩다음 기사：CSS3의 콘텐츠 문자 인코딩

CSS 선택기에 관한 것

관련 기사