이 코드를 사용하여 원하는 위치에만 스타일을 적용 할 수 있습니까?

Question

내 웹 사이트에서 페이지의 한 부분만을 스타일링하고 싶습니다. 최종 결과는 모서리가 둥근 상자입니다.

기본 '테스트'텍스트 편집기에서 코드를 사용할 때이 코드는 아름답게 작동합니다.

그러나 사이트의 페이지에 붙여 넣으면 스타일 대신 전체 페이지의 스타일이 적용됩니다.

나는 이전에 브라우저가 없다는 것을 배우기 위해 <style scoped> (모든 것은 <div> 태그로 감싸였습니다)으로 대답을 찾았다 고 생각했습니다. 브라우저 지원 문제를 해결했을 수도있는 플러그인으로 인도되었으므로로드 할 수 없으므로 사용할 수 없습니다.

도움이된다면이 자료는 Wordpress 사이트입니다. 나는 또한 내 functions.php에서 wpautop을 비활성화해야했습니다. 내가 그것을하기 전에, 그것은 내가 넣지 않은 <p> 태그의 모든 스타일을 감싸고있었습니다.

또 다른 일반적인 결과는 맨 아래의 "ul"조각과 그 'ul'조각의 텍스트가 표시되지만 스타일은 전혀 없다는 것입니다.

또한 전체 내용을 <div> 태그로 묶으려고했으나 작동하지 않았습니다.

추가 정보가 필요하면 알려 주시기 바랍니다.

그렇지 않은 경우 미리 아이디어를 제공해 주셔서 감사합니다.

<style type="text/css"> 
UL { 
border-radius: 20px/20px; 
-webkit-border-radius: 20px/20px; 
-moz-border-radius: 20px/20px; 
-ms-border-radius: 20px/20px; 
-o-border-radius: 20px/20px; 
height: 150px; 
width: 500px; 
    background: #7220c9; 
    margin: 12px 12px 12px 12px; 
    padding: 5px 5px 5px 5px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.9); 
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); 
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9); 
    -ms-box-shadow: 0 0 20px rgba(0,0,0,0.9); 
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.9); 
              /* No borders set */ 
    } 
    LI { 
    color: black;    /* text color is black */ 
    font-family: Arial; 
    font-size: 14px; 
    background: white;   /* Content, padding will be white */ 
    border-radius: 20px/20px; 
    -webkit-border-radius: 20px/20px; 
    -moz-border-radius: 20px/20px; 
    -ms-border-radius: 20px/20px; 
    -o-border-radius: 20px/20px; 
    margin: 12px 12px 12px 12px; 
    padding: 12px 12px 12px 12px; 
    list-style: none    /* no glyphs before a list item */ 
              /* No borders set */ 
    } 
    LI.withborder { 
    border-radius: 20px/20px; 
    -webkit-border-radius: 20px/20px; 
    -moz-border-radius: 20px/20px; 
    -ms-border-radius: 20px/20px; 
    -o-border-radius: 20px/20px; 
    border-style: none; 
    border-width: medium;  /* sets border width on all sides */ 
    border-color: #27d130; 
    } 
</STYLE> 

<UL> 
    <LI><b><center>Here is some text.</center></b> 
    <LI class="withborder">This is some additional text.</a>. 
</UL> 

Answer 1

는 페이지의 모든 UL 및 LI 태그를 포함 할 스타일을 설정 한 : 그것은 유용 경우

, 여기에 (다시 대신 스코프의 <style type="text/css">에) 코드입니다. 특정 부분에만 적용하려면 class 이름을 사용하거나 id을 사용해야합니다.

.ul UL { 
    /* style here */ 
} 

HTML : 같은

<ul class="ul"> <!-- only this particular UL will be affected --> 

당신이 withborder 클래스와 <li> 태그에 있음을 사용한 볼은 또한 <ul> 태그와 동일한 기능을 수행 할 필요가있다.

Answer 2

be sure to end your lines 
<li><b><center>Here is some text.</center></b></li> 

다른 정렬되지 않은 목록이없는 한 괜찮습니다. 그렇지 않으면 다른 모든 정렬되지 않은 목록에 대해 표준 서식없는 클래스 인 별도의 클래스를 만들어야합니다. by

UL { 
border-radius: 20px/20px; 
-webkit-border-radius: 20px/20px; 
-moz-border-radius: 20px/20px; 
-ms-border-radius: 20px/20px; 
-o-border-radius: 20px/20px; 
height: 150px; 
width: 500px; 
background: #7220c9; 
margin: 12px 12px 12px 12px; 
padding: 5px 5px 5px 5px; 
box-shadow: 0 0 20px rgba(0,0,0,0.9); 
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); 
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.9); 
-ms-box-shadow: 0 0 20px rgba(0,0,0,0.9); 
-o-box-shadow: 0 0 20px rgba(0,0,0,0.9); 

페이지의 모든 정렬되지 않은 목록을 효과적으로 스타일 지정하고 있습니다. 모든 정렬되지 않은 목록에 대한 클래스를 통해 윤곽의 형태를 만들어야합니다.